react-query + customFetcher generates invalid TypeScript (`TS6133: 'RequestInit' is declared but its value is never read.`)

Describe the bug import { RequestInit } from 'graphql-request/dist/types.dom'; is added to generated output even when using a custom fetcher. This is never used, so I’m getting the following error from tsc:

TS6133: 'RequestInit' is declared but its value is never read.

To Reproduce

Check the first line of the generated file: https://codesandbox.io/s/romantic-mirzakhani-57us1?file=/types.ts:0-62

Steps to reproduce the behavior:

1. use typescript-react-query

2. use custom fetcher, like `func: ‘…/fetcher#useFetchData’

3. generate code

4. try to build app

5. My GraphQL schema:

no schema, this is a compile-time error

1. My GraphQL operations:

no operations, this is a compile-time error

1. My codegen.yml config file:

schema:
  - ${REACT_APP_GRAPHQL_ENDPOINT}
documents:
  - './src/**/*.graphql'
overwrite: true
generates:
  src/gql/generated/index.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      fetcher:
        func: '../fetcher#useFetchData'
        isReactHook: true
        exposeQueryKeys: true

Expected behavior

Environment:

• OS: macOS 12.2 on Apple Silicon
  • @graphql-codegen/cli: 2.4.0
  • @graphql-codegen/introspection: 2.1.1
  • @graphql-codegen/typescript: 2.4.2
  • @graphql-codegen/typescript-operations: 2.2.3
  • @graphql-codegen/typescript-react-query: 3.5.0
• NodeJS: 14.18.3
• Typescript: 4.5.5

Additional context

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "downlevelIteration": true
  },
  "include": ["src", "types"]
}

[charlypoly]

FWIW, I don’t believe this currently works. mutation hooks are generated by only passing one param to the custom fetcher in v3.6.2. My code example from my generate file below:

Hi @makinde,

You are right, the headers argument is only preset if graphql-request is selected as fetcher option. Each fetcher configuration leads to different hooks signature, which is not ideal. This comes from fixing specific use cases over time, with not standarization.

For this reason, we now recommend to avoid using the generated hooks approach in favor if the new preset: 'client', as showcased here: https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue#installation

[makinde]

Is there any option to pass custom headers in the generated hook?

@dominikx96 if you have a custom fetcher, it would be possible yes

➡️ https://www.graphql-code-generator.com/plugins/typescript-react-query#using-custom-fetcher

FWIW, I don’t believe this currently works. mutation hooks are generated by only passing one param to the custom fetcher in v3.6.2. My code example from my generate file below:

export const useCreateConnectedUser = <
      TError = unknown,
      TContext = unknown
    >(options?: UseMutationOptions<CreateConnectedUser, TError, CreateConnectedUserVariables, TContext>) =>
    useMutation<CreateConnectedUser, TError, CreateConnectedUserVariables, TContext>(
      ['CreateConnectedUser'],
      useFetchData<CreateConnectedUser, CreateConnectedUserVariables>(CreateConnectedUserDocument),
      options
    );