본문으로 건너뛰기
버전: 11.x

클래식 React 클라이언트에서 마이그레이션

마이그레이션을 위한 몇 가지 접근 방식이 있으며, 이 라이브러리는 클래식 클라이언트와 상당한 차이가 있으므로 한 번에 완료하는 것을 기대하지 않습니다. 그러나 아마도 다음 조합을 시도해 보실 것입니다...

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' });
}