React Query useQuery传参报错：期望1-2个参数却传入3个

问题说明 #

在React Native项目中使用React Query的useQuery获取实时比分，传入查询键、fetch函数、配置对象三个参数时，触发TypeScript错误：

Expected 1-2 arguments, but got 3.ts(2554)

相关代码：

const { data, error, isLoading, refetch } = useQuery(
    ['liveScores', selectedDate.date, selectedTimeZone],
    () => fetchLiveScore(selectedDate.date, selectedTimeZone),
    {
      keepPreviousData: true,
      onSuccess: (data) => {
        setFilteredMatches(data.data);
        const initialExpandState = Object.values(data.data).reduce((acc: any, item: any) => {
          acc[item[0].league.name] = true;
          return acc;
        }, {});
        setExpandCard(initialExpandState);
      },
    }
);

原因分析 #

这个错误的核心是React Query版本的参数结构差异：

• React Query v3 支持三参数写法：useQuery(queryKey, queryFn, options)
• React Query v4+ 废弃了三参数形式，仅接受1个或2个参数：
  1. 单参数：传入包含queryKey、queryFn、所有配置项的对象
  2. 双参数：第一个是queryKey，第二个是包含queryFn和配置项的对象

解决方案 #

方案1：适配React Query v4+ 参数结构 #

将queryFn移到配置对象中，有两种写法可选：

写法一：单参数对象形式

const { data, error, isLoading, refetch } = useQuery({
  queryKey: ['liveScores', selectedDate.date, selectedTimeZone],
  queryFn: () => fetchLiveScore(selectedDate.date, selectedTimeZone),
  keepPreviousData: true,
  onSuccess: (data) => {
    setFilteredMatches(data.data);
    const initialExpandState = Object.values(data.data).reduce((acc: any, item: any) => {
      acc[item[0].league.name] = true;
      return acc;
    }, {});
    setExpandCard(initialExpandState);
  },
});

写法二：双参数拆分形式

const { data, error, isLoading, refetch } = useQuery(
  ['liveScores', selectedDate.date, selectedTimeZone],
  {
    queryFn: () => fetchLiveScore(selectedDate.date, selectedTimeZone),
    keepPreviousData: true,
    onSuccess: (data) => {
      setFilteredMatches(data.data);
      const initialExpandState = Object.values(data.data).reduce((acc: any, item: any) => {
        acc[item[0].league.name] = true;
        return acc;
      }, {});
      setExpandCard(initialExpandState);
    },
  }
);

方案2：回退到React Query v3（保留三参数写法） #

如果想要继续使用原有的三参数形式，需要确保安装的React Query版本为v3.x，同时安装对应版本的类型定义：

# 卸载当前版本
npm uninstall @tanstack/react-query
# 安装v3版本
npm install react-query@3.x
# 安装对应类型
npm install @types/react-query@3.x --save-dev

内容的提问来源于stack exchange，提问作者Sami Ali