Usage

Config Search Places

• graphql.config.ts

• graphql.config.cts

• graphql.config.mts

• graphql.config.js

• graphql.config.cjs

• graphql.config.mjs

• graphql.config.json

• graphql.config.yaml

• graphql.config.yml

• graphql.config.toml

• .graphqlrc (YAML and JSON)

• .graphqlrc.ts

• .graphqlrc.cts

• .graphqlrc.mts

• .graphqlrc.js

• .graphqlrc.cjs

• .graphqlrc.mjs

• .graphqlrc.json

• .graphqlrc.yml

• .graphqlrc.yaml

• .graphqlrc.toml

• graphql property in package.json

Schema

The simplest config specifies only schema which points to the source of GraphQL Schema.

schema: ./schema.graphql

Based on the above example you may think GraphQL Config accepts only single GraphQL files, but it does more than that.

To learn more about possible sources of GraphQL schema read the “Specifying schema” chapter.

Documents

Another piece of GraphQL may be operations and fragments. In GraphQL Config we call them documents.

# ...
documents: src/components/**/*.graphql

By default, GraphQL Config can find and extract documents from GraphQL files but if you want to extend it with JavaScript and TypeScript files (also tsx and jsx) please read the “Specifying documents” chapter.

Include / Exclude

When you want to point out files related to the schema (for instance, React components) and make your IDE GraphQL Extension recognize those files, you can include and exclude items:

# ...
include: src/components/**/*.jsx
exclude: src/components/__ignored__/**/*.jsx

Extensions

To pass information to GraphQL Config’s consumers (like IDE extensions, and Node libraries), you can use an extensions section that is a key-value object.

schema: './schema/*.graphql'
extensions:
  codegen:
    generates:
      ./src/types.ts:
        plugins:
          - typescript
          - typescript-resolvers

Now GraphQL Code Generator can consume that data.

Projects

GraphQL Config allows you to define multiple projects within the same config file.

Consider, for instance, writing the following configuration:

schema: './schema.graphql'
documents: './src/components/**/*.graphql'

This creates a singular, default project. To extend configuration to multiple projects, you can use the following approach:

projects:
  foo:
    schema: './packages/foo/schema.graphql'
    documents: './packages/foo/src/components/**/*.graphql'
  bar:
    schema: './packages/bar/schema.graphql'

It’s also possible to define many projects where one is the default. You can simply add default as that project’s name:

projects:
  default:
    schema: './packages/foo/schema.graphql'
    documents: './packages/foo/src/components/**/*.graphql'
  bar:
    schema: './packages/bar/schema.graphql'