Plugins
TypeScript
typescript-mock-data

TypeScript Mock Data

Package nameWeekly DownloadsVersionLicenseUpdated
graphql-codegen-typescript-mock-data (opens in a new tab)DownloadsVersionLicenseJan 9th, 2023

Installation

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

graphql-codegen-typescript-mock-data

Description

GraphQL Codegen Plugin (opens in a new tab) 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

terminateCircularRelationships (boolean, defaultValue: false)

When enabled, prevents circular relationships from triggering infinite recursion. After the first resolution of a specific type in a particular call stack, subsequent resolutions will return an empty object cast to the correct type.

prefix (string, defaultValue: a for constants & an for vowels)

The prefix to add to the mock function name. Cannot be empty since it will clash with the associated typescript definition from @graphql-codegen/typescript

listElementCount (number, defaultValue: 1)

How many elements should be generated for lists. For example, with listElementCount: 3 a schema field names: [String!]! would generate 3 names in each mock.

enumValues (string, defaultValue: change-case-all#pascalCase)

Changes the case of the enums. The format of the converter must be a valid module#method. You can also use keep to keep all GraphQL names as-is. Available case functions in change-case-all are camelCase, capitalCase, constantCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase, lowerCase, localeLowerCase, lowerCaseFirst, spongeCase, titleCase, upperCase, localeUpperCase and upperCaseFirst See more (opens in a new tab)

typenames (string, defaultValue: change-case-all#pascalCase)

Changes the case of types. The format of the converter must be a valid module#method. You can also use keep to keep all GraphQL names as-is. Available case functions in change-case-all are camelCase, capitalCase, constantCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase, lowerCase, localeLowerCase, lowerCaseFirst, spongeCase, titleCase, upperCase, localeUpperCase and upperCaseFirst See more (opens in a new tab)

scalars ({ [Scalar: string]: ScalarDefinition }, defaultValue: undefined)

Allows you to define mappings for your custom scalars. Allows you to map any GraphQL Scalar to a casual (opens in a new tab) embedded generator (string or function key) with optional arguments, or a or faker (opens in a new tab) generator with optional arguments

Examples using casual

With arguments

plugins:
  - typescript-mock-data:
      scalars:
        Date: # gets translated to casual.date('YYYY-MM-DD')
          generator: date
          arguments: 'YYYY-MM-DD'

With multiple arguments

plugins:
  - typescript-mock-data:
      scalars:
        PaginatedAmount: # gets translated to casual.integer(-100, 100)
          generator: integer
          arguments:
            - -100
            - 100

Shorthand if you don't have arguments

plugins:
  - typescript-mock-data:
      scalars:
        Date: date # gets translated to casual.date()

Examples using faker

With arguments

plugins:
  - typescript-mock-data:
      scalars:
        Date: # gets translated to faker.date.past(10)
          generator: date.past
          arguments: 10

With multiple arguments

plugins:
  - typescript-mock-data:
      scalars:
        Description: # gets translated to faker.lorem.paragraphs(3, '\n')
          generator: lorem.paragraphs
          arguments:
            - 3
            - '\n'

Shorthand if you don't have arguments

plugins:
  - typescript-mock-data:
      scalars:
        Date: date.past # gets translated to faker.date.past()

Custom value generator

plugins:
  - add: "import { arrayBufferGenerator } from '../generators';"
  - typescript-mock-data:
      scalars:
        ArrayBuffer: arrayBufferGenerator()

typesPrefix (string, defaultValue: '')

Useful if you have globally exported types under a certain namespace. e.g If the types file is something like this

declare namespace Api {
 type User {
  ...
 }
}

Setting the typesPrefix to Api. will create the following mock data

export const aUser = (overrides?: Partial<Api.User>): Api.User => {

enumsPrefix (string, defaultValue: '')

Similar to typesPrefix, but for enum types

declare namespace Api {
 enum Status {
  ...
 }
}

Setting the enumsPrefix to Api. will create the following mock data

export const aUser = (overrides?: Partial<User>): User => {
   status: overrides && overrides.hasOwnProperty('status') ? overrides.status! : Api.Status.Online,
}

transformUnderscore (boolean, defaultValue: true)

When disabled, underscores will be retained for type names when the case is changed. It has no effect if typenames is set to keep.

dynamicValues (boolean, defaultValue: false)

When enabled, values will be generated dynamically when the mock function is called rather than statically when the mock function is generated. The values are generated consistently from a casual seed (opens in a new tab) that can be manually configured using the generated seedMocks(seed: number) function, as shown in this test (opens in a new tab).

generateLibrary ('casual' | 'faker', defaultValue: 'casual')

Select a library to generate mock values. The default is casual (opens in a new tab), Other options include faker (opens in a new tab). casual dependents on Node API and cannot be executed in a browser. faker is useful when you want to use a mock function with the dynamicValues option enabled in the browser.

Examples of usage

codegen.yml

overwrite: true
schema: schema.graphql
generates:
  src/generated-types.ts:
    plugins:
      - 'typescript'
  src/mocks/generated-mocks.ts:
    plugins:
      - typescript-mock-data:
          typesFile: '../generated-types.ts'
          enumValues: upper-case#upperCase
          typenames: keep
          scalars:
            AWSTimestamp: unix_time # gets translated to casual.unix_time

With eslint-disable rule

codegen.yml

overwrite: true
schema: schema.graphql
generates:
  src/generated-types.ts:
    plugins:
      - 'typescript'
  src/mocks/generated-mocks.ts:
    plugins:
      - add:
          content: '/* eslint-disable @typescript-eslint/no-use-before-define,@typescript-eslint/no-unused-vars,no-prototype-builtins */'
      - typescript-mock-data:
          typesFile: '../generated-types.ts'
          enumValues: upper-case#upperCase
          typenames: keep
          scalars:
            AWSTimestamp: unix_time # gets translated to casual.unix_time

Example of generated code

Given the following schema:

scalar AWSTimestamp
 
type Avatar {
  id: ID!
  url: String!
}
 
type User {
  id: ID!
  login: String!
  avatar: Avatar
  status: Status!
  updatedAt: AWSTimestamp
}
 
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 anUpdateUserInput = (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,
    updatedAt: overrides && overrides.hasOwnProperty('updatedAt') ? overrides.updatedAt! : 1458071232,
  };
};

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`

Dealing with Timezone

If some properties use generated dates, the result could different depending on the timezone of your machine.

To force a timezone, you can set environment variable TZ:

TZ=UTC graphql-codegen

This will force the timezone to UTC, whatever the timezone of your machine or CI

Contributing

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

To run this project locally:

License

GitHub license (opens in a new tab)

MIT

Last updated on
vue-urqlgql-tag-operations