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

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

1. tRPCクライアントライブラリをインストールする​

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

npm install @trpc/server@next @trpc/client@next

2. アプリケーションルーターをインポートする​

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

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

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

3. tRPCクライアントを初期化する​

createTRPCClientメソッドでtRPCクライアントを作成し、APIを指す終端リンクを持つlinks配列を追加します。tRPCリンクの詳細については、こちらをクリックしてください。

client.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<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 { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<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' };

これで完了です！