Gabriel Beltrão Posts

Gabriel Beltrão

•Created by Gabriel Beltrão on 11/26/2024 in #❓-help

Prefetch using Next App router not working with useQuery but works with useSuspenseQuery

1. I'm not using the next adapter 2. I'm using the Next App Router 3. Using useSuspenseQuery works as expected, the query doesnt run onMount because it was prefetched, but it always runs using useQuery My server side page.tsx:

export default async function Page({ params: { como }, searchParams: { id } }: Props) {
    const template = id ? await api.mtr.template.get({ templateId: Number(id) }) : undefined;
    
    const ssr = await createSSRHelper();
    void ssr.mtr.getIntegrationPlatforms.prefetch();
    void ssr.mtr.getGenerators.prefetch({ viewingAs: como });

    const dehydratedState = dehydrate(ssr.queryClient);

    return (
        <MtrContextProvider
            values={{
                template,
                isTemplate: true,
                // hasInternalStockResource,
            }}
        >
            <ReactQueryHydrate state={dehydratedState}>
                <InsertMtrTemplatePage />
            </ReactQueryHydrate>
        </MtrContextProvider>
    );
}

export default async function Page({ params: { como }, searchParams: { id } }: Props) {
    const template = id ? await api.mtr.template.get({ templateId: Number(id) }) : undefined;
    
    const ssr = await createSSRHelper();
    void ssr.mtr.getIntegrationPlatforms.prefetch();
    void ssr.mtr.getGenerators.prefetch({ viewingAs: como });

    const dehydratedState = dehydrate(ssr.queryClient);

    return (
        <MtrContextProvider
            values={{
                template,
                isTemplate: true,
                // hasInternalStockResource,
            }}
        >
            <ReactQueryHydrate state={dehydratedState}>
                <InsertMtrTemplatePage />
            </ReactQueryHydrate>
        </MtrContextProvider>
    );
}

My client component then uses this: const { data: generators, isPending } = api.mtr.getGenerators.useQuery({ viewingAs }) But the isPending is always true at the beginning and so is isFetching

5 replies