在使用 @tanstack/react-query 中的 QueryClientProvider 时，我的 Next.js 项目遇到错误。删除它可以解决问题，但我需要它来管理查询。layout.tsx 的代码是
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { GoogleOAuthProvider } from '@react-oauth/google';
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
import { Toaster } from 'react-hot-toast';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
export const metadata: Metadata = {
title: "X",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<QueryClientProvider client={queryClient}>
<GoogleOAuthProvider clientId="">
<body className={inter.className}>{children}</body>
<Toaster/>
<ReactQueryDevtools />
</GoogleOAuthProvider>
</QueryClientProvider>
</html>
);
}
这是一个序列化错误。您可以通过将
QueryClientProvider"use client";
import { useState } from "react";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
export function Providers({ children }) {
const [queryClient] = useState(new QueryClient())
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
)
}
然后在布局中渲染这个客户端组件：
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<Providers>
<GoogleOAuthProvider clientId="">
<body className={inter.className}>{children}</body>
<Toaster/>
<ReactQueryDevtools />
</GoogleOAuthProvider>
</Providers>
</html>
);
}