close

Mocking with GraphQL Fake - the easy way to generate fake data

go

fake.png

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

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.

fake_0.png

 

Queries

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.

Code Example

# query
{
  Fake {
    firstName
    lastName
    Address {
      country
      city
      zipCode
      streetName
      streetAddress
      state
      stateAbbr
      buildingNumber
    }
  }

# result
{
  "Fake": {
    "firstName": "Austyn",
    "lastName": "Durgan",
    "Address": {
      "country": "Netherlands",
      "city": "Kossview",
      "zipCode": "15350-6518",
      "streetName": "c",
      "streetAddress": "8146 Katelin Skyway",
      "state": "California",
      "stateAbbr": "OR",
      "buildingNumber": 8719
    }
  }
}

Alias

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.

Code Example

# query
{
  Customer: Fake {
    firstName
    Surname: lastName
    homeAddress: Address {
      country
      city
      zipCode
      streetName
      streetAddress
      state
      stateAbbr
      buildingNumber
    }
  }
}

# result
{
  "Customer": {
    "firstName": "Myra",
    "Surname": "Ondricka",
    "homeAddress": {
      "country": "Sri Lanka",
      "city": "West Stanchester",
      "zipCode": "68299-9535",
      "streetName": "a",
      "streetAddress": "995 Funk Bypass",
      "state": "Nevada",
      "stateAbbr": "VA",
      "buildingNumber": 50
    }
  }
}

Lists

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.

Code Example

# query
{
  CommerceList (length: 2) {
    _id
    department
    productName
    price
    productAdjective
    productMaterial
    product
  }
}

#result
{
  "CommerceList": [
    {
      "_id": "ef3af4cc-00f3-4637-8ba9-f98fca6f8088",
      "department": "Books",
      "productName": "Tasty Cotton Chair",
      "price": 671,
      "productAdjective": "Handcrafted",
      "productMaterial": "Fresh",
      "product": "Table"
    },
    {
      "_id": "ef3af4cc-00f3-4637-8ba9-f98fca6f8088",
      "department": "Baby",
      "productName": "Handmade Soft Pizza",
      "price": 901,
      "productAdjective": "Gorgeous",
      "productMaterial": "Steel",
      "product": "Mouse"
    }
  ]
}

Variables

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.

Code Example

# query
query ($roles: [String]) {
  User (roles: $roles) {
    roles
    username
    firstName
    lastName
    password
    email
    phoneNumber
    website
    
  }
}

# variables
{
  "roles": ["admin", "guest" ]
}

#result
{
  "User": {
    "roles": [
      "admin",
      "guest"
    ],
    "username": "Zena_Dickens",
    "firstName": "Corine",
    "lastName": "Frami",
    "password": "6Wyatt26",
    "email": "Kunze_Amber@gmail.com",
    "phoneNumber": "1-298-222-4102 x7982",
    "website": "monte.org"
  }
}

 

You can try out GraphQL Fake at http://fake.graphql.guru

Author:

screen_shot_2016-08-19_at_12.41.06
Otis
  • graphql
  • UX
  • mocking
  • development

Get in Touch