メインコンテンツへスキップ

新たなTanStack React Query統合のご紹介

· 1分で読める
Julius Marminge
Julius Marminge
tRPC Core Team Member
Nick Lucas
Nick Lucas
tRPC Core Team Member
非公式ベータ版翻訳

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

tRPCのnextリリースで、新たなTanStack React Query統合が利用可能になりましたことをお知らせします。従来のReact Query統合と比較して、よりシンプルでTanStack Queryネイティブなアプローチを採用しており、独自クライアントでuseQueryやuseMutationをラップする代わりに、TanStack React QueryネイティブのQueryOptionsやMutationOptionsインターフェースを直接利用します。

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

この新クライアントでは、新規ユーザーが混乱しがちだった抽象化レイヤーを排除し、代わりにTanStack公式ドキュメントを参照している開発者にとって即座に馴染み深い、より直接的な作業方法を提供します。また、tRPC側の説明ドキュメントも少なくて済むようになります（もちろん導入ガイドは用意しています）。

なぜ変更するのか？​

詳細な背景は当時のRFCディスカッションこちらでご覧いただけますが、主な理由は以下の通りです：

  • 簡素化: 新クライアントはよりシンプルでTanStack Queryネイティブであり、QueryKeysやQueryOptions、MutationOptionsといった共通インターフェースのファクトリを提供します。これにより学習曲線が緩和され、公式TanStack Queryドキュメントをそのまま活用できます

  • 親和性: 既にTanStack Queryを使用している開発者にとってより親しみやすい設計です。アプリケーション内の他の処理でTanStack Queryを使用している場合でも、tRPCのために別の構文を使う必要がなくなります

  • React対応: 従来のReact Query統合は実際にフックのルールに違反しており、正しいリンター検査が不可能でした。さらにフックをプロパティとして受け渡すような、React Compiler下で問題を引き起こすパターンを助長していました。この点で新クライアントはよりイディオマティックなReact仕様に沿っています

  • 保守性: バージョン管理における課題として、TanStack Queryの変更（特にQueryClientに追加される新機能）とtRPCの歩調を合わせることが困難でした。ネイティブインターフェースという最小限の接点を利用することで、React Queryのサポートが容易になり、TanStackメンテナーが推奨するベストプラクティスにも沿えます

  • フィードバック: 前述のように従来クライアントは新規ユーザーにとって難解でしたが、RFCに対する反応は圧倒的に肯定的で、多くのユーザーがこのクライアントの利用に期待を寄せています。もちろん全員が即座に移行するわけではないため、従来クライアントも引き続き維持します

従来のtRPC React Query統合はどうなる？​

すぐになくなることはありません！長期的にメンテナンスを継続しますが、大きな新機能は追加されず、安定版として位置付けます。

新規プロジェクトには新TanStack React Query統合の利用を推奨し、既存プロジェクトは段階的な移行をご検討ください。

移行方法​

従来クライアントは長期にわたり維持されますが、新規プロジェクトでは新クライアントの利用を推奨し、進行中のプロジェクトは段階的移行をご検討ください。

両クライアントは互換性があり同一アプリケーション内で共存可能なため、ご自身のペースで移行できます。現在コミュニティ協力を大歓迎しているコードモッドも開発中です。これまでにコードモッドへ貢献いただいた@reaper氏に謝意を表します！

👉 移行ドキュメントを読む