cement4357 Comments - Answer Overflow

Prefetching is exactly what it sounds like to be, it is prefetching some kind of query, which you can call back later with prefetched data instead of calling query. It is meant to be used in serverside so ie. in exported function of getServerSideProps - an example:

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const ssg = createServerSideHelpers({
    router: appRouter,
    ctx: await createContext(),
    transformer: SuperJSON,
  });

  const { page } = ctx.query || 1;

  if (page && Number.isNaN(page)) {
    return {
      redirect: {
        destination: '/error',
        permanent: false,
      },
    };
  }

  await ssg.public.item.getItems.prefetchInfinite({
    cursor: 0,
    take: 10,
  });

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

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const ssg = createServerSideHelpers({
    router: appRouter,
    ctx: await createContext(),
    transformer: SuperJSON,
  });

  const { page } = ctx.query || 1;

  if (page && Number.isNaN(page)) {
    return {
      redirect: {
        destination: '/error',
        permanent: false,
      },
    };
  }

  await ssg.public.item.getItems.prefetchInfinite({
    cursor: 0,
    take: 10,
  });

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

and then you if you fetch the data in the component with exactly the same parameters, you will get prefetched data from gSSP instead of naked useQuery call ie.

trpc.public.item.getItems.useInfiniteQuery({
    cursor: 0,
    take: 10,
  });

trpc.public.item.getItems.useInfiniteQuery({
    cursor: 0,
    take: 10,
  });

not sure if it is gonna work if you are using 'use client' statement tho

10 replies

TTCTheo's Typesafe Cult

•Created by cement4357 on 2/24/2023 in #questions