Mocking with GraphQL Fake

Mocking data with GraphQL Fake  #graphql #ux #reactjs #javascript #NodeJS  #graphqlfake

  • GraphQL Fake consists of a browser-based IDE and an API service and makes generating fake data much easier.
  • It uses the GraphQL query language to generate fake data in an intuitive way.
  • GraphQL works by querying fields and types.
  • The main type is Fake but there are also other types which will return predefined fields.
  • GraphQL Fake can also generate data in multiple languages.

Do you have a project in mind? Or just want to find out more about us? Whatever the reason we would love to hear from you. Send us your brief or give us a call on +44 203 772 5380

@otissv: Mocking data with GraphQL Fake #graphql #ux #reactjs #javascript #NodeJS #graphqlfake

When developing designs, building databases or creating a user interface, there is always the tedious task of generating fake data. I would normally use tools such as Faker.js or Casual.js for this and while these tools are great, it can take time to mock all the data. 

GraphQL Fake consists of a browser-based IDE and an API service and makes generating fake data much easier. It uses the GraphQL query language to generate fake data in an intuitive way. You simply have to ask the service for what you want and it will send back mock data in a predictable structure. 

GraphQL works by querying fields and types. The main type is Fake but there are also other types which will return predefined fields. All types can be extended and deeply nested with other types, allowing endless combinations with complex structures. GraphQL Fake can also generate data in multiple languages.

Queries can be sent via the IDE or directly to the API server. The IDE has the added advantage of autocompletion, inline field descriptions and schema parsing. Here we will focus on the Fake IDE. 

A basic query has a type with fields. All types are in upper case, while fields are lower case. Types can also be fields of other types.

Alias can be used to change the name of a field result to a more appropriate name, to ensure it matches the data you want to receive.

Each type also has a list version with the word ‘list’ attached to it, which will return an array. The list types have a length argument which specifies the number of items to be retuned.

To allow the use of dynamic arguments, variables can be used as the argument’s values. 

An operation type must be provided that takes variables as arguments and its type as a string. Variable names are declared with a $ prefix and JSON is used to map the variable values.

Mocking with GraphQL Fake