Question

因此，在文档中，我们有以下代码： https://react-query.tanstack.com/guides/ssr#using-hydration

RE：使用“useRef”来存储引用。

 // _app.jsx
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Hydrate } from 'react-query/hydration'
 
 export default function MyApp({ Component, pageProps }) {
   const queryClientRef = React.useRef()
   if (!queryClientRef.current) {
     queryClientRef.current = new QueryClient()
   }
 
   return (
     <QueryClientProvider client={queryClientRef.current}>
       <Hydrate state={pageProps.dehydratedState}>
         <Component {...pageProps} />
       </Hydrate>
     </QueryClientProvider>
   )
 }

但是，我还需要在 MyApp.getInitialProps 的“缓存”中存储一些 fetch 调用......如果我在上面的函数中使用 useRef 创建一个实例，那会怎样？意思是，我的“getInitialProps”如何获得该实例？

MyApp.getInitialProps = async (appContext) => {
   // in here, I do a fetch and get some data I need for SSR
   // user Session etc...
   const { user } = await fetchUserSession();

   // WHAT INSTANCE IS THIS?
   queryClient.setQueryData('user', user || {});

   return {
      ...appProps,
     dehydratedState: dehydrate(queryClient),
   }

}

我目前正在页面顶部定义 queryClient = new QueryClient()，因此“两者”都可以使用它。但我认为当我 npm run 构建这个应用程序时，这会导致一些水合作用问题。

记住，这是在“_app.js”中，所以我必须使用 getInitialProps。

我在这里这样做的原因是因为我们需要用户在整个站点范围内进行会话，无论他们在哪个页面上。所以，与其在每个 /page/ 中都这样做，不如在 _app.js 中这样做，所以整个站点都需要它？ /page/ 是静态生成的。

Answer 1

为了在服务器上进行预取，您只需创建一个新的 QueryClient，就像在您链接的页面上进一步描述的那样：

 export async function getStaticProps() {
   const queryClient = new QueryClient()
 
   await queryClient.prefetchQuery('posts', getPosts)
 
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
     },
   }
 }

在这里，您创建一个新的空客户端，预取并获取状态并将其脱水。然后，在前端，该状态从 MyApp 放入您的实例客户端。这只是将数据从服务器端缓存获取到客户端缓存的一种方式。

React Query 和在 _app.js 和 getInitialProps 中使用 queryClient

1 个答案: