当 Apollo Server 处于生产模式时，如何在 graphql-codegen 的帮助下为 React 生成 Graphql 类型？

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

Answer 1

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?