graphql-code-generator-community
graphql-code-generator-community copied to clipboard
`react-query` imports a custom fetcher as a type with `useTypeImports` enabled
Which packages are impacted by your issue?
@graphql-codegen/typescript-react-query
Describe the bug
When I specify fetcher option with a custom path to my function and useTypeImports with a value of true in the generation settings, the generated files import my function with the type import modifier, which causes TypeScript to fail and the application to build.
Your Example Website or App
https://stackblitz.com/edit/github-djwd6w?file=codegen.ts
Steps to Reproduce the Bug or Issue
- Go to reproduce
- Run
npm run generate - Go to
types.tsfile - See on import of
import type { fetcher } from './custom-fetcher'
Expected behavior
As a user I am expected that import path will be import { fetcher } from './custom-fetcher' with option useTypeImports: true, because fetcher is a function, but not type or interface.
Screenshots or Videos
No response
Platform
- OS: macOS
- NodeJS: 18.19.0
graphqlversion: 16.9.0@graphql-codegen/typescript-react-queryversion: 6.1.0
Codegen Config File
import { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
schema: 'schema.graphql',
documents: 'document.graphql',
generates: {
'types.ts': {
plugins: [
'typescript',
'typescript-operations',
'@graphql-codegen/typescript-react-query',
],
config: {
reactQueryVersion: 5,
fetcher: './custom-fetcher#fetcher',
useTypeImports: true,
},
},
},
};
export default config;
Additional context
No response
I experienced the same issue. The option useTypeImports is buggy
I am having the same issue my customFetcher converted to type also
import { useMutation, useQuery, type UseMutationOptions, type UseQueryOptions } from '@tanstack/react-query';
import type { useAitoolsFetcher } from '~/lib/connections';
@dohomi were you able to solve the issu ?
No unfortunately I did not use the option.