Vanillaクライアント

非公式ベータ版翻訳

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

tRPCの真髄は、コード生成に依存せずに_厳密な型付け_がされたAPI呼び出しを実現することです。フルスタックTypeScriptプロジェクトでは、サーバーの型を直接_クライアントにインポート_できます！これがtRPCの核心的な仕組みです。

ルートtRPCルーターが定義されているファイルから、クライアントにAppRouter型をインポートします。この単一の型がAPI全体の型シグネチャを表現します。

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

import typeキーワードを使用すると、ファイルシステム上の_任意のTypeScriptファイル_から型をインポートできます。さらにimport typeでインポートできるのは型のみであり、コードではありません。そのため、誤ってサーバーサイドのコードをクライアントにインポートする危険性はありません。import typeによるすべての呼び出しは、コンパイル後のJavaScriptバンドルから_常に完全に削除_されます（出典）。

tRPCクライアントの初期化

@trpc/clientからcreateTRPCClientメソッドを使って型安全なクライアントを作成します：

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

ご覧の通り、createTRPCClientの型引数としてAppRouterを渡しています。これにより厳密な型付けがされたclientインスタンスが返されます：

client.ts
ts
const bilbo = await client.query('getUser', 'id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.mutation('createUser', { name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };

client.ts
ts
const bilbo = await client.query('getUser', 'id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.mutation('createUser', { name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };