tRPC
https://gyazo.com/4585ae547641f79c5a48ba55d616791f
TypeScriptでtypesafeにやり取りするRPC framework
TypeScriptで実行時型検査と併用すると良い
docsではzodを使っている
serverもclientも型安全にする
最初の開発者は@colinhacks
現在は@KATT
website
github
docs
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
tRPCのRouter
useSuspenseQuery
tRPCのBatching
#WIP
#??
localで開発している時に、envの内容をみて
local serverを見るか、
dev serverを見るか、
を切り替えたい
これreacat-queryのやつ使ったら、それしかできないノアk
vanillaと両立できないのか
まあそれに合わせてapiを実装すればどうにかなるか
BFFみたいに、clientにはrepositoryがない感じになるのか
ものレポ直撃responseみたいなのをserverは返す
ここはかなり密結合になる
実際めっちゃ記述量減って楽なんだけど、楽すぎて柔軟性がない感じがある
client側のrepositoryは用意しない感じの構成になる
useInfiniteQueryを使うなら、必ずCursor-based Paginationを採用しないといけない
まあ自然ではあるのか
あまり逆らう理由がない
procedure
https://trpc.io/docs/procedures
各endpointのイメージ
publicProcedureってなに #??
observable instanceを返す
#??
createTRPCNext
https://trpc.io/docs/nextjs#createtrpcnext-options
useQuery.dataの型がおかしい
SerializeObject<UndefinedToOptional<Hoge>>[] | undefined
cors
https://gyazo.com/71202d67f27a2edc6babf9635a0502e8 https://speakerdeck.com/quramy/t3-stack-and-typescript-ecosystem?slide=11
https://zenn.dev/terrierscript/articles/2022-08-20-trpc-utils
https://zenn.dev/praha/articles/encouragement-trpc
docs読み
tRPC
Awesome tRPC Collection
Usage with Next.js
@trpc/server
Define Procedures
https://trpc.io/docs/procedures#reusable-base-procedures
Context
https://zenn.dev/terrierscript/articles/2022-08-20-trpc-utils#context
routerの共通の前処理とかをやる
CookieからAuthしたりなど
API Handler
Middlewares
Server Side Calls
Authorization
Output Validation
Inferring Types
https://trpc.io/docs/client/infer-types
個々のrouterの型などを簡単に取れる
code:ts
type RouterInput = inferRouterInputs<AppRouter>;
type RouterOutput = inferRouterOutputs<AppRouter>;
type PostCreateInput = RouterInput'post''create';
type PostCreateOutput = RouterOutput'post''create';
Error Handling
Error Formatting
Data Transformers
https://zenn.dev/terrierscript/articles/2022-08-20-trpc-utils#transform機能
例えば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()
https://trpc.io/docs/reactjs/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