我有服务器端呈现的基本设置和react设置,它的工作方式与预期的一样。我知道react query在客户端维护一个缓存,如果特定的查询键是新的并且它存在的话,它可以从这个缓存中服务器数据。这个装置看起来是这样的-
// pages/_app.tsx
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider, Hydrate } from "react-query";
function MyApp({ Component, pageProps }: AppProps) {
const [queryClient] = React.useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<Component {...pageProps} />
</Hydrate>
</QueryClientProvider>
);
}
export default MyApp;
// pages/index.tsx
import React from "react";
import { GetServerSideProps, NextPage } from "next";
import { dehydrate } from "react-query";
import { useQuery } from "react-query";
import { exampleApi } from "@src/modules/my-plans/apis";
const ListingPage: NextPage = () => {
const { data: list, isLoading } = useQuery(["list-api-key"], exampleApi);
return (
<main>
{...}
</main>
);
};
export const getServerSideProps: GetServerSideProps = async (context) => {
const queryClient = new QueryClient();
await queryClient.prefetchQuery(["list-api-key"], exampleApi);
return {
props: {
dehydratedState: dehydrate(queryClientTopDog)
}
};
};
export default ListingPage;
在上面的片段中,由于API是在getServerSideProps
中预取的,所以useQuery
从水化缓存中获取数据,而不是调用API。
我想弄清楚的是,在getServerSideProps
中缓存是否可行。由于API已经被调用过一次,我如何使它从第二个请求开始,而不是再次调用API,而不是从服务器端缓存中获取数据,类似于react query如何维护客户端缓存?
如果我没有误解文档中的这页面,它似乎表明维护服务器端缓存是可能的,但我无法弄清楚如何做到这一点。为此,我尝试在pages/_app.tsx
上创建一个pages/_app.tsx
,并将其导出到getServerSideProps
中使用,但我无法让它工作。
发布于 2022-09-06 01:24:02
您需要在getServerSideProps
函数之外声明客户机。
此外,您还需要配置staleTime
,就像通过卸载它是0一样。
const queryClient = new QueryClient();
export const getServerSideProps: GetServerSideProps = async (context) => {
await queryClient.prefetchQuery(["list-api-key"], exampleApi, { staleTime: STALE_TIME });
return {
props: {
dehydratedState: dehydrate(queryClientTopDog)
}
};
};
export default ListingPage;
https://stackoverflow.com/questions/73307822
复制