es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

prefetchInfiniteQuery devuelve undefined.

Uso prefetchInfiniteQuery en mi aplicación Next.js, dentro de getServerSideProps, y devuelve undefined. ¿No estoy seguro si es normal? Mis datos se cargan correctamente desde useInfiniteQuery() y puedo ver todas las siguientes consultas, pero quiero prefetcheo en el lado del servidor, por lo que estoy usando el método de hidratación.

Este es el extracto de mi archivo 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>
        </>
    )
}

mi archivo de página 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;


   ... todos los props obtenidos

  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
    }
  }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Es normal que prefetchInfiniteQuery devuelva undefined dentro de getServerSideProps. Esto se debe a que prefetchInfiniteQuery es una función del lado del cliente y no puede ser ejecutada durante el procesamiento del lado del servidor. Sin embargo, aún puedes utilizar el método de hydration para precargar los datos iniciales en la primera carga de la página. Esto significa que la primera página será renderizada en el servidor, pero las páginas posteriores serán hidratadas en el lado del cliente con datos precargados. Entonces, en tu caso, puedes seguir utilizando useInfiniteQuery() para obtener datos y prefetchInfiniteQuery para precargar datos en el lado del cliente. También puedes utilizar dehydrate para serializar el estado de la página y enviarlo al cliente. En el lado del cliente, puedes utilizar el componente Hydrate para hidratar el estado y evitar la recarga innecesaria.

Comments are closed.