メインコンテンツへスキップ
バージョン: 11.x

tRPC クライアント

ネイティブの tRPC クライアントを使用すると、API プロシージャをローカル関数のように呼び出して、シームレスな開発環境を実現できます。

ts
import type { AppRouter } from '../path/to/server/trpc';
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
ts
import type { AppRouter } from '../path/to/server/trpc';
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };

ネイティブクライアントを使用するタイミング?

次の 2 つの状況でこのクライアントを使用することが考えられます。

  • 公式の統合がないフロントエンドフレームワークの場合
  • TypeScript で記述された別個のバックエンドサービスの場合

ネイティブクライアントを使用しないタイミング?

  • クライアントを使用して React コンポーネントからプロシージャを呼び出すことはできますが、通常は React Query の統合 を使用する必要があります。これは、ロードおよびエラーの状態の管理、キャッシュ、無効化などの多くの追加機能を提供します。
  • 同じ API インスタンスのプロシージャを呼び出す際にはこのクライアントを使用しないことをお勧めします。これは、呼び出しがネットワークレイヤーを通過する必要があるためです。現在の API でプロシージャを呼び出すための完全な推奨事項については、こちらをご覧ください。