schema.mdx

sidebar_position
1

Schema

config.factoryName

By default, this plugin generates factories named create{Type}Mock. So for a type User, the corresponding factory will be named createUserMock.

Example

type User {
  id: ID!
  username: String!
}

// highlight-start
export function createUserMock(props: Partial<User>): User {
  // highlight-end
  return {
    id: "",
    username: "",
    ...props,
  };
}

You can customize the factories' name by configuring factoryName:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
      - graphql-codegen-factories/schema
    config:
      # highlight-start
      factoryName: new{Type}
      # highlight-end

Example

type User {
  id: ID!
  username: String!
}

// highlight-start
export function newUser(props: Partial<User>): User {
  // highlight-end
  return {
    id: "",
    username: "",
    ...props,
  };
}

config.scalarDefaults

By default, this plugin infers the default values based on the properties' type. For example, a property whose type is Boolean will have a value of false.

Example

type User {
  isAdmin: Boolean!
}

export function createUserMock(props: Partial<User>): User {
  return {
    // highlight-start
    isAdmin: false,
    // highlight-end
    ...props,
  };
}

You can customize the default values by configuring scalarDefaults:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
      - graphql-codegen-factories/schema
    config:
      scalarDefaults:
        # highlight-start
        Boolean: true
        # highlight-end

Example

type User {
  isAdmin: Boolean!
}

export function createUserMock(props: Partial<User>): User {
  return {
    // highlight-start
    isAdmin: true,
    // highlight-end
    ...props,
  };
}

:::caution

This plugin only infers default values for built-in scalars. You will probably need to use this option to define the values of custom scalars, e.g Date.

Example

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
      - graphql-codegen-factories/schema
    config:
      scalarDefaults:
        # highlight-start
        Date: new Date()
        # highlight-end

scalar Date

type User {
  createdAt: Date!
}

export function createUserMock(props: Partial<User>): User {
  return {
    // highlight-start
    createdAt: new Date(),
    // highlight-end
    ...props,
  };
}

:::

config.typesPath

By default, this plugin assumes that the types and factories are generated in the same file. The factories reference types without importing them.

If you want to generate types and factories in different files, you need to provide the typesPath:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
  ./factories.ts:
    plugins:
      - graphql-codegen-factories/schema
    config:
      # highlight-start
      typesPath: ./types
      # highlight-end

Example

type User {
  id: ID!
  username: String!
}

// highlight-start
import * as Types from "./types";
// highlight-end

export function createUserMock(props: Partial<Types.User>): Types.User {
  return {
    id: "",
    username: "",
    ...props,
  };
}

:::info

You don't need to configure this option when using @graphql-codegen/near-operation-file-preset.

:::

config.importTypesNamespace

By default, the import types namespace when using config.typesPath is Types.

You can customize this namespace by configuring importTypesNamespace:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
  ./factories.ts:
    plugins:
      - graphql-codegen-factories/schema
    config:
      typesPath: ./types
      # highlight-start
      importTypesNamespace: SharedTypes
      # highlight-end

Example

type User {
  id: ID!
  username: String!
}

// highlight-start
import * as SharedTypes from "./types";
// highlight-end

export function createUserMock(
  props: Partial<SharedTypes.User>
): SharedTypes.User {
  return {
    id: "",
    username: "",
    ...props,
  };
}

config.maybeValueDefault

By default, nullable fields are initialized as "null".

You can customize this default value through maybeValueDefault:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
      - graphql-codegen-factories/schema
    config:
      # highlight-start
      maybeValueDefault: undefined
      # highlight-end

Example

type Post {
  title: String
}

input PostInput {
  title: String
}

export function createPost(props: Partial<Post> = {}): Post {
  return {
    // highlight-start
    title: undefined,
    // highlight-end
    ...props,
  };
}

export function createPostInputMock(props: Partial<PostInput> = {}): PostInput {
  return {
    // highlight-start
    title: undefined,
    // highlight-end
    ...props,
  };
}

This option can also be used to initialize nullable fields, instead of defaulting to a static value:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
      - graphql-codegen-factories/schema
    config:
      # highlight-start
      maybeValueDefault: "{defaultValue}"
      # highlight-end

Example

type Post {
  author: PostAuthor
}

type PostAuthor {
  username: String
}

export function createPost(props: Partial<Post> = {}): Post {
  return {
    // highlight-start
    author: createPostAuthor(),
    // highlight-end
    ...props,
  };
}

export function createPostAuthor(props: Partial<PostAuthor> = {}): Post {
  return {
    // highlight-start
    username: "",
    // highlight-end
    ...props,
  };
}

config.inputMaybeValueDefault

By default, inputs' nullable fields are initialized as config.maybeValueDefault ("null" by default).

You can customize this default value through inputMaybeValueDefault:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
      - graphql-codegen-factories/schema
    config:
      # highlight-start
      inputMaybeValueDefault: undefined
      # highlight-end

Example

input PostInput {
  title: String
}

export function createPostInputMock(props: Partial<PostInput> = {}): PostInput {
  return {
    // highlight-start
    title: undefined,
    // highlight-end
    ...props,
  };
}

See config.maybeValueDefault to initialize nullable input fields by setting config.inputMaybeValueDefault to "{defaultValue}".

config.disableDescriptions

By default, objects' and inputs' description is added above the factory function.

You can turn it off by setting disableDescriptions to true:

overwrite: true
schema: ./schema.graphql
generates:
  ./types.ts:
    plugins:
      - typescript
      - graphql-codegen-factories/schema
    config:
      # highlight-start
      disableDescriptions: true
      # highlight-end

Example

"""
Description of a Post object.
"""
type Post {
  title: String
}

export function createPostInputMock(props: Partial<PostInput> = {}): PostInput {
  return {
    title: undefined,
    ...props,
  };
}