Gabriel Beltrão•2w ago

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

1 Reply

Gabriel BeltrãoOP•2w ago

For context, i'm also using SSR Helpers, as seen on the page.tsx, and this is my simple implementation:

"use server";

import { createServerSideHelpers } from "@trpc/react-query/server";
import { appRouter } from "./root";
import { createTRPCContext } from "./trpc";
import SuperJSON from "superjson";
import { createContext } from "@/trpc/server";

/**
 * SSR helpers (for prefetching data on the server)
 * https://trpc.io/docs/client/nextjs/server-side-helpers
 */
export const createSSRHelper = async () =>
    createServerSideHelpers({
        router: appRouter,
        ctx: await createContext(),
        transformer: SuperJSON,
    });

"use server";

import { createServerSideHelpers } from "@trpc/react-query/server";
import { appRouter } from "./root";
import { createTRPCContext } from "./trpc";
import SuperJSON from "superjson";
import { createContext } from "@/trpc/server";

/**
 * SSR helpers (for prefetching data on the server)
 * https://trpc.io/docs/client/nextjs/server-side-helpers
 */
export const createSSRHelper = async () =>
    createServerSideHelpers({
        router: appRouter,
        ctx: await createContext(),
        transformer: SuperJSON,
    });

Any help? :/