Gabriel BeltrãoG
tRPC•14mo ago•
4 replies
Gabriel Beltrão

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


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
Was this page helpful?