본문 바로가기
버전: 11.x

React Query 통합 설정하기

비공식 베타 번역

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

1. 의존성 설치​

다음 의존성들을 설치해야 합니다

npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query

2. AppRouter 가져오기​

비공식 베타 번역

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

클라이언트 애플리케이션에 AppRouter 타입을 가져옵니다. 이 타입은 전체 API의 구조를 담고 있습니다.

utils/trpc.ts
ts
import type { AppRouter } from '../server/router';
utils/trpc.ts
ts
import type { AppRouter } from '../server/router';
팁

import type을 사용하면 컴파일 시점에 참조가 제거되어 실수로 서버 측 코드를 클라이언트로 가져오는 것을 방지할 수 있습니다. 자세한 내용은 TypeScript 문서를 참조하세요.

3. tRPC 훅 생성하기​

createTRPCReact를 사용하여 AppRouter 타입 시그니처로부터 강력한 타입의 React 훅 세트를 생성하세요.

utils/trpc.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';
 
export const trpc = createTRPCReact<AppRouter>();
utils/trpc.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';
 
export const trpc = createTRPCReact<AppRouter>();

4. tRPC 프로바이더 추가하기​

tRPC 클라이언트를 생성하고 아래와 같이 애플리케이션을 tRPC Provider로 감싸세요. 또한 React Query를 설정하고 연결해야 하며, 자세한 내용은 해당 문서에서 확인할 수 있습니다.

팁

이미 애플리케이션에서 React Query를 사용 중이라면 기존의 QueryClient와 QueryClientProvider를 재사용해야 합니다.

App.tsx
tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/trpc',
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              authorization: getAuthCookie(),
            };
          },
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}
App.tsx
tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/trpc',
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              authorization: getAuthCookie(),
            };
          },
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}
참고

컴포넌트 외부에서 선언하는 대신 queryClient와 TRPCClient 생성 시 useState를 사용하는 이유는 SSR 사용 시 각 요청이 고유한 클라이언트를 보장하기 위함입니다. 클라이언트 사이드 렌더링을 사용한다면 원하는 경우 외부로 이동할 수 있습니다.

5. 데이터 가져오기​

이제 tRPC React Query 통합을 사용해 API에 대한 쿼리 및 뮤테이션을 호출할 수 있습니다.

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const userQuery = trpc.getUser.useQuery({ id: 'id_bilbo' });
  const userCreator = trpc.createUser.useMutation();
 
  return (
    <div>
      <p>{userQuery.data?.name}</p>
 
      <button onClick={() => userCreator.mutate({ name: 'Frodo' })}>
        Create Frodo
      </button>
    </div>
  );
}
pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const userQuery = trpc.getUser.useQuery({ id: 'id_bilbo' });
  const userCreator = trpc.createUser.useMutation();
 
  return (
    <div>
      <p>{userQuery.data?.name}</p>
 
      <button onClick={() => userCreator.mutate({ name: 'Frodo' })}>
        Create Frodo
      </button>
    </div>
  );
}