9 replies

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

TTC

Theo's Typesafe Cult•3y ago•

9 replies

Gabriel

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>;
}

What is prefetching in TRPC server side?

Similar Threads

What is prefetching in TRPC server side?

Similar Threads

Similar Threads

Similar Threads