Skip to content
Get packs

Guide · Open source

How to use graphql-code-generator: install, init and generate code

Updated · written with AI from the project's own documentation and checked against our catalogue data

GraphQL Code Generator is an open-source tool that reads your GraphQL schema and the queries, mutations, subscriptions and fragments your app uses, then writes code from them. It is useful to frontend developers who want typed code for GraphQL operations and to backend teams who want code generated from their schema. After this guide you will know how to install it with pnpm, run the interactive setup, and understand how plugins control the output.

GraphQL Code Generatordotansimha/graphql-code-generator · ★ 11.3k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js and pnpm are installed and that your project has a GraphQL schema.
  2. 2Install graphql. Run pnpm add graphql to add the GraphQL peer dependency.
  3. 3Install the CLI. Run pnpm add -D @graphql-codegen/cli to add the CLI as a dev dependency.
  4. 4Run init. Run pnpm graphql-codegen init and answer the questions about schema, plugins and the output file location.
  5. 5Pick plugins. Select the plugins that match your language or framework, such as TypeScript or React.
  6. 6Generate and use the code. Run the generator and use the output in your frontend or backend code.

What you need before you install

The source lists Node.js and pnpm as the prerequisites. The tool works from a GraphQL schema, so you need one, and you also need GraphQL documents (queries, mutations, subscriptions or fragments) if you want operation types generated.

  • Node.js
  • pnpm
  • A GraphQL schema for your project

Install the CLI and the GraphQL peer dependency

The README installs two packages: the graphql package itself, as a regular dependency, and the CLI as a dev dependency.

pnpm add graphql pnpm add -D @graphql-codegen/cli

Run the interactive setup with init

Running init walks you through the whole process question by question. According to the README, it covers setting up a schema, selecting plugins, and picking a destination for the generated file. If you prefer, the official docs describe how to set up codegen manually instead.

pnpm graphql-codegen init

Choose plugins to control the output

Output is controlled by plugins. The README says the project currently supports and maintains plugins for TypeScript, Flow, React, Angular, MongoDB, Stencil and Reason, among others. Pick the plugins that match the language and framework you use. The full list is on the project's plugins page.

  • TypeScript, Flow, React, Angular, MongoDB, Stencil, Reason and more are listed in the README
  • A community also writes and maintains custom plugins

Write your own plugin for custom output

If none of the existing plugins match your needs, you can write your own plugin to generate a custom output. The README describes plugins as flexible and customizable. The contributing guide for custom codegen is linked from the README's Contributing section.

Know what the tool does not do

GraphQL Code Generator only generates code. It does not build a complete app for you, so a project that needs a turnkey application will need other tooling. It also only works from a GraphQL schema, so it is not relevant to projects that do not use GraphQL.

What people use it for

  • Generating TypeScript types for GraphQL queries in a frontend project
  • Generating code from a backend GraphQL schema
  • Using React or Angular plugins in a team that already uses GraphQL
  • Writing a custom plugin to produce an output format the built-in plugins do not cover

Frequently asked questions

Is graphql-code-generator free to use?

The project is released under the MIT licence, as stated in the README. The licence section links to the license file and the package is open source.

What do I need to install graphql-code-generator?

The source lists Node.js and pnpm as prerequisites. Install the graphql package and the @graphql-codegen/cli dev dependency with pnpm, then run pnpm graphql-codegen init.

What is the pnpm graphql-codegen init command for?

It is an interactive setup that asks questions about your schema, the plugins you want, and where the generated file should go. The README says it guides you through the whole process.

Which languages and frameworks does it support?

The README names plugins for TypeScript, Flow, React, Angular, MongoDB, Stencil and Reason, plus some more. It also says a community writes custom plugins.

Can I use it without GraphQL?

No. The tool generates code from a GraphQL schema and GraphQL documents, so it is not suitable for projects that do not use GraphQL.

What are the alternatives to graphql-code-generator?

Comparable projects mentioned in our analysis include graphql-typescript-definitions, Apollo Codegen and graphql-let. Compare them on the plugins or output formats you need before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use graphql-code-generator if you work with GraphQL and want typed code or generated output from your schema and operations, especially with TypeScript, React or Angular. Pick something else if you do not use GraphQL or need a tool that builds a complete app for you.

Install options & downloads