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

Question

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

ask API/server maintainers about providing downloadable/static pregenerated [on build/deploy] schema file — xadm
– xadm, Commented Apr 13, 2021 at 15:35

Eugene Zalivadnyi · Accepted Answer · 2021-04-13 14:55:14Z

0

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?

answered Apr 13, 2021 at 14:55

Eugene Zalivadnyi

4777 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eugene Zalivadnyi Over a year ago

Or you can just commit generated.tsx

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related