メインコンテンツへスキップ
バージョン: 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 { useQuery, 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 { useQuery, 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' });
}