Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
5分でtRPCに入門する
Search
Haruki Murasaki
October 27, 2022
Programming
0
560
5分でtRPCに入門する
2022/10/27
https://rakus.connpass.com/event/258984/
Haruki Murasaki
October 27, 2022
Tweet
Share
More Decks by Haruki Murasaki
See All by Haruki Murasaki
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
460
Other Decks in Programming
See All in Programming
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
2
150
ワンバイナリWebサービスのススメ
mackee
10
7.7k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
600
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
1
530
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
370
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
16
3.9k
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
1.9k
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
120
XSLTで作るBrainfuck処理系
makki_d
0
190
インターフェース設計のコツとツボ
togishima
2
690
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Statistics for Hackers
jakevdp
799
220k
Rails Girls Zürich Keynote
gr2m
94
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Balancing Empowerment & Direction
lara
1
280
Fireside Chat
paigeccino
37
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
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