tRPCの紹介

tRPCの紹介

Transcript

1. tRPC の紹介 Press Space for next page
2. 自己紹介 📝 飯野陽平（wheatandcat ） 🏢 法人設立（合同会社UNICORN 代表社員） 💻 Work: シェアフル株式会社CTO 📚 Blog: https://www.wheatandcat.me/ 🛠 今までに作ったもの memoir ペペロミア MarkyLinky Atomic Design Check List
3. tRPC とは？ スキーマやコード生成なしで型安全なAPI の連携が行えるPRC フレームワーク 比較対象としては、GraphQL やOpenAPI などの技術に該当 TypeScript に特化しており、非常にシンプルに実装できる BFF として利用されることも多い
4. そもそもRPC とは？ RPC ( Remote Procedure Call ) とは、ネットワークで繋がっている別のコンピュータのプログラムを実行 できるようにする技術 クライアント側からサーバー側への疎通を行う際に、具体的な通信手段やプロトコルを意識することな く、関数の呼び出しを行うことがでやり取りが行える仕組み Google が開発したRPC のプロトコルなので、gRPC という命名になっている tRPC のt はTypeScript を表している
5. 学ぶモチベーション OpenAPI やGraphQL だとスキーマ定義が必須でコード以外の実装が入りファットになりがち またフロントエンド側を型安全にするためには、さらに別途でコード生成の対応が必要 気軽にかつ型安全を保ちながらAPI を実装したい なので、tRPC を使ってみた
6. サーバー側の実装 参考:quickstart import { createHTTPServer } from "@trpc/server/adapters/standalone"; import { initTRPC } from "@trpc/server" const t = initTRPC.create(); const appRouter = t.router({ helloWorld: t.procedure.query(() => { return "Hello World"; }), }); export type AppRouter = typeof appRouter; const server = createHTTPServer({ router: appRouter, }); server.listen(8000);
7. クライアント側の実装（スクリプト） import { createTRPCProxyClient, httpBatchLink } from "@trpc/client"; import type { AppRouter } from "./server"; const trpc = createTRPCProxyClient<AppRouter>({ links: [ httpBatchLink({ url: "http://localhost:3000", }), ], }); trpc.helloWorld.query().then((res) => { // output "Hello World" console.log(res); });
8. クライアント側の実装（スクリプト） コードでは以下のように補完が表示される
9. クライアント側の実装（React) 公式でHooks が提供されているので使用して実装 https://trpc.io/docs/reactjs/setup
10. クライアント側の実装（React) ▪ containers/Trpc.tsx import { useState } from "react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { httpBatchLink } from "@trpc/client"; import { trpc } from "../utils/trpc"; type Props = { children: React.ReactNode; }; function Trpc(props: Props) { const [queryClient] = useState(() => new QueryClient()); const [trpcClient] = useState(() => trpc.createClient({ links: [ httpBatchLink({ url: "http://localhost:8080", }), ], }) ); return ( <trpc.Provider client={trpcClient} queryClient={queryClient}> <QueryClientProvider client={queryClient}> {props.children} </QueryClientProvider> </trpc.Provider> );
11. クライアント側の実装（React) ▪ Page.tsx import { trpc } from "./utils/trpc"; export default function IndexPage() { const userQuery = trpc.helloWorld.useQuery(); return <div>{userQuery.data}</div>; }
12. デモ: React + tRPC + Prisma で実装 ▪ GitHub https://github.com/wheatandcat/tRPC-demo/tree/main/trpc-react-prisma デモを見せながらコードを解説 Prisma でDB の定義を行う server/prisma/schema.prisma tRPC とPrisma の連携 server/src/router.ts React との連携 client/src/Page.tsx
13. 補足: Deno + tRPC を試す ▪ GitHub https://github.com/wheatandcat/deno-trpc-demo モチベーション 何だかんだでTypeScript をデプロイするのが面倒だったので、Deno で行けたら1 つで全て済むと思 って試してみた 結果 tRPC の実装はできるけど、Deno で実装したファイルをimport できるのはDeno のみなので、結果フ ロントエンドもDeno で実装する必要がある こうなってくると旨味が薄れるので、まだ実用段階ではなかったなという感想
14. 補足: 手軽にtRPC を試すならCreate T3 App がおすすめ T3 Stack のdemo アプリを簡単に作成できる フロントエンド界隈で新しく提唱されているT3 Stack について調べてみた 実行方法は以下を参照 Introduction • Create T3 App
15. まとめ コードジェネートして型安全をする方法に慣れきっていたが、tRPC はコードジェネートしなくても型安 全が実現できるので手軽感がかなりある TypeScript 周りのツールも大分充実してきて書きやすいので、tRPC を使っていくのも全然有り BFF 構成なら、GraphQL より筋が良さそう
16. ご清聴ありがとうございました 🎉