Getting Started: Codegen

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

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
      declarationKind: interface
      dedupeOperationSuffix: true
      immutableTypes: true
      namingConvention: keep
      noSchemaStitching: true
      operationResultSuffix: Data
      optionalResolveType: true
      useIndexSignature: true

    generates:
      src/codegen/schema.ts: # replace with path to the file you wish to generate
        schema: src/client.schema.graphql # replace with path to client-side schema
        plugins:
          - typescript
          - typescript-operations

        documents:
          - packages/test-helpers/*.query.graphql
          - packages/test-helpers/*.mutation.graphql
          - packages/test-helpers/*.subscription.graphql
          - packages/test-helpers/*.fragment.graphql

Now, to automatically generate typings, run

npx graphql-codegen --watch

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