How to generate Graphql types for React with help of graphql-codegen when Apollo Server is in production mode?

0
votes

When backend mode set to NODE_ENV: development all works perfectly, but in production mode graphql-codegen fails with error:

Local web-server error:

GraphQL introspection is not allowed by Apollo Server, but the query contained _schema or _type. To enable introspection, pass introspection: true to ApolloServer in production

Production web-server error:

Failed to load schema from https://example.com/graphql, reason: unable to verify the first certificate. GraphQL Code Generator supports:

  • ES Modules and CommonJS exports (export as default or named export "schema")
  • Introspection JSON File
  • URL of GraphQL endpoint
  • Multiple files with type definitions (glob expressions)
  • String in config file

Front-end codegen.yml:

schema: ${REACT_APP_GRAPHQL_URL}
documents:
 - './src/GraphQL/queries/query.ts'    
 - './src/GraphQL/mutations/mutation.ts'
overwrite: true
generates:
  ./src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      skipTypename: false
      withHooks: true
      withHOC: false
      withComponent: false

Front-end devDependencies:

{
    "@graphql-codegen/cli": "^1.20.1",
    "@graphql-codegen/typescript": "^1.20.2",
    "@graphql-codegen/typescript-operations": "^1.17.14",
    "@graphql-codegen/typescript-react-apollo": "^2.2.1",
}

npm scripts:

{
    "generate": "graphql-codegen -r dotenv/config --watch --config codegen.yml",
    "prebuild": "graphql-codegen -r dotenv/config --config codegen.yml"
}

./src/generated/ directory added to .gitignore

1
node.jstypescriptgraphqlapollographql-codegen
ask API/server maintainers about providing downloadable/static pregenerated [on build/deploy] schema file – xadm

1 Answers

0
votes

My solution was in add introspection plugin and separate codegen.yml file into:

  • codegen-generate-schema-json and
  • codegen-generate-typescript
devDependencies: {"@graphql-codegen/introspection": "^1.18.1"}

codegen-generate-typescript.yml:

schema: graphql.schema.json
documents:
  - './src/GraphQL/queries/query.ts'
  - './src/GraphQL/mutations/mutation.ts'
overwrite: true
generates:
  ./src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      skipTypename: false
      withHooks: true
      withHOC: false
      withComponent: false

codegen-generate-schema-json.yml:

schema: ${REACT_APP_GRAPHQL_URL}
overwrite: true
generates:
  ./graphql.schema.json:
    plugins:
      - introspection

So ./graphql.schema.json file need to be commited and used as schema source instead of URI.

Maybe you suggest the better solution?