我将 React-Query 添加到新的 NextJS 应用程序（应用程序路由器）中，它运行得很好。
但是，当我将 ReactQueryDevtools 添加到客户端包装器时，我的整个应用程序崩溃了：
错误：未设置 QueryClient，请使用 QueryClientProvider 设置一个
调用堆栈 useQueryClient ../src/QueryClientProvider.tsx (18:11) 属性 ../src/ReactQueryDevtools.tsx (50:38)
我已经看到类似的问题最终通过用 @tanstack/react-query 导入替换react-query 得到解决，在这种情况下这不是我遇到的问题，所有导入都是正确的。
这是我的实现方式：
src/app/layout.tsx
import './globals.css';
import { NextIntlClientProvider } from 'next-intl';
import { getLocale, getMessages } from 'next-intl/server';
import { Providers } from '@/app/Providers';
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const locale = await getLocale();
const messages = await getMessages();
const direction = 'ltr';
return (
<html lang={locale} dir={direction}>
<body>
<NextIntlClientProvider messages={messages}>
<Providers>{children}</Providers>
</NextIntlClientProvider>
</body>
</html>
);
}
///
src/app/Providers.tsx
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useState } from 'react';
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
{children}
<ReactQueryDevtools />
</QueryClientProvider>
);
}
P.S：我创建了 QueryClient 作为 useState 的一部分，但是我也尝试在组件外部定义它，它仍然存在同样的问题..
NextJS 版本：14.2.14，React 18.3.1。
React-query 和 React-query-devtools 版本：5.59.0
<ReactQueryDevtools initialIsOpen={false} />尝试添加此参数