使用graphql-codegen生成类型时出现“查询参数未知”错误

检查graphql-codegen配置 #

• 确保@graphql-codegen/typescript-react-apollo插件已安装并正确配置在codegen.ts中，这个插件专门负责生成适配Apollo Client的带类型gql函数。
• 确认配置里的documents字段覆盖了你编写查询的所有文件路径（比如src/**/*.tsx或src/**/*.graphql），仅指定Schema路径无法生成查询对应的类型绑定。

替换默认gql导入 #

• 不要直接从@apollo/client导入gql，改用graphql-codegen生成的带类型gql函数，通常输出路径为src/gql（根据你的配置调整）。示例：

  // 错误写法
  import { gql } from '@apollo/client';
  
  // 正确写法
  import { gql } from '../gql';
  

验证生成文件完整性 #

• 打开生成的gql/index.ts（或对应输出文件），确认存在gql函数的类型定义，且包含你编写的查询对应的类型映射。
• 如果没有查询相关类型，检查codegen.ts的documents配置是否覆盖了查询文件，重新运行graphql-codegen命令。

刷新VSCode类型服务 #

• 打开VSCode命令面板（Ctrl+Shift+P），执行TypeScript: Restart TS Server，强制刷新类型缓存，避免旧缓存导致类型不更新。
• 确保tsconfig.json的include数组包含生成的类型文件路径，比如添加"src/gql/**/*"。

规范查询写法 #

• 确保查询字符串符合完整GraphQL语法，无语法错误——graphql-codegen会忽略有错误的查询，导致无法生成对应类型。
• 确认查询字段、类型与后端Schema完全匹配，避免使用未定义的字段。

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