我正在尝试将 tanstack React 查询实现到我正在开发的项目中来管理状态。
我正在尝试将其与（使用 nextjs 13 进行反应查询的教程一起设置，虽然我觉得我完全遵循了它，但我遇到了各种导入错误。
我收到的错误是这样的：
./node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js
Attempted import error: 'hydrate' is not exported from '@tanstack/query-core' (imported as 'hydrate').
Import trace for requested module:
./node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js
./node_modules/@tanstack/react-query/build/modern/index.js
./src/app/_components/providers/TanstackProvider.tsx
但在我的控制台中，我遇到了与 useQueries、useMutation、useMutations、useSuspenseBoundary 和许多其他问题相同的问题，很可能是所有问题。
我安装了 @tanstack/react-query 版本 5.17.7，但我也尝试降级到 4.35.3 并收到相同的错误。
在我意识到没有导入任何内容之前，我已经创建了一个 tanstack 提供程序并尝试进行第一个查询。
这是我的 tanstack 提供商：
TanstackProver.tsx
"use client";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { useState } from "react";
const TanstackProvider = ({ children }: { children: React.ReactNode }) => {
const [queryClient] = useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
export default TanstackProvider;
我在我的layout.tsx文件中使用它：
layout.tsx
import type { Metadata } from "next";
import { Rubik } from "next/font/google";
import "./globals.css";
import CommentContextProvider from "@/context/CommentContext";
import { getComments } from "@/lib/helpers/db-calls";
import prisma from "@/lib/helpers/prisma";
import TanstackProvider from "./_components/providers/TanstackProvider";
const rubik = Rubik({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
// const comments = await prisma.comment.findMany();
return (
<html lang="en">
<body className={rubik.className}>
<TanstackProvider>
{/* <CommentContextProvider comments={comments}> */}
{children}
{/* </CommentContextProvider> */}
</TanstackProvider>
</body>
</html>
);
}
注释掉的部分是我在尝试实现 React 查询之前使用 React 上下文来管理状态的地方。
我正在使用 next 14.0.4 和应用程序路由器。
任何有关我可以采取哪些措施来解决此问题的信息将不胜感激。
编辑：我用react-query创建了一个新的准系统项目，并能够让它按预期工作。我筛选了我的项目，它与新项目的代码不一样，以查看到底是什么原因导致的，但问题仍然存在，所以我不知道是什么导致了问题。
只需查看 React 查询文档即可。他们对此进行了解释：
// _app.jsx
import {
Hydrate,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'
export default function MyApp({ Component, pageProps }) {
const [queryClient] = React.useState(() => new QueryClient())
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<Component {...pageProps} />
</Hydrate>
</QueryClientProvider>
)
}