Theo's Typesafe Cult•17mo ago

What is prefetching in TRPC server side?

I was able to create a TRPC server helper with "createServerSideHelpers". I am using it in my server function like this:

import { helpers } from "~/utils/proxy";
import Client from "./Client";

export default async function HomePage() {
  await helpers.test.test.prefetch({ source: "client" });
  return (
    <main className="flex h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
      <Client />
    </main>
  );
}

import { helpers } from "~/utils/proxy";
import Client from "./Client";

export default async function HomePage() {
  await helpers.test.test.prefetch({ source: "client" });
  return (
    <main className="flex h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
      <Client />
    </main>
  );
}

But I don't understand what it is doing. The docs say it does not return anything and never throws. I tried importing "Client" that is actually a Client component to see how it behaves:

"use client";

import React from "react";

import { api } from "~/utils/api";

export default function Client() {
  const apps = api.test.test.useQuery({ source: "client" });

  return <div className="">{JSON.stringify(apps.data)}</div>;
}

"use client";

import React from "react";

import { api } from "~/utils/api";

export default function Client() {
  const apps = api.test.test.useQuery({ source: "client" });

  return <div className="">{JSON.stringify(apps.data)}</div>;
}

I thought it would somehow have sent the data into the ReactQuery as initialData or something, but it always fetches right when the Client component is mounted. I don't understand what prefetching does. Can someone explain

5 Replies

cement4357•17mo ago

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 keep in mind that prefetching in your main page might be slower than calling your route staightaway with useQuery or however you name it

GabrielOP•17mo ago

Ok. But I am doing it through server components in app dir. that should be no problem right?

cement4357•17mo ago

Yes, that's totally okay, just in your case, you want to use gSSP or gIP and prefetch ur query there

GabrielOP•17mo ago

Do you know if I can do it via the server component? With no getServerSideProps I tried to do it like the code I sent you but I didn’t see anything happening. I don’t know if it worked etc I am importing the helpers that I created elsewhere with createServerSideHelpers

cement4357•17mo ago

I don't really think so, prefetch will add the query to the cache, which you then dehydrate and send to the client.

Gaming

Programming

What is prefetching in TRPC server side?