已用QueryClientProvider包裹组件仍触发React Query DevTools错误

你遇到的问题是添加ReactQueryDevtools后触发了No QueryClient set, use QueryClientProvider to set one错误，尽管已经用QueryClientProvider包裹了整个应用路由。以下是几种针对性的解决方法：

1. 确保React Query与Devtools版本完全匹配 #

如果使用的是TanStack Query v4及以上版本，必须安装对应版本的Devtools依赖：

• 正确的Devtools包是@tanstack/react-query-devtools，而非旧版的react-query/devtools
• 检查package.json，保证@tanstack/react-query和@tanstack/react-query-devtools的版本号一致，避免版本不兼容导致的上下文识别问题。

2. 显式为Devtools传入QueryClient实例 #

虽然QueryClientProvider已经提供了上下文，但可以尝试直接将创建好的queryClient传递给Devtools，强制绑定上下文：

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <AuthProvider>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
        {/* 显式传入client */}
        <ReactQueryDevtools client={queryClient} />
      </QueryClientProvider>
    </AuthProvider>
  </React.StrictMode>
);

3. 延迟加载ReactQueryDevtools #

避免Devtools在应用初始渲染时就尝试获取QueryClient，通过懒加载方式延迟初始化：

import { lazy, Suspense } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RouterProvider } from 'react-router-dom';

const queryClient = new QueryClient();
// 懒加载Devtools
const ReactQueryDevtools = lazy(() => 
  import('@tanstack/react-query-devtools').then(mod => ({ default: mod.ReactQueryDevtools }))
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <AuthProvider>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
        <Suspense fallback={null}>
          <ReactQueryDevtools />
        </Suspense>
      </QueryClientProvider>
    </AuthProvider>
  </React.StrictMode>
);

4. 排查是否存在多个QueryClient实例 #

检查代码中是否在其他位置重复创建了QueryClient对象，多个实例会导致上下文冲突，确保整个应用只使用你在Main.jsx中创建的这一个实例。

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