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

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

tRPCクライアント

「Vanilla」tRPCクライアントを使用すると、APIプロシージャをあたかもローカル関数であるかのように呼び出すことができ、シームレスな開発体験を実現します。

ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
 
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
 
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };

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

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

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

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

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

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

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