5分でtRPCに入門する

5分で tRPCに入門する 2022/10/27 @purp1eeeee

自己紹介むらさき - 株式会社HRBrainのソフトウェアエンジニア - TypeScript/React/Go - TwitterとGitHub: purp1eeeee

tRPCとは

tRPCとは - TypeScriptに特化したHTTP通信ライブラリ - スキーマを書いたりコード生成をする必要がない - エンドポイントの実装からapi clientの型を生成する - サーバーとクライアント間で型を共有する
- monorepoと相性が良い - Next.jsのAPI Routesも

tRPC入門登場人物 - next 13.0.0 - react 18.2.0 - react-dom
18.2.0 - @trpc/server - @trpc/client - @trpc/next - @trpc/react-query - @tanstack/react-query - zod

tRPC入門エンドポイントの定義 /server/trpc.ts 最初にtRPCの初期化とユーティリティをexportするエントリーファイルを準備

tRPC入門エンドポイントの定義 /pages/api/trpc/[trpc].ts request bodyなどはzodやyupなどで定義するそれぞれのqueryやmutationに渡すcallback内で DBへのアクセスや加工を行う 25行目のAppRouterがポイントで、この型をclient にジェネリクスとして渡すことで型安全を保証する

tRPC入門クライアントの定義 /utils/trpc.ts エンドポイントの指定やloggerの様な middleware、カスタムヘッダーや CORSの設定をする /pages/_app.tsx trpcが内部でreact-queryのhook を生成するためprovider対応のためHOCを行う

tRPC入門 APIを叩いてみる /pages/index.tsx trpcが生成しているhookを呼ぶ引数や返り値は全て型推論が効いている

tRPC入門 APIを叩いてみる

まとめ - 少ない記述で型安全なAPI間やりとりを実現できる - Next.jsと相性が良さそう - 認証認可やエラー処理も試したい最終形はこちら：https://github.com/purp1eeeee/trpc-practice

5分でtRPCに入門する

5分でtRPCに入門する

Haruki Murasaki

More Decks by Haruki Murasaki

Other Decks in Programming

Featured

Transcript