Theo's Typesafe Cult•3y ago

tRPC Query being called client side even with dehydrated state

I have a trpc v10 prefetch in gssp, it's being passed in correctly and hydrated properly, but the query is still being called client side

5 Replies

ryanagillieOP•3y ago

Can't figure out if this is intentional, but I was under the impression the fetch wouldn't be called client side if it was dehydrated simple setup

const exampleRouter = t.router({
  hello: t.procedure
    .input(
      z.object({
        text: z.string().nullish(),
      }).nullish(),
    )
    .query(({ input }) => ({
      greeting: `hello: ${input?.text ?? 'world'}`,
    })),
});
export default exampleRouter;

const exampleRouter = t.router({
  hello: t.procedure
    .input(
      z.object({
        text: z.string().nullish(),
      }).nullish(),
    )
    .query(({ input }) => ({
      greeting: `hello: ${input?.text ?? 'world'}`,
    })),
});
export default exampleRouter;

const ssrHelper = (ctx: GetServerSidePropsContext) => createProxySSGHelpers({
  router: appRouter,
  ctx: createContext(ctx),
  transformer: superjson,
});
export default ssrHelper;

const ssrHelper = (ctx: GetServerSidePropsContext) => createProxySSGHelpers({
  router: appRouter,
  ctx: createContext(ctx),
  transformer: superjson,
});
export default ssrHelper;

const Home: NextPage = () => {
  const { data, status } = trpc.example.hello.useQuery();
  console.log(data, status);

  return (
    <h1>{data!.greeting}</h1>
  )
}
export default Home;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const ssr = ssrHelper(ctx);
  await ssr.example.hello.prefetch();

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

const Home: NextPage = () => {
  const { data, status } = trpc.example.hello.useQuery();
  console.log(data, status);

  return (
    <h1>{data!.greeting}</h1>
  )
}
export default Home;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const ssr = ssrHelper(ctx);
  await ssr.example.hello.prefetch();

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

ryanagillieOP•3y ago

ryanagillieOP•3y ago

status is never "loading", so it's being passed in correctly just not sure why it's being called client side as well unless its some kind of cache validation thing

TkDodo 🔮•3y ago

if you're using the default staleTime of zero, that is expected. see: https://tanstack.com/query/v4/docs/guides/ssr#staleness-is-measured-from-when-the-query-was-fetched-on-the-server

SSR | TanStack Query Docs

React Query supports two ways of prefetching data on the server and passing that to the queryClient. Prefetch the data yourself and pass it in as initialData

ryanagillieOP•3y ago

Amazing, thank you for finding this!

Gaming

Programming

tRPC Query being called client side even with dehydrated state