tRPCを利用してBackendからFrontendまで統一的な型適用

対象とする読者

• tRPCを活用したいと思っている人

tRPCとは

tRPCとは、TypeScriptで書かれた高速なRPC（Remote Procedure Call）フレームワークです。tRPCを使用すると、スキーマやコード生成なしに型安全なAPIを簡単に構築および利用できるようになります。特に、Next.jsとの連携が容易であり、サーバーサイドでのAPIの構築を簡単にします。
※Copilotより

tRPCの基本的な型参照

具体的に記載するとリンク先にあるように

InputにもOutputにも型が付きクライアント・サーバー間で統一的に型を利用できます
例：query
Input：string
Output：user型

// Inferred types
const user = await trpc.userById.query('1');
       
const user: {
    name: string;
    id: string;
} | undefined

例：mutation
Input：{ name : string }
Output：createdUser型

const createdUser = await trpc.userCreate.mutate({ name: 'sachinraja' });
          
const createdUser: {
    name: string;
    id: string;
}

• 簡単なコンポーネントであれば、同じコンポーネント内で参照すればよいので、問題になりませんが、大体はコンポーネント分割してInputやOutputをパラメータとして参照したくなります

つまり

const user = await trpc.userById.query('1');

return <Profile user={user} />
// としたときに
---

interface Props {
  user : XXX
}
export const Profile: React.FC<Props> = (props) => {
// XXXが必要になります

DBから直接User型を持ってくることもできますが、userのパラメータが絞られていたりする場合に、絞り込むTypeを各Frontでも書く必要になり2度手間になります。

のでtRPCを介したINPUT,OUTPUTをそのまま型として参照したい

tRPCのOUTPUT型を参照する

tRPCのinferRouterOutputsを利用する

• Type定義

import { type inferRouterOutputs } from "@trpc/server";

export type RouterOutput = inferRouterOutputs<AppRouter>;

export type GetTodoOutput = RouterOutput["todo"]["getTodo"];

• Reactでの利用

const todo = await trpc.todo.getTodo.query('1');

return <Todo todo={todo} />
---

interface Props {
  todo : GetTodoOutput
}
export const Todo: React.FC<Props> = (props) => {
   const { todo } = props
   // tRPCのgetTodoのOutput型にアクセスできる
   console.log(todo.id)

• もしOutpuの中のオブジェクトをパラメータで渡したい場合の型参照

interface Props {
  obj : GetTodoOutput["someObj"]
}
export const Todo: React.FC<Props> = (props) => {
   const { obj } = props
   // tRPCのgetTodoのOutput型のオブジェクトにアクセスできる
   console.log(obj.data)

tRPCのINPUT型を参照する

tRPCのinferRouterInputsを利用する

• Type定義

import { type inferRouterInputs } from "@trpc/server";

export type RouterInput = inferRouterInputs<AppRouter>;

export type PostTodoInput = RouterInput["todo"]["postTodo"];

• Reactでの利用

const postMutation = await trpc.todo.postTodo.mutation('1');

const onSubmit = ()=>{
   // パラメータの型を指定できる
   const params: PostTodoInput = {
      title: "todoTitle",
      description: "todoDescription"
   }
   postMutation.mutate(params)
}