tRPC
TypeScriptでtypesafeにやり取りするRPC framework
TypeScriptで実行時型検査と併用すると良い
docsではzodを使っている
serverもclientも型安全にする
最初の開発者は@colinhacks
現在は@KATT
Next.jsのようなモノレポが前提
Next.jsやreact-queryやzodを使用することを一部前提している
特定のlibraryにロックオンしている点はやや抵抗あるが、使ってみると実際めっちゃ楽
backend書いて、型エラー出して、それに従ってfrontend書いたら完成する
従来の書き方だと、
backendでは、endpoint定義して、その入口ではzodで検証し、
frontendでは、URLとquery string定義して、入り口ではzodで検証し、
というように、endpointをいちいち用意したり、二重で検証が必要になったりする
これを、backendの入り口近くに一つzodで定義すれば、
endpointが完成し、react-queryに型が付く、というのが自動で完了する
あとは、react-queryのkeyを定義しなくて良い、なども地味に楽
>#WIP
localで開発している時に、envの内容をみて
local serverを見るか、
dev serverを見るか、
を切り替えたい
これreacat-queryのやつ使ったら、それしかできないノアk
vanillaと両立できないのか
まあそれに合わせてapiを実装すればどうにかなるか
BFFみたいに、clientにはrepositoryがない感じになるのか
ものレポ直撃responseみたいなのをserverは返す
ここはかなり密結合になる
実際めっちゃ記述量減って楽なんだけど、楽すぎて柔軟性がない感じがある
client側のrepositoryは用意しない感じの構成になる
useInfiniteQueryを使うなら、必ずCursor-based Paginationを採用しないといけない
まあ自然ではあるのか
あまり逆らう理由がない
procedure
各endpointのイメージ
publicProcedure ってなに #?? observable instanceを返すcreateTRPCNext
useQuery.dataの型がおかしい
SerializeObject<UndefinedToOptional<Hoge>>[] | undefined cors
>
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の型などを簡単に取れる
tstype RouterInput = inferRouterInputs<AppRouter>;
type RouterOutput = inferRouterOutputs<AppRouter>;
type PostCreateInput = RouterInput['post']['create'];
type PostCreateOutput = RouterOutput['post']['create'];Error Handling
Error Formatting
Data Transformers
例えばJSONをの代わりにsuperjsonを使って変換してからやり取りするなど
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