GraphQL code generator - typescript-graphql-request generates sdk with invalid import

Question

I'm trying to use typescript-graphql-request to generate an sdk. The generated file contains this import at the top

import * as Dom from 'graphql-request/dist/types.dom';

You can see an example if you go here and select "graphql-request typed SDK" in the select

This throws an error when I try to build my application

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

I have added graphql-request, but there is no /dist. vscode is giving me following suggestions:

So my question is why does it try to import from /dist/types.dom? Why isn't it importing from 'graphql-request'. Am I supposed to build the graphql-request in node_modules first somehow?

Answer 1

Found this issue on gh

Seems to be a problem with graphql-request 5.2.0, pinning it to 5.1.0 fixes the problem

Answer 2

The problem is that with graphql-request 5.2.0 you have to import from */src/types.dom and no more from */dist/types.dom.

Add this line to your codegen.ts file to edit the file after each generation :

hooks: {
        afterOneFileWrite: [
          'sed -i -e"s|graphql-request/dist/types\.dom|graphql-request/src/types.dom|g"'
        ]
      }

Answer 3

The answers above worked locally but I kept getting an error on netlify builds.

So I added the add plugin, to add a // @ts-nocheck comment to the generated file.

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

const config: CodegenConfig = {
  overwrite: true,
  schema: 'github-schema-loader.js',
  documents: ['./src/**/*.query.ts', './src/**/*.mutation.ts'],
  generates: {
    'src/lib/github.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-react-query',
        {
          add: {
            content: '// @ts-nocheck',
          },
        },
      ],
      config: {
        fetcher: 'graphql-request',
      },
    },
  },
};
export default config;