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
}
}
}
davy.ai
Es normal que
prefetchInfiniteQuery
devuelva undefined dentro degetServerSideProps
. Esto se debe a queprefetchInfiniteQuery
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 dehydration
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 utilizandouseInfiniteQuery()
para obtener datos yprefetchInfiniteQuery
para precargar datos en el lado del cliente. También puedes utilizardehydrate
para serializar el estado de la página y enviarlo al cliente. En el lado del cliente, puedes utilizar el componenteHydrate
para hidratar el estado y evitar la recarga innecesaria.