T
tRPC

❓-help

server-side helpers doesnt work with `Hydrate` and `QueryClient`

Ppandakas12/21/2023
environtment: node v20.9.0, npm Hi i tried to implement server-side helpers but somehow it just doesnt work, the fetch is successful but i think it didn't dehydrate i think the issue happened because im also using react query outside tRPC (first vanilla react query -> trying to migrate over to TRPC) so my _app.tsx pretty much look like this
const App = () => {
...
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<Component {...pageProps} />
<ReactQueryDevtools initialIsOpen={false} />
</Hydrate>
</QueryClientProvider>;
}

export default bff.withTRPC(App)
const App = () => {
...
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<Component {...pageProps} />
<ReactQueryDevtools initialIsOpen={false} />
</Hydrate>
</QueryClientProvider>;
}

export default bff.withTRPC(App)
its working fine when i remove the QueryClientProvider is it okay to remove them ?
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const helpers = createServerSideHelpers({
router: appRouter,
ctx: createTRPCContext({
req: ctx.req as NextApiRequest,
res: ctx.res as NextApiResponse,
}),
transformer: superjson,
});

const returned = await helpers.auth.session.fetch();

console.log(returned);

return {
props: {
trpcState: helpers.dehydrate(),
},
};
};

function PlaygroundPage() {
const { data } = bff.auth.session.useQuery();

return (
<div className="mx-auto my-auto">
<div className="max-w-[400px]">{JSON.stringify(data?.accessToken)}</div>
<button type="button">login</button>
</div>
);
}

export default PlaygroundPage;
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const helpers = createServerSideHelpers({
router: appRouter,
ctx: createTRPCContext({
req: ctx.req as NextApiRequest,
res: ctx.res as NextApiResponse,
}),
transformer: superjson,
});

const returned = await helpers.auth.session.fetch();

console.log(returned);

return {
props: {
trpcState: helpers.dehydrate(),
},
};
};

function PlaygroundPage() {
const { data } = bff.auth.session.useQuery();

return (
<div className="mx-auto my-auto">
<div className="max-w-[400px]">{JSON.stringify(data?.accessToken)}</div>
<button type="button">login</button>
</div>
);
}

export default PlaygroundPage;
thanks!
Ppandakas12/21/2023
i think the correct question would be - am i supposed to remove QueryClientProvider if i am migrating over to tRPC (incrementally/not complete)? Since i am still using react-query outside trpc

Looking for more? Join the community!