Codegen

Using the @graphql-codegen/cli package and its plugins, you can automatically generate TypeScript typings from your schema and query documents.

Note: This guide was written for GraphQL Code Generator v2, but the configuration shown here is also compatible with v5. For the latest features and configuration options, see the official GraphQL Code Generator documentation.

Install Dependencies

npm i -D \
  @graphql-codegen/cli \
  @graphql-codegen/typescript \
  @graphql-codegen/typescript-operations

Or if you use yarn:

yarn add -D \
  @graphql-codegen/cli \
  @graphql-codegen/typescript \
  @graphql-codegen/typescript-operations

Configure GraphQL Code Generator

Create a file called .graphqlrc.yml in your project root and paste in these contents:

schema: 'https://api.app.dev/graphql' # replace with url to your graphql server

extensions:
  codegen:
    config: # season to taste
      constEnums: true            # use `const enum` to define unions
      declarationKind: interface  # use `interface` keyword to define types
      dedupeOperationSuffix: true # prevent `MyQueryQuery`
      documentVariableSuffix: ''  # export `MyQuery` instead of `MyQueryDocument`
      immutableTypes: true        # add `readonly` keyword to frozen objects
      namingConvention: keep      # don't rename types
      operationResultSuffix: Data # add `Data` suffix to result types
      optionalResolveType: true   # make `__resolveType` field optional
      useIndexSignature: true     # required for compatibility with apollo server

    generates:
      # generate the base schema types for client-side documents
      src/schema.ts:
        schema: src/client.schema.graphql
        plugins:
          - typescript-operations
      # generate `.ts` files colocated with each `.graphql` operation
      src/:
        schema: src/client.schema.graphql
        preset: near-operation-file
        presetConfig:
          baseTypesPath: schema.ts
          extension: .graphql.ts
        plugins:
          - typescript-operations
          - typed-document-node
        documents:
          - src/**/*.fragment.graphql
          - src/**/*.mutation.graphql
          - src/**/*.query.graphql
          - src/**/*.subscription.graphql

Now, to automatically generate typings, run

npx graphql-codegen --watch

This has the added benefit of linting your graphql files for errors.