graphql-mock-data-generator

Installation

$ npm i graphql-mock-data-generator

Usage

Create a schema file

Create a schema file and copy the path with respect to the root directory

You can use these scalars to get relevant fake data generated

| Name of the Scalar | What it generates | |--------------------|-------------------------------------------| | Avatar | URL to an avatar of user | | VideoPreview | URL to a video | | PhotoPreview | URL to an image | | Timestamp | A recent timestamp | | Email | An e-mail ID | | Int | Integer | | Long | Long integer | | Float | Float | | Boolean | true/false | | Phone | A Phone number | | Name | Full name (possibly with title sometimes) | | Url | A random URL | | Address | A full address | | Sentence | A loreum ipsum sentence | | Paragraph | A loreum paragraph | | Object | JSON without predefined type | | String | A loreum word | | ID | UUID string |

You can use your custom enums also while building the schema.

To make a field return a constant value always, use the @const directive.

Here is an example config/schema.graphql file.

# config/schema.graphql
type User {
    userId: ID
    firstName: Name
    lastName: Name
    name: Name
    profileImageUrl: Avatar
}

enum Operator {
    AND
    OR
}

type Keyword {
    term: String
    keywordType: String
}

type Conditions {
    topicKeywords: Keyword
    operator: Operator
}

type Criteria {
    andConditions: Conditions
    excludeConditions: Conditions
}

type Topic {
    id: ID
    modifiedTime: Timestamp
    description: Paragraph
    name: Name
    canEdit: Boolean
    criterias: [Criteria]
    listeningMediaTypes: String
    ownerUser: User
    additional: String
    topicId: String @const(value: "1234")
}

Create a Run Control (Optional)

In the root of the project create a mock-gql.config.json file in case you want to override original configuration.

// mock-gql.config.json
{
  "schema": "config/schema.graphql", // path to schema file
  "mocks": 80, // number of mocks generated for each entity,
  "port": 4000
}

Add a script

Add a script in your package.json file

{
  "scripts": {
    "mock":"graphql-mock-data-generator"
  }
}

Run the script

$ npm run mock

An apollo server will be started

Schema generated successfully
Generating mock data...
🚀Visit the API at http://localhost:4000/

Querying

Open http://localhost:4000 and run this query,

query($input: FeedInput) {
    getTopics_mock(input: $input) {
        count
        hasMore
        items {
            ...SimpleTopics
        }
    }
}

fragment SimpleTopics on Topic {
    id
    name
    canEdit
    description
    ownerUser {
        userId
        name
        profileImageUrl
    }
    topicId
    additional
}

Mocking an error from the server

While using this server, you can generate errors by sending appropriate headers. You just need to send the statuscode (>=400) in the headers you want the server to respond with.

Here's an example of it inside the useQuery hook of @apollo/client in React

const query = gql`
...
`
const { data, loading, error } = useQuery(query, {
  variables: {
    ...
  },
  context: {
    headers: {
      statusCode: 400,
    },
  },
})

This will return a 400 error from the server