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

tRPCクライアントのセットアップ

非公式ベータ版翻訳

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

1. tRPCクライアントライブラリのインストール​

お好みのパッケージマネージャーを使用して@trpc/clientライブラリをインストールし、必要な型を含む@trpc/serverも一緒にインストールしてください。

bash
npm install @trpc/client @trpc/server
bash
npm install @trpc/client @trpc/server

2. App Routerのインポート​

非公式ベータ版翻訳

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

クライアントアプリケーションに AppRouter 型をインポートします。この型はAPI全体の構造を保持します。

ts
import type { AppRouter } from '../server/router';
ts
import type { AppRouter } from '../server/router';
ヒント

import type を使用すると、コンパイル時に参照が削除されるため、誤ってサーバーサイドコードをクライアントにインポートするのを防げます。詳細はTypeScriptドキュメントを参照してください。

3. tRPCクライアントの初期化​

createTRPCProxyClientメソッドを使用してtRPCクライアントを作成し、APIを指す終端リンクを含むlinks配列を追加してください。tRPCリンクの詳細については、こちらをクリックしてご確認ください。

client.ts
ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});
client.ts
ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});

4. tRPCクライアントの使用​

内部的には型付けされたJavaScript Proxyが作成され、完全な型安全な方法でtRPC APIとやり取りできます：

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

これで準備完了です！