graphql-code-generator: 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:
-
use
typescript-react-query -
use custom fetcher, like `func: ‘…/fetcher#useFetchData’
-
generate code
-
try to build app
-
My GraphQL schema:
no schema, this is a compile-time error
- My GraphQL operations:
no operations, this is a compile-time error
- My
codegen.ymlconfig 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.2on 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"]
}
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 2
- Comments: 19 (7 by maintainers)
Hi @makinde,
You are right, the
headersargument is only preset ifgraphql-requestis selected asfetcheroption. Eachfetcherconfiguration 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#installationFWIW, 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:
Ah, I didn’t spot that, thanks! I’ll test it right away so I can confirm if it’s fixed. 👍
@ristomatti I see! I’ll do a PR ASAP.