React Query 통합 (클래식)

팁

이 문서는 '클래식' React Query 통합에 대한 내용입니다. 이 방식은 여전히 지원되지만, TanStack React Query를 사용하여 새로운 tRPC 프로젝트를 시작하는 데에는 권장되지 않습니다. 대신 새로운 TanStack React Query 통합을 사용하는 것을 권장합니다.

tRPC는 React와 일급 통합을 제공합니다. 내부적으로 이는 매우 인기 있는 @tanstack/react-query를 감싸는 래퍼일 뿐이므로, 사용법에 대해 훨씬 더 깊이 다루고 있는 React Query 문서를 참고하여 익숙해지는 것을 권장합니다.

Next.js를 사용하는 경우, 해당 통합을 사용하는 것을 권장합니다.

❓ 통합을 반드시 사용해야 하나요?

아니요! 통합은 완전히 선택 사항입니다. 바닐라 tRPC 클라이언트만 사용하여 @tanstack/react-query를 사용할 수 있지만, 이 경우 쿼리 키를 수동으로 관리해야 하며 통합 패키지를 사용할 때와 동일한 수준의 개발 경험(DX)을 제공받지 못합니다.

utils/trpc.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server';
 
export const trpc = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'YOUR_API_URL' })],
});

utils/trpc.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server';
 
export const trpc = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'YOUR_API_URL' })],
});

components/PostList.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { trpc } from '../utils/trpc';
 
function PostList() {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: () => trpc.post.list.query(),
  });
  data; // Post[]
 
  // ...
}

components/PostList.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { trpc } from '../utils/trpc';
 
function PostList() {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: () => trpc.post.list.query(),
  });
  data; // Post[]
 
  // ...
}

tRPC React Query 통합

이 라이브러리는 React 컴포넌트 내에서 직접 사용할 수 있게 해줍니다.

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
 
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
 
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
 
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
 
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

바닐라 React Query와의 차이점

이 래퍼는 React Query의 일부 측면을 추상화하여 제공합니다:

• 쿼리 키 - 제공한 프로시저 입력을 기반으로 tRPC가 대신 생성하고 관리합니다
  • tRPC가 계산한 쿼리 키가 필요한 경우 getQueryKey를 사용할 수 있습니다
• 기본적으로 타입 안전 - tRPC 백엔드에서 제공하는 타입이 React Query 클라이언트의 타입을 결정하여 React 앱 전반에 걸쳐 안전성을 제공합니다