graphql-code-generator-community icon indicating copy to clipboard operation
graphql-code-generator-community copied to clipboard

`react-query` imports a custom fetcher as a type with `useTypeImports` enabled

Open rushelex opened this issue 1 year ago • 4 comments

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

  1. Go to reproduce
  2. Run npm run generate
  3. Go to types.ts file
  4. 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
  • graphql version: 16.9.0
  • @graphql-codegen/typescript-react-query version: 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

rushelex avatar Aug 19 '24 13:08 rushelex

I experienced the same issue. The option useTypeImports is buggy

dohomi avatar Sep 12 '24 02:09 dohomi

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';

khanakia avatar Jul 05 '25 11:07 khanakia

@dohomi were you able to solve the issu ?

khanakia avatar Jul 05 '25 11:07 khanakia

No unfortunately I did not use the option.

dohomi avatar Jul 06 '25 02:07 dohomi