※弊社のエンジニア記事になります。

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を呼び出す、という形を想定しています。

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

// 引用: https://trpc.io/docs/nextjs/setup#recommended-file-structure
.
├── prisma  # <-- if prisma is added
│   └── [..]
├── src
│   ├── pages
│   │   ├── _app.tsx  # <-- add `withTRPC()`-HOC here
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc].ts  # <-- tRPC HTTP handler
│   │   └── [..]
│   ├── server
│   │   ├── routers
│   │   │   ├── _app.ts  # <-- main app router
│   │   │   ├── post.ts  # <-- sub routers
│   │   │   └── [..]
│   │   ├── context.ts   # <-- create app context
│   │   └── trpc.ts      # <-- procedure helpers
│   └── utils
│       └── trpc.ts  # <-- your typesafe tRPC hooks
└── [..]

Next.jsをインストール

yarn create next-app --typescript

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

npm install @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod

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

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

tRPCのインスタンス生成

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

// /src/server/trpc.ts
import { initTRPC, TRPCError } from '@trpc/server';

// initTRPCはアプリ内で一度のみ使用する
const t = initTRPC.create({
  errorFormatter({ shape }) {
    return shape;
  },
});

export const router = t.router;

// API毎のプロシージャのベースとなるプロシージャ。認証別など、複数のベースプロシージャを定義できる
export const publicProcedure = t.procedure;

// tRPC上のミドルウェア
export const middleware = t.middleware;

// 全てのプロシージャをフラットに1つの名前空間にする場合に使用する
export const mergeRouters = t.mergeRouters;

ルーターを作成する

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

// /src/server/routers/_app.ts
import { publicProcedure, router } from "../trpc";

export const appRouter = router({
    healthcheck: publicProcedure.query(() => 'fine!')
});

export type AppRouter = typeof appRouter;

API/APIハンドラーを追加

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

// src/pages/api/trpc/[trpc].ts
import * as trpcNext from '@trpc/server/adapters/next';
import { appRouter } from '@/server/routers/_app';

export default trpcNext.createNextApiHandler({
  router: appRouter,
  onError({ error }) {
    if (error.code === 'INTERNAL_SERVER_ERROR') {
      console.error('Something went wrong', error);
    }
  },
  batching: {
    enabled: true,
  },
});

APIにアクセスしてみる

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

{
    "result": {
        "data": "fine!"
    }
}

記事の続きは以下URLからご覧ください。

https://rightcode.co.jp/blog/information-technology/trpc

【2024年卒】新卒採用エントリー開始しました！

特設ページはこちら：https://rightcode.co.jp/recruit/entry-2024

インターン募集！未経験ok、チャレンジ精神ある方求む

ゲームプランナー：https://rightcode.co.jp/recruit/intern-game-planner

メディア運営：https://rightcode.co.jp/recruit/intern-media

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクする仕事をしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「スマホアプリエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「エンジニアリングマネージャー」「営業」などを積極採用中です！

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode