tRPC

ティーアールピーシー

tRPC を分かりやすく

tRPC とは、TypeScript で書かれた高速な RPC フレームワークです。tRPC は、サーバーサイドでの API の構築を簡単にします。特に、Next.js との連携が容易であり、API サーバーを簡単に構築することができます。

tRPC は、以下の特徴を持っています。

TypeScript で書かれている
高速である
Next.js との連携が容易である
クライアントコードを自動生成する

tRPC の使い方

tRPC を使うには、以下の手順が必要です。

tRPC クライアントをインストール
tRPC サーバーを作成する
tRPC サービスを定義する
tRPC サーバーを実行する

1. tRPC クライアントをインストール

tRPC クライアントをインストールするには、以下のコマンドを実行します。

npm install trpc

2. tRPC サーバーを作成する

tRPC サーバーを作成するには、以下のコマンドを実行します。

npm install trpc-server

3. tRPC サービスを定義する

tRPC サービスを定義するには、以下のようなコードを書きます。

import { createRouter } from 'trpc'
import { context } from './context'

const appRouter = createRouter()
  .query('hello', {
    resolve() {
      return 'world'
    },
  })
  .query('userById(id: number)', {
    resolve({ id }) {
      return context.users.find((user) => user.id === id)
    },
  })
  .mutation('updateUser(id: number, data: UpdateUserData)', {
    input: {
      data: {
        firstName: 'string',
        lastName: 'string',
        age: 'number',
      },
    },
    async resolve({ id, data }) {
      const user = context.users.find((user) => user.id === id)
      if (!user) {
        throw new Error(`User with ID ${id} not found`)
      }

      user.firstName = data.firstName
      user.lastName = data.lastName
      user.age = data.age

      return user
    },
  })

export default appRouter

この例では、hello、userById、updateUser という 3 つの API を定義しています。

4. tRPC サーバーを実行する

tRPC サーバーを実行するには、以下のようなコードを書きます。

import express from 'express'
import { createNextServer, createRouter } from 'trpc'
import appRouter from './router'

const app = express()

app.use('/trpc', createNextServer({ router: appRouter }))

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})

この例では、Express を使って tRPC サーバーを実行しています。createNextServer 関数を使うことで、Next.js との連携が容易になります。

tRPC は、TypeScript で書かれた高速な RPC フレームワークであり、Next.js とも連携することができます。API サーバーを簡単に構築したい場合には、tRPC を利用することをおすすめします。

Next.js を学ぶ一覧へ