TypeScript 5: Cannot find module 'graphql-request/dist/types.dom' or its corresponding type declarations.

[nbouvrette]

Which packages are impacted by your issue?

@graphql-codegen/typescript-operations, @graphql-codegen/typescript

Describe the bug

This is related to https://github.com/dotansimha/graphql-code-generator-community/issues/501 but the issue is different after updating to TypeScript 5.x

I used these packages versions from my package.json (also impacts version 4)

    "@graphql-codegen/cli": "3.3.1",
    "@graphql-codegen/introspection": "3.0.1",
    "@graphql-codegen/near-operation-file-preset": "2.5.0",
    "@graphql-codegen/typescript": "3.0.4",
    "@graphql-codegen/typescript-operations": "3.0.4",
    "@graphql-codegen/typescript-react-query": "4.1.0",

Also unlike the fix for issue dotansimha/graphql-code-generator-community#501, I do not use @graphql-codegen/typescript-graphql-request instead I installed graphql-request directly because we use it in our code. This is how the package looks like with npm ls graphql-request:

├─┬ @graphql-codegen/cli@3.3.1
│ └─┬ @graphql-tools/prisma-loader@7.2.54
│   └── graphql-request@5.2.0
└── graphql-request@6.0.0

This is a sample of our codegen config, which uses a graphql-request fetcher:

'./src/graphql': {
      preset: 'near-operation-file',
      presetConfig: {
        baseTypesPath: 'graphql-types.generated.ts',
        extension: '.generated.ts',
      },
      plugins: ['typescript-operations', 'typescript-react-query'],
      config: {
        namingConvention: {
          enumValues: 'change-case-all#constantCase',
        },
        exposeFetcher: true,
        useTypeImports: false,
        skipTypeName: true,
        avoidOptionals: true,
        maybeValue: 'T | undefined',
        exposeQueryKeys: true,
        fetcher: 'graphql-request',
        pureMagicComment: true,
        skipTypename: true,
        withHooks: true,
        withHOC: false,
        withComponent: false,
      },
    },

When we run codegen, the generated files include the following problematic line:

Before TypeScript 5.x, the fix was to replace:

import { RequestInit } from 'graphql-request/dist/types.dom'; by import { RequestInit } from 'graphql-request/src/types.dom'; (this is being discuss in dotansimha/graphql-code-generator-community#501)

As soon as TypeScript is updated to 5.x then it is bundled with a RequestInit in node_modules/typescript/lib/lib.dom.d.ts so the line becomes obsolete.

The expected result would be that the generated file do not contain that line.

In fact, I am applying the current fix today to be able to build my application:

1) I added hooks in the codegen config

  hooks: {
    // Codegen does not always regenerate new files unless files do not exist.
    afterStart: ["find ./src/graphql -name '*.generated.*' -delete"],
    // This will remove all the `RequestInit` lines.
    afterOneFileWrite: ['ts-node ./src/graphql/codegen-fix.ts'],
  },

2) The script removing the line:

import * as fs from 'node:fs'

const generatedFilePath = process.argv[2]
const generatedFileContent = fs.readFileSync(generatedFilePath).toString()
fs.writeFileSync(
  generatedFilePath,
  generatedFileContent.replaceAll(/import { requestinit } from.+\r?\n/gi, '')
)

Platform

• OS: macOS
• NodeJS: 18.10
• graphql-request version: 6
• @graphql-codegen/* version(s): 3.3.1

[nbouvrette]

I just upgraded to version 4.0.0 and it looks like this issue is still occurring.

[maxpain]

Any updates?

[LoomiDigital]

Any updates on this? I've had to add the following hack to my config file: "typescript-react-query", { add: { content: "// @ts-nocheck", }, },

Which is far from ideal

[aleczratiu]

Any updates here?

[evanrs]

If you are using typescript-graphql-request and not @graphql-codegen/typescript-graphql-request then it's only compatible with graphql-request up to 4.

[jamespsterling]

diff --git a/node_modules/@graphql-codegen/typescript-react-query/cjs/fetcher-graphql-request.js b/node_modules/@graphql-codegen/typescript-react-query/cjs/fetcher-graphql-request.js
index 6476390..6bde16a 100644
--- a/node_modules/@graphql-codegen/typescript-react-query/cjs/fetcher-graphql-request.js
+++ b/node_modules/@graphql-codegen/typescript-react-query/cjs/fetcher-graphql-request.js
@@ -62,7 +62,6 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
         this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
-        this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
         const { generateBaseQueryHook, variables, options } = this.generateQueryHelper(config, isSuspense);
         const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         return this.clientPath
@@ -114,7 +113,6 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
-        this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
         return this.clientPath
             ? `\nuse${operationName}.fetcher = (${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers);`
             : `\nuse${operationName}.fetcher = (client: GraphQLClient, ${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers);`;