Next.js 在_app.js和getInitialProps中反应查询并使用queryClient

因此，在文档中，我们有以下代码：

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>
   )
 }

我目前正在页面顶部定义queryClient=newqueryclient（），以便“两者”都可以使用它。但我认为，当我运行npm构建这个应用程序时，这会导致一些水化问题

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

---

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

对于服务器上的预取，您只需创建一个新的QueryClient，如您链接的页面下面所述：

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

---

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

出于好奇，简单地分离关注点并将用户会话作为道具传递怎么样？我要说清楚，我感谢您的回答，在“_app.js”中，您只能使用“getInitialProps”。我只是想确保这在“app.js”getInitialProps中仍然是可行的。。即。。MyApp.getInitialPropsAlso，我必须使用“预回迁查询”吗。我仍然可以按照OP中使用的方式来做（但请确保使用自己的QueryClient）？

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