createTRPCQueryUtils

비공식 베타 번역

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

createTRPCQueryUtils는 React 컴포넌트 외부에서 헬퍼를 사용해야 할 때 유용합니다. 예를 들어 react-router의 로더에서 사용할 수 있습니다.

useUtils와 유사하게 createTRPCQueryUtils는 @trpc/react-query를 통해 실행한 쿼리의 캐시 데이터를 관리할 수 있는 헬퍼에 접근할 수 있게 해주는 함수입니다. 이 헬퍼들은 실제로 @tanstack/react-query의 queryClient 메서드를 감싼 얇은 래퍼입니다. 여기서 제공하는 내용보다 더 깊이 있는 useUtils 헬퍼의 옵션 및 사용 패턴을 원하신다면 해당 @tanstack/react-query 문서 링크를 참고하시기 바랍니다.

useUtils와 createTRPCQueryUtils의 주요 차이점은 useUtils가 내부적으로 useQueryClient를 사용하는 React 훅이라는 점입니다. 따라서 React 컴포넌트 내에서 더 효과적으로 동작합니다.

클라이언트에 직접 접근해야 할 경우, 생성 시 createTRPCQueryUtils에 전달한 client 객체를 사용하면 됩니다.

주의

React 컴포넌트 내에서는 createTRPCQueryUtils 사용을 피해야 합니다. 대신 내부적으로 useCallback과 useQueryClient를 구현하는 React 훅인 useUtils를 사용하세요.

사용법

createTRPCQueryUtils는 라우터에 정의된 모든 사용 가능한 쿼리를 포함하는 객체를 반환합니다. trpc 클라이언트 객체와 동일한 방식으로 사용하며, 특정 쿼리에 도달하면 해당 쿼리의 헬퍼에 접근할 수 있습니다. 예를 들어 all 쿼리가 포함된 post 라우터가 있다고 가정해 보겠습니다:

이제 컴포넌트에서 createTRPCQueryUtils가 제공하는 객체를 탐색하여 post.all 쿼리에 도달하면 쿼리 헬퍼를 사용할 수 있습니다!

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import { useLoaderData } from 'react-router-dom';
import type { AppRouter } from './server';
const trpc = createTRPCReact<AppRouter>();
const trpcClient = trpc.createClient({ links: [] });
const queryClient = new QueryClient();
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpcClient });
// This is a react-router loader
export async function loader() {
  const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cache
  return {
    allPostsData,
  };
}
// This is a react component
export function Component() {
  const loaderData = useLoaderData() as Awaited<ReturnType<typeof loader>>;
  const allPostQuery = trpc.post.all.useQuery({
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import { useLoaderData } from 'react-router-dom';
import type { AppRouter } from './server';
const trpc = createTRPCReact<AppRouter>();
const trpcClient = trpc.createClient({ links: [] });
const queryClient = new QueryClient();
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpcClient });
// This is a react-router loader
export async function loader() {
  const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cache
  return {
    allPostsData,
  };
}
// This is a react component
export function Component() {
  const loaderData = useLoaderData() as Awaited<ReturnType<typeof loader>>;
  const allPostQuery = trpc.post.all.useQuery({
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

참고

Remix Run이나 SSR을 사용하는 경우 모든 요청에 동일한 queryClient를 재사용해서는 안 됩니다. 대신 요청 간 데이터 유출을 방지하기 위해 매 요청마다 새로운 queryClient를 생성해야 합니다.

헬퍼

useUtils와 마찬가지로 createTRPCQueryUtils도 동일한 헬퍼 집합에 대한 접근을 제공합니다. 유일한 차이점은 queryClient와 client 객체를 명시적으로 전달해야 한다는 점입니다.

해당 헬퍼들은 useUtils 페이지에서 확인할 수 있습니다.