メインコンテンツへスキップ
バージョン: 10.x
非公式ベータ版翻訳

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

tRPCクライアント

「Vanilla」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' };

Vanillaクライアントを使用するケース​

主に以下の2つのシナリオでこのクライアントを使用することになるでしょう:

  • 公式の統合が提供されていないフロントエンドフレームワークを使用する場合

  • TypeScriptで記述された別のバックエンドサービスを使用する場合

Vanillaクライアントを使用すべきでないケース​

  • Reactコンポーネントからプロシージャを呼び出すためにこのクライアントを使用することも可能ですが、通常はReact Query連携を使用すべきです。これにはローディング状態やエラー状態の管理、キャッシュ、無効化など多くの追加機能が備わっています。

  • 同じAPIインスタンス内のプロシージャを呼び出す場合には、このクライアントの使用は推奨しません。これは呼び出しがネットワーク層を通過する必要があるためです。現在のAPI内でプロシージャを呼び出す方法に関する完全な推奨事項については、こちらで詳細を確認できます。