React-Query 4.0.0配置异常：Missing queryFn错误排查求助

1. API参数格式不匹配（核心问题） #

React Query 4.x彻底废弃了v3版本的useQuery(queryKey, queryFn)顺序参数写法，强制要求使用对象式参数传递配置。你的代码沿用v3写法，导致框架无法识别queryFn，触发「Missing queryFn」错误。

修正后的Todos组件代码：

function Todos() {
  const query = useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const res = await fetch('http://localhost:5555/todos');
      return res.json();
    }
  });

  console.log('query results: ', query);
  return (
    <ul className='todos'>
      {query.data?.map(todo => (
        <li key={todo.name}>{todo.name}</li>
      ))}
    </ul>
  );
}

2. 包名与版本不匹配（类型错误根源） #

你遇到的类型声明缺失问题，本质是安装了错误的包：React Query 4.x已将包名从react-query更改为@tanstack/react-query，若你安装的是旧包react-query，实际拿到的是v3版本，和你以为的v4完全不兼容。

修复步骤： #

• 卸载旧包：

  npm uninstall react-query
  

• 安装正确的v4包：

  npm install @tanstack/react-query
  

• 更新导入语句：

  import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
  

• 无需手动创建.d.ts文件，@tanstack/react-query自带完整TypeScript类型定义。

3. 额外验证项 #

• 查看package.json，确认@tanstack/react-query版本为4.x
• 确认QueryClientProvider正确包裹所有使用useQuery的组件（你的代码这部分配置正确）
• 可选安装@tanstack/react-query-devtools，通过调试工具直观查看查询状态，快速定位问题

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