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ão
Gabriel BeltrãoOP5w 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? :/

Did you find this page helpful?