graphql-codegen typescript-react-apollo插件生成重复变量问题求助

我刚启动了一个使用NextJS与graphql-codegen的typescript-react-apollo插件从API生成apollo-react类型的新项目，但生成的代码中出现重复导出变量（比如重复的UserDocument），导致TypeScript报错无法构建项目，请问如何避免codegen生成这些重复内容？

codegen.ts配置 #

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

const config: CodegenConfig = {
  overwrite: true,
  documents: ["src/**/*.tsx"],
  schema: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
  generates: {
    "./src/graphql/__generated__/": {
      preset: "client",
      plugins: ["typescript-react-apollo"],
    },
  },
};
export default config;

生成的错误代码示例 #

// ./src/graphql/__generated__/
...
// 创建了两个'UserDocument'变量
export const UserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"User"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ObjectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"image"}},{"kind":"Field","name":{"kind":"Name","value":"hashedPassword"}},{"kind":"Field","name":{"kind":"Name","value":"role"}}]}}]}}]} as unknown as DocumentNode<UserQuery, UserQueryVariables>;

export const UserDocument = gql`
    query User($userId: ObjectId) {
  user(id: $userId) {
    id
    name
    email
    image
    hashedPassword
    role
  }
}
    `;
...

解决方案 #

问题原因是client预设已经内置了生成DocumentNode变量的逻辑，而你额外添加的typescript-react-apollo插件也会生成相同的变量，两者冲突导致重复导出。可以通过以下两种方式解决：

方式一：移除typescript-react-apollo插件，使用client预设的内置配置 #

client预设支持直接配置生成react-apollo相关代码，不需要额外引入插件。修改codegen.ts如下：

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

const config: CodegenConfig = {
  overwrite: true,
  documents: ["src/**/*.tsx"],
  schema: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
  generates: {
    "./src/graphql/__generated__/": {
      preset: "client",
      presetConfig: {
        reactApolloVersion: 3, // 根据你使用的Apollo Client版本调整，3是当前主流版本
        // 可选：如果需要自定义gql导入路径，可添加gqlImport: "@apollo/client#gql"
      },
    },
  },
};
export default config;

方式二：禁用client预设的文档生成逻辑 #

如果你一定要保留typescript-react-apollo插件，可以通过presetConfig.noDocuments禁用预设的文档生成，避免重复：

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

const config: CodegenConfig = {
  overwrite: true,
  documents: ["src/**/*.tsx"],
  schema: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
  generates: {
    "./src/graphql/__generated__/": {
      preset: "client",
      presetConfig: {
        noDocuments: true, // 关闭预设生成DocumentNode变量的逻辑
      },
      plugins: ["typescript-react-apollo"],
    },
  },
};
export default config;

执行graphql-codegen重新生成代码后，重复导出的问题就会消失。

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