graphql-codegen-mock-results

GraphQL Codegen Mocks

A Graphql Codegen plugin for mocking operation results

This plugin generates mock results for operations based on all of your GraphQL documents.

Example Usage

schema: path/to/schema.graphql
documents: "./src/**/*.graphql"
generates:
  path/to/file.js:
    plugins:
      - graphql-codegen-mock-results

Note: This plugin can be used for both JavaScript file outputs as well as TypeScript file outputs, although if you use a TypeScript file as your file output you will also have to ensure that the plugins @graphql-codegen/typescript and @graphql-codegen/typescript-operations are installed and configured as well.

Installation

npm:

npm install -D graphql-codegen-mock-results

Yarn:

yarn add -D graphql-codegen-mock-results

Usage Example

JavaScript Example

schema: path/to/schema.graphql
documents: "./src/**/*.graphql"
generates:
  path/to/file.js:
    plugins:
      - graphql-codegen-mock-results

query user($id: ID!) {
  user(id: $id) {
    id
    name
    age
  }
}

The example will generate the following:

const userQueryMock = {
  data: {
    user: {
      id: '9e6ea9fe-e42a-4996-a587-ce71904308da',
      name: 'Hello World',
      age: 84
    }
  }
};

TypeScript Example

schema: path/to/schema.graphql
documents: "./src/**/*.graphql"
generates:
  path/to/file.ts:
    plugins:
      - typescript
      - typescript-operations
      - graphql-codegen-mock-results

The example will generate the following:

import { ExecutionResult } from 'graphql';

// ... other codegen generated types ...

const userQueryMock: ExecutionResult<UserQuery> = {
  data: {
    user: {
      id: '9e6ea9fe-e42a-4996-a587-ce71904308da',
      name: 'Hello World',
      age: 84
    }
  }
};

Configuration Options

addTypename

type: boolean default: false

If set to true __typename will be added to all types that are not already querying for it.

Usage Example

schema: path/to/schema.graphql
documents: "./src/**/*.graphql"
generates:
  path/to/file.js:
    plugins:
      - graphql-codegen-mock-results
          addTypename: true

Generates:

const userQueryMock = {
  data: {
    __typename: 'Query',
    user: {
      __typename: 'User',
      id: '9e6ea9fe-e42a-4996-a587-ce71904308da',
      name: 'Hello World',
      age: 84
    }
  }
};

customScalarValues

type: { [key: string]: JsonValue }

Allows for defining the mock result type of scalar values. If one is not provided for built in scalars a mocked value will be provided. If a custom value is not provided for a custom scalar the name of the scalar will be used.

Usage Example

schema: path/to/schema.graphql
documents: "./src/**/*.graphql"
generates:
  path/to/file.js:
    plugins:
      - graphql-codegen-mock-results
          customScalarValues:
            HTML: <p>Hello World</p>

mockNamingConvention

type: NamingConvention default: camel-case#camelCase

Allows you to override the naming convention for the output mocks. The format of the converter must be a valid module#method. You can also use "keep" to keep all GraphQL names as-is.

mockPrefix

type: string, default ''

Changes the mocks variable name prefix.

mockSuffix

type: string, default ''

Changes the mocks variable suffix.