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

기존 React 클라이언트에서 마이그레이션

비공식 베타 번역

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

마이그레이션에는 여러 접근 방식이 있으며, 이 라이브러리는 기존 클라이언트와 상당히 다르기 때문에 단번에 완료하길 기대하지 않습니다. 아마도 여러 방법을 조합하여 시도해보고 싶을 것입니다...

Codemod를 통한 마이그레이션​

정보

Codemod는 현재 개발 중이며 개선을 위한 도움을 구하고 있습니다. Codemod에 기여하고 싶다면 Julius의 댓글을 참조하세요.

기존 코드베이스를 새로운 클라이언트로 마이그레이션하는 데 도움이 되는 codemod를 개발 중입니다. 현재 시도해 볼 수 있지만 개선을 위해 여러분의 피드백과 기여가 필요합니다. Codemod는 완성하기 까다로우므로 가능한 한 효과적으로 만들 수 있도록 도움을 구하고 있습니다.

업그레이드 CLI를 실행하세요:

sh
npx @trpc/upgrade
sh
npx @trpc/upgrade

프롬프트가 표시되면 Migrate Hooks to xxxOptions API 및 Migrate context provider setup 변환을 선택하세요.

점진적 마이그레이션​

새 클라이언트와 기존 클라이언트는 서로 호환되며 동일한 애플리케이션에서 함께 사용할 수 있습니다. 즉, 애플리케이션의 새로운 부분에서 새 클라이언트를 사용해 마이그레이션을 시작하고, 기존 사용 부분은 적절한 시점에 점진적으로 마이그레이션할 수 있습니다. 가장 중요한 것은 Query Keys가 동일하므로 새 클라이언트와 기존 클라이언트를 함께 사용하면서도 TanStack Query의 캐싱 기능을 계속 활용할 수 있다는 점입니다.

쿼리 마이그레이션​

기존 쿼리는 다음과 같습니다

tsx
import { trpc } from './trpc';
 
function Users() {
  const greetingQuery = trpc.greeting.useQuery({ name: 'Jerry' });
 
  // greetingQuery.data === 'Hello Jerry'
}
tsx
import { trpc } from './trpc';
 
function Users() {
  const greetingQuery = trpc.greeting.useQuery({ name: 'Jerry' });
 
  // greetingQuery.data === 'Hello Jerry'
}

다음과 같이 변경됩니다

tsx
import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
 
  const greetingQuery = useQuery(trpc.greeting.queryOptions({ name: 'Jerry' }));
 
  // greetingQuery.data === 'Hello Jerry'
}
tsx
import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
 
  const greetingQuery = useQuery(trpc.greeting.queryOptions({ name: 'Jerry' }));
 
  // greetingQuery.data === 'Hello Jerry'
}

무효화 및 기타 QueryClient 사용법 마이그레이션​

기존 무효화 패턴은 다음과 같습니다

tsx
import { trpc } from './trpc';
 
function Users() {
  const utils = trpc.useUtils();
 
  async function invalidateGreeting() {
    await utils.greeting.invalidate({ name: 'Jerry' });
  }
}
tsx
import { trpc } from './trpc';
 
function Users() {
  const utils = trpc.useUtils();
 
  async function invalidateGreeting() {
    await utils.greeting.invalidate({ name: 'Jerry' });
  }
}

다음과 같이 변경됩니다

tsx
import { useQueryClient } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
  const queryClient = useQueryClient();
 
  async function invalidateGreeting() {
    await queryClient.invalidateQueries(
      trpc.greeting.queryFilter({ name: 'Jerry' }),
    );
  }
}
tsx
import { useQueryClient } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
  const queryClient = useQueryClient();
 
  async function invalidateGreeting() {
    await queryClient.invalidateQueries(
      trpc.greeting.queryFilter({ name: 'Jerry' }),
    );
  }
}

이는 모든 QueryClient 사용에 동일하게 적용됩니다. tRPC의 useUtils를 사용하는 대신 이제 TanStack 문서를 직접 참조하면 됩니다.

뮤테이션 마이그레이션​

기존 뮤테이션은 다음과 같을 수 있습니다

tsx
import { trpc } from './trpc';
 
function Users() {
  const createUserMutation = trpc.createUser.useMutation();
 
  createUserMutation.mutate({ name: 'Jerry' });
}
tsx
import { trpc } from './trpc';
 
function Users() {
  const createUserMutation = trpc.createUser.useMutation();
 
  createUserMutation.mutate({ name: 'Jerry' });
}

다음과 같이 변경됩니다

tsx
import { useMutation } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
 
  const createUserMutation = useMutation(trpc.createUser.mutationOptions());
 
  createUserMutation.mutate({ name: 'Jerry' });
}
tsx
import { useMutation } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
 
  const createUserMutation = useMutation(trpc.createUser.mutationOptions());
 
  createUserMutation.mutate({ name: 'Jerry' });
}