5分でtRPCに入門する

2022/10/27
https://rakus.connpass.com/event/258984/

Transcript

1. 5分で tRPCに入門する 2022/10/27 @purp1eeeee
2. 自己紹介 むらさき - 株式会社HRBrainのソフトウェアエンジニア - TypeScript/React/Go - TwitterとGitHub: purp1eeeee
3. tRPCとは
4. tRPCとは - TypeScriptに特化したHTTP通信ライブラリ - スキーマを書いたりコード生成をする必要がない - エンドポイントの実装からapi clientの型を生成する - サーバーとクライアント間で型を共有する - monorepoと相性が良い - Next.jsのAPI Routesも
5. 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
6. tRPC入門 エンドポイントの定義 /server/trpc.ts 最初にtRPCの初期化とユーティリティをexportするエントリーファイルを準備
7. tRPC入門 エンドポイントの定義 /pages/api/trpc/[trpc].ts request bodyなどはzodやyupなどで定義する それぞれのqueryやmutationに渡すcallback内で DBへのアクセスや加工を行う 25行目のAppRouterがポイントで、この型をclient にジェネリクスとして渡すことで型安全を保証する
8. tRPC入門 クライアントの定義 /utils/trpc.ts エンドポイントの指定やloggerの様な middleware、カスタムヘッダーや CORSの設定をする /pages/_app.tsx trpcが内部でreact-queryのhook を生成するためprovider対応の ためHOCを行う
9. tRPC入門 APIを叩いてみる /pages/index.tsx trpcが生成しているhookを呼ぶ 引数や返り値は全て型推論が効いて いる
10. tRPC入門 APIを叩いてみる
11. まとめ - 少ない記述で型安全なAPI間やりとりを実現できる - Next.jsと相性が良さそう - 認証認可やエラー処理も試したい 最終形はこちら：https://github.com/purp1eeeee/trpc-practice