tRPCを使って型安全なAPIを作る

はじめに

多すぎるパラメータのやりとりに疲れてしまった。
誰か事前に不整合を教えてください。
そんなときに🙇‍♂

tRPCとは？

tRPCは、TypeScriptのフルパワーを活用し、フロントエンドとバックエンド間の通信においてエンドツーエンドの型安全性を提供します。GraphQLやREST APIと比較して、追加のコード生成ステップが不要で、設定が簡単な点が特徴です。

サーバーサイドの実装

サーバー側では、APIエンドポイントとして使用するProcedureを定義します。

// server/routers/_app.ts
import { createRouter } from '@trpc/server';

export const appRouter = createRouter()
  .query('hello', {
    resolve() {
      return 'Hello tRPC';
    },
  });
// serverの型をエクスポート
export type AppRouter = typeof appRouter;

• createRouter()関数は、新しいルータを作成します。これはtRPCのAPIエンドポイントの集合です。
• .query('hello', {...})は、helloという名前のクエリをルータに追加します。このクエリは、リクエストが来た時に文字列'Hello tRPC'を返す関数を持っています。

サーバーの設定を行います。

// server/index.ts
import * as trpc from '@trpc/server';
import { appRouter } from './routers/_app';

const server = trpc
  .createServer({
    router: appRouter,
    createContext: () => null,
  })
  .listen(8080);

• trpc.createServer({...})は、新しいtRPCサーバーインスタンスを作成します。
• router: appRouterで、先ほど定義したルータ（APIエンドポイントの集合）をサーバーに割り当てます。
• createContext: () => nullは、リクエストごとにオブジェクトを生成するための関数を定義しています。この例では単純化のためにnullを返しています。
• .listen(8080)は、ポート8080でサーバーをリッスンし、外部のリクエストを受け付けるようにします。

クライアントサイドの実装

クライアント側では、tRPCのクエリフックを使用してAPIを呼び出します。

// client/index.tsx
import { createReactQueryHooks } from '@trpc/react';
import type { AppRouter } from '../server/routers/_app';

const trpc = createReactQueryHooks<AppRouter>();

function App() {
  const hello = trpc.useQuery(['hello']);
  
  return <div>{hello.data}</div>;
}

• createReactQueryHooks<AppRouter>()は、サーバーサイドのルータの型を使用して、tRPCのクエリフックを作成します。これにより、サーバーサイドのエンドポイントとの通信が型安全になります。
• const hello = trpc.useQuery(['hello']);は、helloという名前のクエリを実行するフックを使用します。このクエリは、サーバーから'Hello tRPC'という文字列を取得します。

tRPCを使用する利点

エンドツーエンドの型安全性: バックエンドとフロントエンドの間での型の不整合を防ぎます。
追加のコード生成が不要: GraphQLのようにスキーマファイルやコード生成ツールは不要です。
効率的な開発体験: 開発者の生産性を高め、バグの発生を減少させます。

まとめ

tRPCは、TypeScriptを利用するプロジェクトにおいて、迅速で型安全な開発体験を提供します。この記事では、tRPCの基本的なセットアップと簡単な使い方を紹介しました。