Quick Start

Make sure that you add both the graphql and @graphql-codegen/cli packages in your project’s dependencies:

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

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

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

bun add graphql
bun add --dev typescript @graphql-codegen/cli

If you want watch mode support you need to add @parcel/watcher as well:

npm i -D @parcel/watcher

pnpm add -D @parcel/watcher

yarn add --dev @parcel/watcher

bun add --dev @parcel/watcher

Global Installation

Please avoid installing graphql, @graphql-codegen/cli, and its plugins as global dependencies. This will cause issues because of duplications of the graphql package. Install it only locally in your project.

Monorepo Project

If you are using Monorepo setup (Yarn or pnpm Workspaces), please note that GraphQL Codegen is using require to load plugins and files. This might break and fail in case of hoisting.

If you are having issues with loading GraphQL-Codegen plugins, make sure it’s installed correctly, at the same level of node_modules, and make sure it’s accessible and available for the Codegen CLI.

Setup

GraphQL Code Generator comes with dozens of plugins, from frontend to backend, from web apps to mobile apps. We recommend looking at the guides or trying the initialization wizards

Otherwise, you can start exploring the plugins and setting up them manually.

Initialization Wizard

Once installed, GraphQL Code Generator CLI can help you configure your project based on some popular flows:

npx graphql-code-generator init

npm install # install the chosen packages

pnpm add # install the chosen packages

yarn add # install the chosen packages

bun add # install the chosen packages

Question by question, it will guide you through the whole process of setting up a schema, selecting and installing plugins, picking a destination to where your files are generated, and a lot more.

Manual Setup

Once GraphQL Code Generator is installed and added to your project’s development workflow (scripts), you can start installing plugins and configuring them.

If you are looking for the best way to leverage GraphQL Code Generator on your stack, you should read one of our Guides.

Client

Follow one of the following guides to get started.

Server

Follow one of the following guides to get started.

Other

If your stack is not listed above, please refer to our plugins directory.