createTRPCQueryUtils

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 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(undefined, {
    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 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(undefined, {
    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는 queryOptions과 infiniteQueryOptions를 포함한 동일한 헬퍼 세트에 접근할 수 있게 해줍니다. 유일한 차이는 queryClient와 client 객체를 전달해야 한다는 점입니다.

useUtils 페이지에서 확인해 볼 수 있습니다.