"typescript-graphql-request" returns import error

[florisdegraaff]

Which packages are impacted by your issue?

No response

Describe the bug

When using the typescript-graphql-request plugin I get an import error. Running the code does work, but building the code gives an error. The error will be on the second line, being: import { GraphQLClientRequestHeaders } from 'graphql-request/build/cjs/types';

Your Example Website or App

https://github.com/florisdegraaff/portfolio

Steps to Reproduce the Bug or Issue

1. Install latest versions of:

• @graphql-codegen/cli
• @graphql-codegen/fragment-matcher
• @graphql-codegen/typescript
• @graphql-codegen/typescript-graphql-request
• @graphql-codegen/typescript-operations

2. Setup codegen.ts with:

  generates: {
    'src/generated.ts': {
      plugins: [
        {
          add: {
            content: '/* eslint-disable */'
          }
        },
        'typescript',
        'typescript-operations',
        'typescript-graphql-request',
        'fragment-matcher'
      ],
    }
  }

3. Add .graphql files that follow the pattern in de documents setting of your codegen.ts
4. Run graphql-codegen --config codegen.ts

Expected behavior

The import of the GraphQLClientRequestHeaders in the generated file should not return an error

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: v20.5.0
• graphql version: 16.8.1
• @graphql-codegen/* version(s): "@graphql-codegen/add": "^5.0.0", "@graphql-codegen/cli": "^5.0.0", "@graphql-codegen/fragment-matcher": "^5.0.0", "@graphql-codegen/typescript": "^4.0.1", "@graphql-codegen/typescript-graphql-request": "^6.0.0", "@graphql-codegen/typescript-operations": "^4.0.1",

Codegen Config File

schema: [{
    'https://gapi.storyblok.com/v1/api': {
      headers: {
        Token: process.env.TOKEN,
      }
    },
  }],
  documents: 'src/storyblok/graphql',
  generates: {
    'src/storyblok/generated.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-graphql-request',
        'fragment-matcher'
      ],
    }
  }

Additional context

No response

[e965]

Same problem.

[eth3lbert]

Related to https://github.com/jasonkuhrt/graphql-request/issues/566

[QuestionAndAnswer]

Same problem when importing with esm modules. Seems like because GraphQLClientRequestHeaders isn't exposed in graphql-request.

[QuestionAndAnswer]

Fixed with this:

hooks: {
        afterOneFileWrite: [
          `sed -i '' -e '1s;^.*;import type { GraphQLClient, RequestOptions } from \"graphql-request\"\\;;' myFile.ts`,
          `sed -i '' -e '2s;^.*;export type GraphQLClientRequestHeaders = RequestOptions[\"requestHeaders\"]\\;;' myFile.ts`,
        ],
},

Extracted the needed type indirectly from RequestOptions