1. HOME
  2. ブログ
  3. IT技術
  4. tRPCを触ってみる

tRPCを触ってみる

気になっていたtRPCを実際に触ってみた記録です!

tRPCとは

公式から引用させてください。

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.
引用: https://trpc.io/docs/#introduction

この通りで、スキーマ等なしで、簡単に型安全なAPIを作成することができます!

ちなみに、tRPCは、TypeScriptを想定して作られているので、TypeScript以外での使用はできません><
逆に、TypeScriptを使ったプロジェクトでは、かなり有用なツールになり得ます。

サンプルアプリを構築してみる

今回はNext.jsを使って、tRPCのサンプルアプリを作ってみようと思います。

Next.jsのAPI Routesを利用して、tRPCの制限をかけたAPIを作成し、クライアント側でそのAPIを呼び出す、という形を想定しています。

また、ディレクトリ構成は、公式がおすすめしていた以下の構成をとるようにします。

Next.jsをインストール

tRPCのモジュールをインストール

サーバー側のtRPCのセットアップ

APIを提供するサーバー側のセットアップを行なっていきます。

tRPCのインスタンス生成

tRPCを使用する上で必要なものを用意します。

ルーターを作成する

疎通確認のためのAPI、healthcheckのルートを追加してます。

API/APIハンドラーを追加

今回は、Next.js API Routes対象の/api/trpc/[trpc]にエンドポイントを置きます。

APIにアクセスしてみる

この時点で、http://localhost:3000/api/trpc/healthcheck にアクセスすると、以下のレスポンスが返ってきました!

Contextを追加してみる

tRPCにはContextという機能があり、全てのtRPCプロシージャがアクセス可能なデータを格納できます。

認証情報の共有などに便利ですが、今回はCookieを共有させてみます。

1. Contextの型定義&生成処理を作成する

2. initTRPCに連携する

3. 試しに取得してみる

ここではmiddleware内で取得していますが、プロシージャ内でも取得できます。

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

_app.tsxの変更

tRPCの高階コンポーネントをAppに適用します。

tRPCのhookを用意する

APIリクエストしてみる

先ほど確認用のルート(healthcheck)を追加したので、クライアントから呼び出してみます。

http://localhost:3000/ にアクセスしてみると、無事に取得したデータが表示されていました!

セットアップ完了

これでクライアントと、tRPCベースのAPIの疎通もできました!

意外と簡単に構築でき、びっくりです。

APIのinputの型付け

tRPCといえば、APIの型付けができる点が魅力ポイントなので、やってみます!

サーバー側のルート追加

サブルーターを作る

今回追加するルートに当たるサブルーターを用意します。

今回はお試しなので、数字を受け取って、その数字の分だけ1を返すAPIを作ります。
inputとしては、1~50までのnumbercount を受け取ります。

今回はバリデーションライブラリとして、Zodを使用していますが、YupSuperstructも使用できます。

サブルーターを全体ルーターに組み込み

作成したサブルーターを全体ルーターに組み込みます。

クライアント側で呼び出す

APIリクエストする

クライアント側から呼び出します。

通信を確認してみる

今回、最初に作ったヘルスチェックのクエリと、新しく作ったリピートクエリを2つ呼び出していましたが、エンドポイントも1つになって呼び出されています!

ちなみに、複数のAPIがまとめてコールされているのは、httpBatchLinkやbatchingの設定をバッチ処理するように指定しているからです。
もちろん、個別に実行したい場合は、設定を変更すればOKです。

指定したinputの型以外を送信してみる

1~50の範囲外の値をinputに入れてみました。

結果は、エラー(400 Bad Request)となり、適合しないinputでは通信が失敗するようになっています!

outputの型付け

レスポンスに当たるoutputの型付けも以下のように簡単にできます。

ちなみに、アウトプットのバリデーションに引っかかった場合は、デフォルトでは以下のようなレスポンスが返ってきました。

 

まとめ

今回は、tRPCの基本的な部分を触ってみました!

今回はNext.jsでしたが、他の技術でも利用可能です。公式でボイラープレートやアダプターなど公開されているので、ぜひチェックしてみてください。
https://trpc.io/docs/awesome-trpc

書いた人はこんな人

岡坂(エンジニア)
岡坂(エンジニア)
Webエンジニア。
好きなものはフルーツタルト。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア