Skip to content

mdazy/graphql-codegen-typescript-mock-data

 
 

Repository files navigation

graphql-codegen-typescript-mock-data

Description

GraphQL Codegen Plugin for building mock data based on the schema.

Installation

yarn add -D graphql-codegen-typescript-mock-data

Configuration

typesFile (string, defaultValue: null)

Defines the file path containing all GraphQL types. This file can also be generated through graphql-codgen

addTypename (boolean, defaultValue: false)

Adds __typename property to mock data

enumValues (string, defaultValue: pascal-case#pascalCase)

Change the case of the enums. Accept upper-case#upperCase or pascal-case#pascalCase

Example of usage

codegen.yml

overwrite: true
schema: schema.graphql
generates:
  src/generated-types.ts:
    plugins:
      - 'typescript'
  src/mocks/generated-mocks.ts:
    plugins:
      - 'graphql-codegen-typescript-mock-data':
          typesFile: '../generated-types.ts'
          enumValues: upper-case#upperCase

Example or generated code

Given the following schema:

type Avatar {
  id: ID!
  url: String!
}

type User {
  id: ID!
  login: String!
  avatar: Avatar
  status: Status!
}

type Query {
  user: User!
}

input UpdateUserInput {
  id: ID!
  login: String
  avatar: Avatar
}

enum Status {
  ONLINE
  OFFLINE
}

type Mutation {
  updateUser(user: UpdateUserInput): User
}

The code generated will look like:

export const anAvatar = (overrides?: Partial<Avatar>): Avatar => {
  return {
    id: overrides && overrides.hasOwnProperty('id') ? overrides.id! : '0550ff93-dd31-49b4-8c38-ff1cb68bdc38',
    url: overrides && overrides.hasOwnProperty('url') ? overrides.url! : 'aliquid',
  };
};

export const aUpdateUserInput = (overrides?: Partial<UpdateUserInput>): UpdateUserInput => {
  return {
    id: overrides && overrides.hasOwnProperty('id') ? overrides.id! : '1d6a9360-c92b-4660-8e5f-04155047bddc',
    login: overrides && overrides.hasOwnProperty('login') ? overrides.login! : 'qui',
    avatar: overrides && overrides.hasOwnProperty('avatar') ? overrides.avatar! : anAvatar(),
  };
};

export const aUser = (overrides?: Partial<User>): User => {
  return {
    id: overrides && overrides.hasOwnProperty('id') ? overrides.id! : 'a5756f00-41a6-422a-8a7d-d13ee6a63750',
    login: overrides && overrides.hasOwnProperty('login') ? overrides.login! : 'libero',
    avatar: overrides && overrides.hasOwnProperty('avatar') ? overrides.avatar! : anAvatar(),
    status: overrides && overrides.hasOwnProperty('status') ? overrides.status! : Status.Online,
  };
};

Usage in tests

Those helper functions can be used in our unit tests:

const user = aUser({ login: 'johndoe' });

// will create a user object with `login` property overridden to `johndoe`

Contributing

Feel free to open issues and pull requests. We always welcome support from the community.

To run this project locally:

  • Use Node >= 10
  • Make sure that you have the latest Yarn version (https://yarnpkg.com/lang/en/docs/install/)
  • Clone this repo using git clone
  • Run yarn
  • Run yarn build to build the package
  • Run yarn test to make sure everything works

License

GitHub license

MIT

About

[GraphQL Codegen Plugin](https://github.com/dotansimha/graphql-code-generator) for building mock data based on the schema.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 97.3%
  • JavaScript 2.7%