GraphQL Codegen生成代码时CategoriesDocument重复定义报错

问题根源 #

你的codegen.ts里同时启用了typescript-urql和urql-introspection插件，这俩插件都会生成CategoriesDocument变量，直接导致命名冲突。另外也得排查下是否有多个.graphql文件定义了同名的Categories查询。

解决步骤 #

1. 移除冲突插件
   修改codegen.ts的插件列表，删掉urql-introspection——typescript-urql已经能生成URQL需要的查询钩子和Document定义，这个额外的introspection插件完全是多余的：

   import type { CodegenConfig } from '@graphql-codegen/cli';
   
   const config: CodegenConfig = {
     overwrite: true,
     schema: 'http://localhost:3333/graphql',
     documents: 'libs/graphql/**/*.graphql',
     ignoreNoDocuments: true, // 优化监听体验
     generates: {
       'libs/graphql/generated/': {
         preset: 'client',
         plugins: [
           'typescript',
           'typescript-operations',
           'typescript-urql'
         ],
       
       },
     },
   };
   
   export default config;
   

2. 清理旧生成文件并重新生成
   先删掉libs/graphql/generated/目录下的所有文件，再重新执行代码生成命令：

   graphql-codegen
   

3. 排查重复查询定义
   检查libs/graphql/**/*.graphql路径下是否存在多个文件都定义了Categories查询，如果有，给其中一个查询重命名（比如改成GetCategories）就能避免重复生成。

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