Generate TypeScript Types from GraphQL

Automatically generate types for your local or remote GraphQL schema, and operations for better type-safety.

We've discussed working with the GraphQL Code Generator before, but let's go back to basics. In this tutorial we'll learn how to automatically generate TypeScript types for our GraphQL schema, and operations.

To get started you'll want to install the GraphQL Code Generator CLI:

npm install --save-dev @graphql-codegen/cli

Now using npx we can run the initializer:

npx graphql-codegen init

This will then ask us about our project, and what exactly features of GraphQL Code Generator we want to use.

Once complete you should now have a file inside of your project directly with the name you specified for the config file. By default this will be called codegen.yml:

overwrite: true
documents: "./graphql/**/*.{gql,graphql}"
      - "typescript"
      - "typescript-operations"

With this we can install install the dependencies added to the package.json, as well as the codegen script:

npm install
npm run codegen

You should now see inside of your project directly you have the file types.ts (or whatever you named it) that contain all of the types for the API you specified.

That's it! You're ready to add GraphQL operations to the directory you specified, and generate the TypeScript types.

Jamie Barton

Published on 4 Jul 2022 by Jamie Barton