SSG 헬퍼

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

createSSGHelpers는 서버에서 쿼리를 미리 가져오는 데 사용할 수 있는 헬퍼 함수 세트를 제공합니다.

ts
import { createSSGHelpers } from '@trpc/react/ssg';
const {
  prefetchQuery,
  prefetchInfiniteQuery,
  fetchQuery,
  fetchInfiniteQuery,
  dehydrate,
  queryClient,
} = await createSSGHelpers({
  router: appRouter,
  ctx: createContext,
  transformer: superjson, // optional - adds superjson serialization
});

ts
import { createSSGHelpers } from '@trpc/react/ssg';
const {
  prefetchQuery,
  prefetchInfiniteQuery,
  fetchQuery,
  fetchInfiniteQuery,
  dehydrate,
  queryClient,
} = await createSSGHelpers({
  router: appRouter,
  ctx: createContext,
  transformer: superjson, // optional - adds superjson serialization
});

반환된 함수들은 모두 react-query 함수를 감싼 래퍼입니다. 자세한 내용은 공식 문서를 참고하세요.

Next.js 예제

pages/posts/[id].tsx
ts
import { createSSGHelpers } from '@trpc/react/ssg';
import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
import { createContext, prisma } from 'server/context';
import { appRouter } from 'server/routers/_app';
import superjson from 'superjson';
import { trpc } from 'utils/trpc';
export async function getServerSideProps(
  context: GetServerSidePropsContext<{ id: string }>,
) {
  const ssg = createSSGHelpers({
    router: appRouter,
    ctx: await createContext(),
    transformer: superjson,
  });
  const id = context.params?.id as string;
  /*
   * Prefetching the `post.byId` query here.
   * `prefetchQuery` does not return the result - if you need that, use `fetchQuery` instead.
   */
  await ssg.prefetchQuery('post.byId', {
    id,
  });
  // Make sure to return { props: { trpcState: ssg.dehydrate() } }
  return {
    props: {
      trpcState: ssg.dehydrate(),
      id,
    },
  };
}
export default function PostViewPage(
  props: InferGetServerSidePropsType<typeof getServerSideProps>,
) {
  const { id } = props;
  // This query will be immediately available as it's prefetched.
  const postQuery = trpc.useQuery(['post.byId', { id }]);
  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
ts
import { createSSGHelpers } from '@trpc/react/ssg';
import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
import { createContext, prisma } from 'server/context';
import { appRouter } from 'server/routers/_app';
import superjson from 'superjson';
import { trpc } from 'utils/trpc';
export async function getServerSideProps(
  context: GetServerSidePropsContext<{ id: string }>,
) {
  const ssg = createSSGHelpers({
    router: appRouter,
    ctx: await createContext(),
    transformer: superjson,
  });
  const id = context.params?.id as string;
  /*
   * Prefetching the `post.byId` query here.
   * `prefetchQuery` does not return the result - if you need that, use `fetchQuery` instead.
   */
  await ssg.prefetchQuery('post.byId', {
    id,
  });
  // Make sure to return { props: { trpcState: ssg.dehydrate() } }
  return {
    props: {
      trpcState: ssg.dehydrate(),
      id,
    },
  };
}
export default function PostViewPage(
  props: InferGetServerSidePropsType<typeof getServerSideProps>,
) {
  const { id } = props;
  // This query will be immediately available as it's prefetched.
  const postQuery = trpc.useQuery(['post.byId', { id }]);
  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>
    </>
  );
}