2.3 Generate Typescript Interfaces

The last step is to generate typescript interfaces from our GraphQL schema. This step is used to enhance the developer experience to strongly type our API.

1. Add dependencies

Install the following dev dependencies:

yarn add @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations graphql --dev

2. Make your API accessible

Add the following script to the script section of your package.json file:

  "graphql-codegen": "graphql-codegen",

3. Create the codegen config file

Create a file codegen.yml in the root directory:

name: GraphQL API
schema:
  - [[API_URL]]/graphql/v1:
      headers:
        apiKey: "[[API_KEY]]"
documents: ./src/**/*.graphql.ts
generates:
  ./src/graphql-types.ts:
    plugins:
      - typescript
      - typescript-operations

Replace [[API_URL]] and [[API_KEY]] with the values relevant to your project.