typescript-react-apollo used together with typescript-graphql-request generate conflicting imports

[wujekbogdan]

Here's my config:

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

const cfg: CodegenConfig = {
  schema: `my.schema.graphql`,
  documents: ["components/**/*.graphql"],
  generates: {
    "types/graphql/generated/index.ts": {
      plugins: ["typescript", "typescript-operations", "typescript-react-apollo", "typescript-graphql-request"],
    },
  },
};

export default cfg;

And here's the import section of the generated file:

import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
import { GraphQLClient } from 'graphql-request';
import { GraphQLClientRequestHeaders } from 'graphql-request/build/cjs/types';
import gql from 'graphql-tag';
// ...

the gql module is imported twice, once by the typescript-react-apollo and once by the typescript-graphql-request plugin. which leads to TS2300: Duplicate identifier 'gql'. compilation error.

Is there any way to fix it?

Here are some solutions I found, but they're not super-elegant:

Workaround 1

Generate 2 files to avoid conflicts:

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

const cfg: CodegenConfig = {
  schema: `my.schema.graphql`,
  documents: ["components/**/*.graphql"],
  generates: {
    "types/graphql/generated/apollo.ts": {
      plugins: ["typescript", "typescript-operations", "typescript-react-apollo"],
    },
    "types/graphql/generated/request.ts": {
      plugins: ["typescript", "typescript-operations", "typescript-graphql-request"],
    },
  },
};
export default cfg;

Workaround 2

Remove the conflicting line from the output code:

// post-codegen.js
const fs  = require('node:fs');
const path  = require('node:path');

try {
  const generatedCodePath = path.join(__dirname, 'types/graphql/generated/index.ts');
  const data = fs.readFileSync(generatedCodePath, 'utf8');
  const lines = data.split('\n');
  const lineToRemove = "import gql from 'graphql-tag';";
  const linesToKeep = lines.filter(line => line !== lineToRemove);
  const updatedCode = linesToKeep.join('\n');

  fs.writeFileSync(generatedCodePath, updatedCode, 'utf8');
} catch (err) {
  console.error(err);
}

// package.json
{
  "scripts": {
    "codegen": "graphql-codegen && node post-codegen.js"
  }
}