React Query インテグレーション (Classic)

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

ヒント

これは React Query の「Classic」インテグレーションに関するドキュメントです（現在もサポートは継続していますが）。新規の tRPC プロジェクトを TanStack React Query で始める場合、推奨される方法ではありません。代わりに新しい TanStack React Query インテグレーションの使用をお勧めします。

tRPC は React とファーストクラスで統合されます。内部的には非常に人気のある @tanstack/react-query のラッパーに過ぎません。そのため、React Query の使用方法について詳しく学ぶために、公式ドキュメントに目を通すことをお勧めします。

Next.js を使用している場合は、代わりに Next.js 向けの統合の使用をお勧めします。

❓ Do I have to use an integration?

No! The integration is fully optional. You can use @tanstack/react-query using just a vanilla tRPC client, although then you'll have to manually manage query keys and do not get the same level of DX as when using the integration package.

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

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

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

components/PostList.tsx
tsx
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 アプリ全体で安全性が確保されます