next.js Tantack React查询未导入

pdsfdshx 于 2024-01-07 发布在 React

关注(0)|答案(1)|浏览(113)

我试图实现tanstackReact查询到一个项目，我正在管理状态。
我试图将它设置在（tutorial for using react query with 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

字符串
但是在我的控制台中，我遇到了与useEntrance，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 query之前使用react context来管理状态的地方。
我正在使用下一个14.0.4与应用程序路由器。
任何关于我能做些什么来补救这一点的信息将不胜感激。
编辑：我用react-query做了一个新的准系统项目，并能够让它按预期工作。我筛选了我的项目，它没有工作到与新项目相同的代码，看看到底是什么导致了它，但问题仍然存在，所以我不知道是什么导致了这个问题。

next.js

来源：https://stackoverflow.com/questions/77770628/tanstack-react-query-not-importing

1条答案

按热度按时间

pvcm50d11#

看看react query doc.https://tanstack.com/query/v4/docs/react/guides/ssr，他们解释了这一点：

// layout.tsx
import {
  Hydrate,
  DehydratedState,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

export default function RootLayout({ children, dehydratedState }: React.PropsWithChildren & { dehydratedState: DehydratedState } ) {
  const [queryClient] = React.useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        ...
        {children}
        ...
      </Hydrate>
    </QueryClientProvider>
  )
}

字符串

赞(0）回复(0）举报 2024-01-07

我来回答

next.js Tantack React查询未导入

1条答案

相关问题

热门标签

最新问答