已配置QueryClient与QueryClientProvider仍触发No QueryClient set报错

核心问题：依赖版本冲突 #

你的项目同时安装了**@tanstack/react-query v4和旧版的react-query v3**——v4版本起React Query官方包名正式改为@tanstack/react-query，旧版react-query与新版属于同一库的不同迭代分支，同时存在会导致React Query的上下文（QueryClient）被两个版本的库干扰，引发上下文丢失、报错及页面显示不稳定的问题。

解决步骤 #

1. 移除旧版依赖
   在项目根目录执行命令删除旧版react-query：

   npm uninstall react-query
   # 若使用yarn则执行：
   yarn remove react-query
   

2. 统一导入来源
   检查所有使用React Query钩子（如useQuery、useMutation）的组件，确保导入语句全部来自@tanstack/react-query，而非旧版的react-query：

   // 正确写法
   import { useQuery } from '@tanstack/react-query';
   // 错误写法，需替换或删除
   import { useQuery } from 'react-query';
   

3. 清理缓存并重新安装依赖
   删除node_modules文件夹和锁文件（package-lock.json或yarn.lock），重新安装依赖以避免缓存残留：

   # npm环境
   rm -rf node_modules package-lock.json
   npm install
   
   # yarn环境
   rm -rf node_modules yarn.lock
   yarn install
   

4. 优化QueryClient初始化（可选）
   你的getClient单例模式逻辑正确，可将QueryClient的初始化移到组件外部，避免组件每次渲染重复执行初始化判断：

   // App.jsx
   import { getClient } from "./queryClient";
   // 提前初始化单例实例
   const queryClient = getClient();
   
   const App = () => {
       const elem = useRoutes(routes);
       return (
           <QueryClientProvider client={queryClient}>
               {elem}
               <ReactQueryDevtools initialIsOpen={false} />
           </QueryClientProvider>
       );
   };
   

内容的提问来源于stack exchange，提问作者박경덕