tRPC
https://gyazo.com/4585ae547641f79c5a48ba55d616791f
serverもclientも型安全にする
Next.jsのようなモノレポが前提
Next.jsやreact-queryやzodを使用することを一部前提している
特定のlibraryにロックオンしている点はやや抵抗あるが、使ってみると実際めっちゃ楽
backend書いて、型エラー出して、それに従ってfrontend書いたら完成するmrsekut.icon
従来の書き方だと、
backendでは、endpoint定義して、その入口ではzodで検証し、
frontendでは、URLとquery string定義して、入り口ではzodで検証し、
というように、endpointをいちいち用意したり、二重で検証が必要になったりする
これを、backendの入り口近くに一つzodで定義すれば、
endpointが完成し、react-queryに型が付く、というのが自動で完了する
あとは、react-queryのkeyを定義しなくて良い、なども地味に楽mrsekut.icon
localで開発している時に、envの内容をみて
local serverを見るか、
dev serverを見るか、
を切り替えたい
これreacat-queryのやつ使ったら、それしかできないノアk
vanillaと両立できないのか
まあそれに合わせてapiを実装すればどうにかなるか
BFFみたいに、clientにはrepositoryがない感じになるのか
ものレポ直撃responseみたいなのをserverは返す
ここはかなり密結合になる
実際めっちゃ記述量減って楽なんだけど、楽すぎて柔軟性がない感じがある
client側のrepositoryは用意しない感じの構成になる
まあ自然ではあるのか
あまり逆らう理由がない
procedure
各endpointのイメージ
observable instanceを返す
createTRPCNext
useQuery.dataの型がおかしい
SerializeObject<UndefinedToOptional<Hoge>>[] | undefined
cors
https://gyazo.com/71202d67f27a2edc6babf9635a0502e8 https://speakerdeck.com/quramy/t3-stack-and-typescript-ecosystem?slide=11
docs読み
tRPC
Awesome tRPC Collection
Usage with Next.js
@trpc/server
Define Procedures
Context
routerの共通の前処理とかをやる
CookieからAuthしたりなど
API Handler
Middlewares
Server Side Calls
Authorization
Output Validation
Inferring Types
個々のrouterの型などを簡単に取れる
code:ts
type RouterInput = inferRouterInputs<AppRouter>;
type RouterOutput = inferRouterOutputs<AppRouter>;
Error Handling
Error Formatting
Data Transformers
Metadata
Response Caching
Adapters
AWS Lambda
Express
Fastify
Fetch / Edge Runtimes
@trpc/client
Create Vanilla Client
Aborting Procedure Calls
Links
HTTP Link
HTTP Batch Link
WebSocket Link
Split Link
Logger Link
Create Custom Header
CORS & Cookies
@trpc/react-query
Usage with React
useQuery()
useMutation()
useInfiniteQuery()
useContext()
useQueries()
getQueryKey()
@trpc/next
Usage with Next.js
Server-Side Rendering (SSR)
Static Site Generation (SSG)
SSG Helpers
Starter Projects
Extra information
FAQ / Troubleshooting
HTTP RPC Specification
Subscriptions / WebSockets
Further Reading
Migrate from v9 to v10