GraphQL Codegen生成类型是否正确？Next.js+Strapi开发遇类型问题

以下是针对你遇到的GraphQL Codegen类型导致useQuery一直加载的问题，几个常见的排查方向和解决办法：

• 核对生成类型与实际返回结构
  把Strapi Playground返回的JSON数据，和Codegen生成的查询类型做逐字段对比。比如Strapi GraphQL默认返回的字段可能是下划线命名（如color_name），如果Codegen配置了自动转驼峰，而你在查询里用了驼峰字段，就会导致类型不匹配，Apollo无法正确解析数据，进而一直处于加载状态。确保生成的GetColorsQuery（或你的查询名称）类型的嵌套结构、字段名完全对应实际返回数据。

• 检查useQuery的类型参数用法
  确保useQuery的类型参数传的是完整的查询返回类型，而不是单个实体类型。比如你的查询是获取所有颜色，正确的用法应该是：

  import { GetColorsQuery } from '../generated/graphql';
  import { GET_COLORS } from '../queries/colors';
  
  const { data, loading } = useQuery<GetColorsQuery>(GET_COLORS);
  

  如果查询有变量，需要同时传入变量类型：

  const { data, loading } = useQuery<GetColorsQuery, GetColorsQueryVariables>(GET_COLORS, {
    variables: { /* 变量值 */ }
  });
  

  不要错误地传入单个Color类型，这会导致类型不匹配，让Apollo无法识别返回数据。

• 验证GraphQL Codegen配置
  打开你的codegen.ts配置文件，确认以下几点：

  • schema字段正确指向Strapi的GraphQL端点（如http://localhost:1337/graphql）
  • generates部分正确使用了所需插件：如果用Apollo Client，必须包含typescript、typescript-operations和typescript-react-apollo插件，示例配置：

    import type { CodegenConfig } from '@graphql-codegen/cli';
    
    const config: CodegenConfig = {
      schema: 'http://localhost:1337/graphql',
      documents: ['./src/**/*.graphql'],
      generates: {
        './src/generated/graphql.ts': {
          plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
        },
      },
    };
    
    export default config;
    

• 查看Apollo的错误信息
  在useQuery中添加错误回调，打印具体错误，这能快速定位类型不匹配的问题：

  const { data, loading, error } = useQuery<GetColorsQuery>(GET_COLORS, {
    onError: (err) => console.error('Query error:', err),
  });
  

  控制台里的错误信息通常会明确指出哪个字段类型不匹配，或者数据结构不符合预期。

• 重新生成类型文件
  删除已生成的graphql.ts文件，重新运行graphql-codegen命令（通常是npm run codegen或yarn codegen），确保生成的类型是基于最新的查询和Strapi schema的，避免旧的缓存类型导致问题。

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