React TanStack Query报错：期望1-2个参数，实际传入3个

在使用GraphQL Codegen结合@tanstack/react-query时触发TypeScript错误TS2554，提示“Expected 1-2 arguments, but got 3”，错误定位在生成代码中调用useQuery的第三个参数options处。

相关配置与代码如下：

1. graphql codegen.yml配置 #

# 1. Schema (graphql schema location)
schema: "src/graphql/schema.graphql"
documents: "src/graphql/*.graphql"
generates: 
  src/graphql/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
      - fragment-matcher
    config:
      dedupeFragments: true
      fetcher:
        # Function to run
        func: "./auth-fetcher#fetchData"
        isReactHook: false

2. auth-fetcher中的fetchData实现 #

export const fetchData = <TData, TVariables>(
  query: string,
  variables?: TVariables,
  options?: RequestInit['headers']
): (() => Promise<TData>) => {
  return async () => {
    const res = await fetch('https://api.url', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...options
      },
      body: JSON.stringify({
        query,
        variables
      })
    })
    const json = await res.json()
    if (json.errors) {
      const { message } = json.errors[0] || {}
      throw new Error(message || 'Error…')
    }
    return json.data
  }
}

3. 生成的generated.ts报错代码片段 #

export const useExplorePublicationsQuery = <
      TData = ExplorePublicationsQuery,
      TError = unknown
    >(
      variables: ExplorePublicationsQueryVariables,
      options?: UseQueryOptions<ExplorePublicationsQuery, TError, TData>
    ) => {
    return useQuery<ExplorePublicationsQuery, TError, TData>(
      ['ExplorePublications', variables],
      fetchData<ExplorePublicationsQuery, ExplorePublicationsQueryVariables>(ExplorePublicationsDocument, variables),
      options
    )};

已尝试重新运行yarn codegen，并确认模块导入正确：

import { useQuery, UseQueryOptions } from '@tanstack/react-query';
import { fetchData } from './auth-fetcher';

核心原因 #

错误源于TanStack React Query v4+的API参数结构变更：v4版本不再支持useQuery(queryKey, queryFn, options)这种三个独立参数的调用方式，要求所有参数合并为一个配置对象。而你的typescript-react-query插件版本可能未适配v4，生成了旧版风格的代码。

解决步骤 #

1. 确认React Query版本
   检查当前安装的@tanstack/react-query版本是否为v4及以上：

   yarn list @tanstack/react-query
   # 或npm
   npm list @tanstack/react-query
   

2. 升级GraphQL Codegen插件
   确保@graphql-codegen/typescript-react-query插件版本为^4.0.0及以上（该版本开始支持TanStack React Query v4），执行升级：

   yarn add @graphql-codegen/typescript-react-query@latest
   # 或npm
   npm install @graphql-codegen/typescript-react-query@latest
   

3. 重新生成代码
   再次运行codegen命令，插件会生成适配v4的useQuery调用代码，格式如下：

   yarn codegen
   

   生成后的正确代码示例：

   return useQuery<ExplorePublicationsQuery, TError, TData>({
     queryKey: ['ExplorePublications', variables],
     queryFn: fetchData<ExplorePublicationsQuery, ExplorePublicationsQueryVariables>(ExplorePublicationsDocument, variables),
     ...options
   })
   

4. 备选降级方案（不推荐）
   若需保留React Query v3，需将包名从@tanstack/react-query改为react-query并降级到v3版本，同时将typescript-react-query插件降级到^3.0.0版本。

内容的提问来源于stack exchange，提问作者0xHyroglyph