GraphCMS Schema & Code Generation

.graphqlrc.yml

# GraphCMS API
schema: https://api-eu-central-1.graphcms.com/v2/xxxxxx/master
overwrite: true
documents: ./src/graphql/**/*.graphql

# Format files

extensions:
  codegen:
    hooks:
      afterAllFileWrite:
        - eslint --fix
    generates:
      ./schema.graphql:
        plugins:
          - schema-ast
      src/generated-types.tsx:
        plugins:
          - typescript
          - typescript-operations
          - typescript-react-apollo
        config:
          withHOC: false
          withComponent: true
          withHooks: true

README.md

Install the graphql command.

npm i graphql-cli

Install the followin extensions for the graphql command and the code generation.

npm i @graphql-cli/codegen @graphql-cli/coverage @graphql-cli/diff @graphql-cli/similar @graphql-cli/validate @graphql-codegen/schema-ast @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo @graphql-codegen/typescript-resolvers

In your package.json add the following scripts.

"scripts": {
    "graphql:codegen": "graphql codegen",
    "graphql:coverage": "graphql coverage",
    "graphql:validate": "graphql validate",
    "graphql:diff": "graphql diff",
    "graphql:similar": "graphql similar"
},

Execute the command graphql:codegen to generate the needed schema.graphql and types.