我正在使用 Next.js/Hasura on Heroku/Apollo 进行个人开发。最近尝试使用 graphql-codegen 生成 GraphQL 的类型定义时遇到了困难，因此我将其记录下来作为备忘。

环境

Hasura 版本号为 v1.3.3。

下一个版本是10.0.6，
GraphQL版本为15.5.0，
@graphql-codegen/cli版本为1.21.3，
@graphql-codegen/typescript版本为1.21.1，
@graphql-codegen/typescript-operations版本为1.17.15，
@graphql-codegen/typescript-react-apollo版本为2.2.3。

错误内容

生成上述模块后，我创建了以下的yml文件，并运行了yarn graphql-codegen –config src codegen.yml进行操作。

overwrite: true
schema: 
  - "[★hasuraエンドポイントURL]":
    headers:
      "x-hasura-admin-secret": ${process.env.HASURA_GRAPHQL_ADMIN_SECRET}
documents: 
  - "src/{components,pages,apollo}/**/*.{ts,tsx}"
generates:
  src/apollo/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      skipTipename: false
      withHooks: true
      withHOC: false
      withComponent: false
      preResolveTypes: false
      reactApolloVersion: 3
      namingConvention: 
        typeNames: "pascal-case#pascalCase"
        enumValues: "upper-case#upperCase"
      apolloReactCommonImportFrom: "@apollo/client"
      apolloReactHooksImportFrom: "@apollo/client"

然后出现以下错误… de …)

  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/apollo/graphql.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Cannot read property 'name' of undefined
    ✔ Generate src/apollo/graphql.schema.json


 Found 1 error

  ✖ src/apollo/graphql.tsx
    TypeError: Cannot read property 'name' of undefined
        at /Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/type/introspection.js:613:17
        at Array.some (<anonymous>)
        at Object.isIntrospectionType (/Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/type/introspection.js:611:29)
        at Object.Field (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:354:25)
        at Object.enter (/Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/utilities/TypeInfo.js:370:25)
        at Object.visit (/Users/s-kawabe/Desktop/Kiraku/node_modules/graphql/language/visitor.js:243:26)
        at documents.forEach.doc (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:359:38)
        at Array.forEach (<anonymous>)
        at includeIntrospectionDefinitions (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:359:15)
        at Object.plugin (/Users/s-kawabe/Desktop/Kiraku/node_modules/@graphql-codegen/typescript/index.cjs.js:341:38)

可能没有人遇到相同的情况，原因也不明确…
我也怀疑是环境变量的问题，尝试直接输入Hasura的秘钥，但还是遇到相同的错误。

解决方案（开发策略）

通过使用JS代码将上述内容重写并加载到这里，成功生成了类型定义文件！

// eslint-disable-next-line @typescript-eslint/no-var-requires
const dotenv = require('dotenv')

dotenv.config()

module.exports = {
  schema: [
    {
      '[★hasuraエンドポイントURL]': {
        headers: { 'x-hasura-admin-secret': process.env.HASURA_GRAPHQL_ADMIN_SECRET },
      },
    },
  ],
  documents: ['src/{components,pages,apollo}/**/*.{ts,tsx}'],
  overwrite: true,
  generates: {
    'src/apollo/graphql.tsx': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
      config: {
        skipTypename: false,
        withHooks: true,
        withHOC: false,
        withComponent: false,
        preResolveTypes: false,
        scalars: {
          uuid: 'string',
          timestamptz: 'string',
          bigint: 'number',
          _text: 'string[]',
        },
        namingConvention: {
          typeNames: 'pascal-case#pascalCase',
          enumValues: 'upper-case#upperCase',
        },
        apolloReactCommonImportFrom: '@apollo/client',
        apolloReactHooksImportFrom: '@apollo/client',
      },
    },
  },
}

最后

[参考文章]
https://qiita.com/mizchi/items/fb9f598cea94d2c8072d
https://qiita.com/ryo2132/items/601ec3c085fcd99658e5

[Paraphrased Version]
https://qiita.com/mizchi/items/fb9f598cea94d2c8072d
https://qiita.com/ryo2132/items/601ec3c085fcd99658e5

我参考的文章使用了YAML进行编写，但是在这次的技术堆栈中可能存在兼容性问题吗？