Hoppa till huvudinnehållet
Version: 10.x

Server-Side Helpers

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Server-Side Helpers ger dig en uppsättning hjälpfunktioner för att förhämta queries på servern. Detta är användbart för SSG (Static Site Generation), men även för SSR (Server-Side Rendering) om du väljer att inte använda ssr: true.

Genom att förhämta via Server-Side Helpers fyller du query-cachen på servern, vilket innebär att dessa queries inte behöver hämtas på klienten initialt.

Det finns 2 sätt att använda Server-Side Helpers​

1. Intern router​

Denna metod används när du har direktåtkomst till din tRPC-router. T.ex. när du utvecklar en monolitisk Next.js-applikation.

Genom att använda hjälpfunktionerna låter du tRPC anropa dina procedurer direkt på servern utan HTTP-förfrågan, liknande server-side calls. Det innebär också att du inte har tillgång till request och response som vanligt. Se till att du instansierar server-side helpers med en kontext utan req & res, som vanligtvis fylls via kontextskapandet. Vi rekommenderar konceptet med "inner" och "outer" context i det scenariot.

ts
import { createServerSideHelpers } from '@trpc/react-query/server';
import { createContext } from '~/server/context';
import superjson from 'superjson';
const helpers = createServerSideHelpers({
  router: appRouter,
  ctx: await createContext(),
  transformer: superjson, // optional - adds superjson serialization
});
ts
import { createServerSideHelpers } from '@trpc/react-query/server';
import { createContext } from '~/server/context';
import superjson from 'superjson';
const helpers = createServerSideHelpers({
  router: appRouter,
  ctx: await createContext(),
  transformer: superjson, // optional - adds superjson serialization
});

2. Extern router​

Denna metod används när du inte har direktåtkomst till din tRPC-router. T.ex. när du utvecklar en Next.js-applikation och ett fristående API som finns på en separat plats.

ts
import { createTRPCProxyClient } from '@trpc/client';
import { createServerSideHelpers } from '@trpc/react-query/server';
import superjson from 'superjson';
const proxyClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/api/trpc',
    }),
  ],
  transformer: superjson,
});
const helpers = createServerSideHelpers({
  client: proxyClient,
});
ts
import { createTRPCProxyClient } from '@trpc/client';
import { createServerSideHelpers } from '@trpc/react-query/server';
import superjson from 'superjson';
const proxyClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/api/trpc',
    }),
  ],
  transformer: superjson,
});
const helpers = createServerSideHelpers({
  client: proxyClient,
});

Användning av hjälpfunktioner​

Server-Side Helpers returnerar ett objekt som liknar tRPC-klienten, med alla dina routers som nycklar. Men istället för useQuery och useMutation får du funktionerna prefetch, fetch, prefetchInfinite och fetchInfinite.

Den primära skillnaden mellan prefetch och fetch är att fetch fungerar som ett vanligt funktionsanrop och returnerar query-resultatet, medan prefetch inte returnerar något resultat och aldrig kastar fel - om du behöver det beteendet, använd fetch istället. Istället lägger prefetch till queryn i cachen, som du sedan dehydrerar och skickar till klienten.

ts
return {
  props: {
    // very important - use `trpcState` as the key
    trpcState: helpers.dehydrate(),
  },
};
ts
return {
  props: {
    // very important - use `trpcState` as the key
    trpcState: helpers.dehydrate(),
  },
};

Tumregel: Använd prefetch för queries du vet att du behöver på klienten, och fetch för queries där du vill använda resultatet på servern.

Alla funktioner är omslag kring react-query-funktioner. Läs deras dokumentation för att lära dig mer i detalj.

info

För ett komplett exempel, se vårt E2E SSG-testexempel

Next.js-exempel​

pages/posts/[id].tsx
tsx
import { createServerSideHelpers } from '@trpc/react-query/server';
import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
import { appRouter } from 'server/routers/_app';
import superjson from 'superjson';
import { trpc } from 'utils/trpc';
export async function getServerSideProps(
  context: GetServerSidePropsContext<{ id: string }>,
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {},
    transformer: superjson,
  });
  const id = context.params?.id as string;
  /*
   * Prefetching the `post.byId` query.
   * `prefetch` does not return the result and never throws - if you need that behavior, use `fetch` instead.
   */
  await helpers.post.byId.prefetch({ id });
  // Make sure to return { props: { trpcState: helpers.dehydrate() } }
  return {
    props: {
      trpcState: helpers.dehydrate(),
      id,
    },
  };
}
export default function PostViewPage(
  props: InferGetServerSidePropsType<typeof getServerSideProps>,
) {
  const { id } = props;
  const postQuery = trpc.post.byId.useQuery({ id });
  if (postQuery.status !== 'success') {
    // won't happen since the query has been prefetched
    return <>Loading...</>;
  }
  const { data } = postQuery;
  return (
    <>
      <h1>{data.title}</h1>
      <em>Created {data.createdAt.toLocaleDateString()}</em>
      <p>{data.text}</p>
      <h2>Raw data:</h2>
      <pre>{JSON.stringify(data, null, 4)}</pre>
    </>
  );
}
pages/posts/[id].tsx
tsx
import { createServerSideHelpers } from '@trpc/react-query/server';
import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
import { appRouter } from 'server/routers/_app';
import superjson from 'superjson';
import { trpc } from 'utils/trpc';
export async function getServerSideProps(
  context: GetServerSidePropsContext<{ id: string }>,
) {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: {},
    transformer: superjson,
  });
  const id = context.params?.id as string;
  /*
   * Prefetching the `post.byId` query.
   * `prefetch` does not return the result and never throws - if you need that behavior, use `fetch` instead.
   */
  await helpers.post.byId.prefetch({ id });
  // Make sure to return { props: { trpcState: helpers.dehydrate() } }
  return {
    props: {
      trpcState: helpers.dehydrate(),
      id,
    },
  };
}
export default function PostViewPage(
  props: InferGetServerSidePropsType<typeof getServerSideProps>,
) {
  const { id } = props;
  const postQuery = trpc.post.byId.useQuery({ id });
  if (postQuery.status !== 'success') {
    // won't happen since the query has been prefetched
    return <>Loading...</>;
  }
  const { data } = postQuery;
  return (
    <>
      <h1>{data.title}</h1>
      <em>Created {data.createdAt.toLocaleDateString()}</em>
      <p>{data.text}</p>
      <h2>Raw data:</h2>
      <pre>{JSON.stringify(data, null, 4)}</pre>
    </>
  );
}