prefetchInfiniteQuery returns 未定义

Question

我在我的 Next.js 应用程序上使用 prefetchInfiniteQuery，在 getServerSideProps 中，它 returns 未定义。我不确定这是否正常？我的数据已从 useInfiniteQuery() 正确加载，我可以看到所有下一次提取，但我想在服务器端预提取，所以我使用 hydration methode.

这是我的app.js文件提取:

import { QueryClientProvider, QueryClient } from 'react-query';
const queryClient = new QueryClient()

MyApp ({ Component, pageProps, user_account_menu, userProfile, token, fallback }){
    return (
      
        <>
            <DefaultSeo {...SEO}/>
            <FacebookPixel />
            <SWRConfig value={{ fallback }}>
              <ThemeProvider theme={theme}>
                <GlobalStyles />
                <BreakPointProvider>
                <AuthProvider>
                <DisplayProvider>
                <EcommerceProvider>
                  
                  <QueryClientProvider client={queryClient}>
                  <Header 
                    principal_menu={fallback.principal_menu}  
                    menu_sections={fallback.menu_sections}
                    user_account_menu={user_account_menu}
                    token={token} 
                    userProfile={userProfile} 
                  />
                      <Component {...pageProps} token={token} reviews={fallback.reviews}  newsletter={fallback.newsletter}/>
                    
                  </QueryClientProvider>
                  <PopUpNewsletter newsletter={fallback.newsletter} />
                  <Footer footer_menu={fallback.footer_menu} reviews={fallback.reviews} policies={fallback.policies_menu}/>
                </EcommerceProvider>
                </DisplayProvider>
                </AuthProvider>
                </BreakPointProvider>
              </ThemeProvider>
            </SWRConfig>
        </>
    )
}

我的 index.js 页面文件 (SSR) :

import { useQuery, useQueryClient, useInfiniteQuery, dehydrate, QueryClient, Hydrate } from 'react-query';

const getProviders = async (key, pageParam = 0) => {
  ...
  return queryProps
}

export async function getServerSideProps(ctx) {
  const queryClient = new QueryClient()

  const { query } = ctx;
  const { page = 1 } = query;

  const token = parseCookies(ctx).jwt ? parseCookies(ctx).jwt : null
  
  const limit = 16;
  const start = +page === 1 ? 0 : (+page - 1) * limit
  const configSimple = 'simple'

  let resProviders
  
  if(!token){
    resProviders = await fetchAPI(getTalentCards);
  }else{
    resProviders = await fetchAuthorizationAPI(getTalentCards, token, configSimple);
  }
    const providersData = await resProviders;
  

   ... all props fetched

  const providers = {
    pages: [
      { 
        result: providersData,
        pageId: 0,
        dehydratedState: dehydrate(queryClient),
      }
    ],
    pageParams: [0],
  }

  return {
    props: {
      providers: providers,
      page: +page,
      provider_types: providerTypesData,
      countries: countriesData,
      cities: citiesData,
      provider_statuses: providerStatusesData,
      start,
      limit,
      token: token
    }
  }
}

Answer 1

是的，这是预期的并记录在此处：https://react-query.tanstack.com/reference/QueryClient#queryclientprefetchquery

prefetchQuery is an asynchronous method that can be used to prefetch a query before it is needed or rendered with useQuery and friends. The method works the same as fetchQuery except that it will not throw or return any data.

如果你想返回数据，你可以使用fetchQuery，但是对于水合作用，你不需要。预取会将数据放在缓存中，然后您可以将缓存发送给客户端。文档中还有一个示例，完全像这样：https://react-query.tanstack.com/guides/ssr#using-hydration

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

prefetchInfiniteQuery returns 未定义

prefetchInfiniteQuery returns undefined

reactjs

next.js

react-query