如何让graphql-codegen正确识别带模板字符串的GraphQL查询？

问题原因 #

GraphQL Codegen通过静态分析提取代码中的GraphQL文档，它不会执行TypeScript代码来解析模板字符串里的变量值。所以你的代码中query ${someVar}会被识别为query { ... }（变量位置为空），判定为匿名查询后直接跳过。

解决方案 #

1. 直接硬编码查询名称

这是最可靠的方式，把查询名称直接写在模板字符串里，避免使用变量：

export const SOME_QUERY = gql`
  query getUser {
    user {
        name
    }
  }
`

2. 通过Codegen配置手动注入查询名称

如果必须用变量管理查询名称，可以在codegen配置中添加自定义文档转换逻辑，手动为匿名查询设置名称：

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  // 你的其他配置（schema、documents路径等）
  generates: {
    './src/gql/': {
      preset: 'client',
      presetConfig: {
        documentTransforms: [
          (document) => {
            document.definitions.forEach(def => {
              // 定位到匿名的查询操作
              if (def.kind === 'OperationDefinition' && def.operation === 'query' && !def.name) {
                // 替换成你需要的查询名称，这里对应原代码中的someVar值
                def.name = { kind: 'Name', value: 'getUser' };
              }
            });
            return document;
          }
        ]
      }
    }
  }
};

export default config;

3. 尝试优化graphql-tag-pluck的静态分析（有限支持）

Codegen底层依赖graphql-tag-pluck提取GraphQL文档，如果你的变量是同一文件内的静态常量，可以尝试更新graphql-tag-pluck到最新版本，部分场景下它能识别同一文件内的const变量。但如果变量是导入的或运行时生成的，这个方法无效。

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