React使用react-query、TypeScript时出现Invalid hook call报错

你碰到的Invalid hook call报错和你写的App组件代码无关，基本是react-query版本升级带来的依赖兼容问题，对应几个明确的触发场景：

• 如果你升级到了react-query v4及以上版本，这个库已经迁移到TanStack组织维护，旧的react-querynpm包只会停留在v3最终版，不会发布v4+的代码。要是你升级时直接执行npm i react-query@latest，装到的旧v3版本和你项目里用的React 18（从你导入react-dom/client能看出来是React18）存在兼容冲突，QueryClientProvider组件内部调用hook时就会触发这个报错。
• 依赖升级时锁文件冲突，导致项目里装了多份React副本。hook运行时找不到对应函数组件的上下文，就会抛这个错，可以直接在项目根目录跑npm ls react查看依赖树确认。
• 你当前贴的代码里没有在组件外违规调用hook的问题，不用在业务组件代码里找问题。

1. 先卸载旧包：

npm uninstall react-query

2. 安装适配React18的正式新版（原react-query v4+已更名为TanStack Query）：

npm install @tanstack/react-query

3. 修改入口文件的导入语句，把原来从旧包导入的写法替换成新包导入：

// 原写法 import { QueryClient, QueryClientProvider } from 'react-query' 替换为
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

4. 如果改完还是报错，直接删掉node_modules文件夹和对应的依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install装一遍依赖，解决多React副本的问题就行。

提示：你写的App组件代码完全符合Hook规则，不需要做任何修改。

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