tRPC入門

Transcript

1. tRPC入門 フロントもバックもTypeScriptならtRPCでスキーマ定義して最高の開発体験を 手に入れよう 2024/05/09 kansai.ts#6
2. いづりょー #EngineeringManager #SoftwareEngineer #React #TypeScript #Rust入門中 #Sprocket #Web接客 X → @is_ryo bsky → @is-ryo.bsky.social
3. 今日は tRPC について話します
4. ※tRPC@11-RCのバージョンでのお話に なります
5. tRPCとは？ • tRPCとは、TypeScript Remote Procedure Callの略 • REST APIやGraphQLの代替として注目されている • ただし、フロントエンドとバックエンドともにTypeScriptを採用する必要がある ◦ 実装言語、フレームワークの自由度が無い • サーバサイドで定義した関数の引数と戻り値がクライアントサイドに自動で共有さ れる ◦ クライアントの実装で型エラーを吐いてくれるので、型安全な実装ができる • バックエンドで関数を定義して、クライアントで呼ぶだけで良い
6. なぜtRPCなのか？ • APIのスキーマ定義としてよく利用されるOpenAPIやGraphQLは何かし らの定義ファイルを間に用意して、フロントとバックでそれぞれ定義ファイ ルを読み込んで、そこから型情報などを生成する • ただこの定義ファイルの取り扱いに難儀することがあると思う(個人的にか なり難儀している) • tRPCではこの定義ファイルを持つ必要がなく、バックエンドのコードそのも のが定義ファイルの役割をしてくれるという代物
7. 始め方はとても簡 単 • npm init • npm i @trpc/server zod • touch index.ts • npx ts-node index.ts
8. フロントで型をどう 扱うか① ※Reactで使う例 バックエンド側のAppRouter をimportして createTRPCReactの GenericsにAppRouterの typeを入れてClientを作る trpc.ts
9. フロントで型をどう 扱うか② App.tsxでProviderの設定を する。 App.tsx
10. フロントで型をどう 扱うか③ 作成したClientを使ってQuery したりMutateしたりする。 型補完が効くので、レスポンス の方やリクエストボディの型な どがすぐにわかる。嬉しい。 Index.tsx
11. フロントで型をどう 扱うか④ レスポンスの型を知りたい時は レスポンスの型を知りたい時は trpc.tsで宣言した RouterOutputsを使うことで、 レスポンスの型を取れる。 PropsにtRPCのレスポンスを 渡したいときに役立つ。嬉し い。 Child.tsx
12. これでtRPCを利用できる状態になった
13. なったけど……
14. 認証の仕組みは必須だよね？ だから調べてみた
15. Tokenで認証した い① middlewareを使って認証す ることができる。 こんな風にContextHandler を作って→ context.ts
16. Tokenで認証した い② middlewareを使って認証す ることができる。 Router起動するところで middlewareに指定する→ ※このときExpressのアダプ ターを使わないといけないので 注意。 index.ts
17. Tokenで認証した い③ 個別に認証を走らせたい場合 は、procedureを別で用意す ることもできる。 Contextでheaderの値を procedureに渡すようにして→ context.ts
18. Tokenで認証した い④ 認証をするためのprocedure を作成して、Routerでこの authProcedureを使うことで、 そのエンドポイントでは認証を することができる trpc.ts
19. Tokenで認証した い⑤ フロントからのリクエストヘッ ダーにTokenを入れたい場合 は、trpcClientを作るところで headersにTokenを入れるよう にできる。 App.tsx
20. まとめ • tRPCを使うとスキーマファイルの管理から解放される • ただフロントもバックもTSであることという制約がある • 最近フロントもバックもTSでいいのでは？という派閥があるので、その派 閥の方々には特におすすめしたい • React用のエコシステムが整備されているので、とても導入しやすい • tRPCを動かす環境ごとにアダプターが用意されている ◦ ExpressとかNextとかとか
21. Thanks!!!