Development workflow

GraphQL Code Generator should be integrated as part of your development workflow.

Scripts Integration

If you wish to run the codegen before starting your server/app, you can use pre scripts in your package.json, for example:

{
  "scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js",
    "generate": "graphql-codegen",
    "prestart": "yarn generate",
    "predev": "yarn generate"
  }
}

This way, the codegen generates the output according to your configuration before each time you run dev or start scripts.

It's also helpful to run the codegen during your continuous integration flow and ensure that your code continually compiles with the generated output; this way, you can detect breaking changes in your GraphQL schema and GraphQL documents.

Watch Mode

If you wish to run the codegen in watch mode, you can specify --watch (or -w) when running it.

You can either run it in a separate terminal session or use tools like concurrently (opens in a new tab) to run two scripts at the same time:

{
  "scripts": {
    "dev": "concurrently \"nodemon app.js\" \"yarn generate --watch\"",
    "start": "node app.js",
    "generate": "graphql-codegen",
    "prestart": "yarn generate"
  }
}

If you wish, you can specify a custom list of files to watch, by adding a glob expression to the command, using --watch flag:

yarn graphql-codegen --watch "src/**/*.js"

Use this when you are loading your schema or documents from a single code file that depends on other files internally because codegen can't tell that you're using those files automatically.

We use @parcel/watcher (opens in a new tab) which supports subscribing to realtime notifications of changes in a directory. It works recursively, so changes in sub-directories will also be emitted.

import { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'http://localhost:4000/graphql',
  // ...
  watch: true
}
 
export default config

Monorepo and Yarn Workspaces

If you are using a monorepo structure, with tools such as Yarn Workspaces (opens in a new tab) or Lerna (opens in a new tab), we recommend installing the codegen in the root of your monorepo.

If you need to execute the codegen multiple times, note that you can specify multiple fields for generates field, for example:

import { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'server/src/**/*.graphql',
  documents: 'client/src/**/*.graphql',
  generates: {
    'client/src/models.ts': ['typescript', 'typescript-operations'],
    'server/src/models.ts': ['typescript', 'typescript-resolver']
  }
}
 
export default config

What's next?

Get started with our guides:

• React and Vue
• Angular
• Svelte
• Apollo and Yoga server
• GraphQL Modules

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