使用@graphql-codegen创建的查询为何始终为unknown类型？

核心原因 #

IndexPageQuery类型为unknown，本质是GraphQL Code Generator（以下简称codegen）无法正确解析你的查询内容，导致无法生成对应的强类型定义。具体可能有以下几个问题：

1. 片段未正确导入或未被codegen处理 #

你使用的UserInputFragment如果不是从codegen生成的../__generated__/gql文件中导入，而是自行定义的独立片段，codegen的静态分析无法识别这个片段的结构，自然没法为你的查询生成正确的类型，最终graphql()函数只能返回unknown类型。

2. 动态插入片段导致静态分析失效 #

用模板字符串${UserInputFragment}插入片段的写法，会让codegen的graphql标记函数无法在编译时静态解析完整的查询内容。codegen依赖静态分析GraphQL语法来生成类型，动态拼接的内容会绕过这个流程，导致类型生成失败。

3. Codegen配置缺失片段支持 #

如果你的codegen配置文件（比如codegen.ts）没有正确包含片段所在的文件路径，codegen不会为这个片段生成对应的类型定义，导致查询引用片段时无法被正确识别。

解决步骤 #

• 确保片段从生成文件导入：
  先确认UserInputFragment已经被codegen生成到../__generated__/gql中，然后从该文件导入：

  import { graphql, UserInputFragment } from '../__generated__/gql';
  

• 避免动态拼接片段：
  直接在graphql标记的字符串内定义或引用片段（如果片段已生成，codegen会自动识别）：

  const IndexPageQuery = graphql(`
    query IndexPageQuery {
      user {
        ...UserInputFragment
      }
    }
    # 如果片段未在生成文件中，可直接在这里定义
    fragment UserInputFragment on User {
      id
      name
      email
    }
  `);
  

• 检查codegen配置：
  确保你的codegen配置中包含了所有GraphQL文件（包括片段文件）的路径，比如：

  // codegen.ts
  import type { CodegenConfig } from '@graphql-codegen/cli';
  
  const config: CodegenConfig = {
    schema: './schema.graphql',
    documents: ['./src/**/*.graphql', './src/**/*.tsx'], // 包含所有查询、片段文件
    generates: {
      './src/__generated__/gql.ts': {
        plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
      },
    },
  };
  
  export default config;
  

• 重新生成类型：
  修改配置或代码后，重新运行codegen命令（通常是npm run codegen），确保所有类型和片段都被正确生成。

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