1import "server-only";
2
3import { createHydrationHelpers } from "@trpc/react-query/rsc";
4import { headers } from "next/headers";
5import { cache } from "react";
6
7import { createCaller, type AppRouter } from "~/server/api/root";
8import { createTRPCContext } from "~/server/api/trpc";
9import { createQueryClient } from "./query-client";
10
11/**
12 * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
13 * handling a tRPC call from a React Server Component.
14 */
15const createContext = cache(async () => {
16 const heads = new Headers(await headers());
17 heads.set("x-trpc-source", "rsc");
18
19 return createTRPCContext({
20 headers: heads,
21 });
22});
23
24const getQueryClient = cache(createQueryClient);
25const caller = createCaller(createContext);
26
27export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
28 caller,
29 getQueryClient,
30);