//tanstackqueryProvider
'use client'
import React, { useState } from 'react'
import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query'
function Providers({ children }: React.PropsWithChildren) {
const queryClient = new QueryClient()
return (
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
)
}
export default Providers
//布局.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
import Providers from "@/providers/TanstackProvider";
import { cache } from "react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const inter = Inter({ 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 queryClient = cache(() => new QueryClient({
defaultOptions: {
queries: {
refetchInterval: 10000,
staleTime: 5000
}
}
}));
const dehydratedState = dehydrate(queryClient());
return (
<html>
<body>
<Providers>
<HydrationBoundary state={dehydratedState} >
{children}
</HydrationBoundary>
<ReactQueryDevtools initialIsOpen={false}/>
</Providers>
</body>
</html>
)
}
//fetchUsers.tsx
export async function fetchUsers() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
return await res.json()
} catch (err: any) {
throw err.response.data
}
}
//app/page.tsx
"use client"
import { QueryClient, useQuery } from "@tanstack/react-query";
import { fetchUsers } from "./fetchUsers";
const Home = () => {
const queryClient = new QueryClient();
const { isLoading, error, data } = useQuery(
{
queryKey:["users"],
queryFn:fetchUsers,
}
);
return (
<div>
{isLoading && <div>Loading...</div>}
{error && <div>Error: {error.message}</div>}
{data && (
<ul>
{data.map((user:any) => (
<li key={user?.title}>{user.title}</li>
))}
</ul>
)}
</div>
);
};
export default Home;
在这里，我试图这样做，我正在获取 page.tsx 中的帖子数据，并且它已获取，但问题是当我重新加载页面时，会向后端发出新请求，并在每次我不希望时获取新帖子想让它尽可能快地使用缓存
queryCache 仅存在于内存中。如果重新加载页面，缓存就会消失。如果需要，您可以使用 persister 插件将缓存存储在例如本地存储：https://tanstack.com/query/v5/docs/framework/react/plugins/persistQueryClient