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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Haruki Murasaki
October 27, 2022
Programming
0
630
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
480
Other Decks in Programming
See All in Programming
オブザーバビリティ駆動開発って実際どうなの?
yohfee
3
810
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
nrslib
15
3k
20260228_JAWS_Beginner_Kansai
takuyay0ne
5
480
AHC061解説
shun_pi
0
360
Vuetify 3 → 4 何が変わった?差分と移行ポイント10分まとめ
koukimiura
0
120
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
kztakasaki
2
550
社内規程RAGの精度を73.3% → 100%に改善した話
oharu121
13
7.9k
encoding/json/v2のUnmarshalはこう変わった:内部実装で見る設計改善
kurakura0916
0
390
SourceGeneratorのマーカー属性問題について
htkym
0
180
「抽象に依存せよ」が分からなかった新卒1年目の私が Goのインターフェースと和解するまで
kurogenki
0
100
Claude Codeログ基盤の構築
giginet
PRO
7
2.5k
Takumiから考えるSecurity_Maturity_Model.pdf
gessy0129
1
140
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Mind Mapping
helmedeiros
PRO
1
110
Building Adaptive Systems
keathley
44
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.4k
Deep Space Network (abreviated)
tonyrice
0
88
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
300
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Testing 201, or: Great Expectations
jmmastey
46
8.1k
The Curse of the Amulet
leimatthew05
1
9.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4k
エンジニアに許された特別な時間の終わり
watany
106
240k
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