GraphQL Codegen编程式调用：生成带类型Hook时类型缺失问题

核心问题出在插件执行顺序和配置结构上：typescript-react-apollo插件依赖typescript和typescript-operations生成的类型定义，必须按正确顺序加载插件，才能同时生成类型和Hook。

正确配置步骤 #

1. 固定插件顺序
   插件数组必须按以下顺序排列，保证类型先生成，再基于类型生成Hook：

   • typescript：生成基础GraphQL类型
   • typescript-operations：生成查询/突变对应的具体类型（比如MyqueryQuery、MyqueryQueryVariables）
   • typescript-react-apollo：基于前两步的类型生成React Apollo Hook

2. 编程式配置示例
   以下是完整的codegen.ts配置示例，确保所有插件正确纳入并按顺序执行：

   import type { CodegenConfig } from '@graphql-codegen/cli';
   
   const config: CodegenConfig = {
     schema: './path/to/your/schema.graphql', // 替换为你的schema路径
     documents: './path/to/your/queries/**/*.graphql', // 匹配你的查询文件
     generates: {
       './src/generated/graphql.tsx': {
         plugins: [
           'typescript',
           'typescript-operations',
           {
             'typescript-react-apollo': {
               withHooks: true, // 显式开启Hook生成
               // 其他可选配置：withComponent, withHOC等，按需关闭不需要的生成项
             }
           }
         ]
       }
     }
   };
   
   export default config;
   

3. 排查常见错误点

   • 确认documents路径正确匹配到你的查询文件，否则插件无法识别需要生成Hook的查询
   • 不要将typescript-react-apollo与前两个插件分开配置，必须放在同一个plugins数组内
   • 检查typescript-react-apollo的配置项，确保withHooks设为true（默认可能开启，但显式设置更稳妥）

按此配置执行代码生成，就能同时得到需要的类型定义和React Apollo查询Hook了。

内容的提问来源于stack exchange，提问作者dknaack