React Query インテグレーション

非公式ベータ版翻訳

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

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

ヒント

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

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