Killercodaを使ってtRPC経由でLINE UserIdを取得できる動きを確認してみましょう。
ハンズオン資料は下記ページです。
ページを開くと自動的にインストールが始まります。画面左側にある手順書通りに進めていってください。
バックエンドコード補足
tRPCのコード実態は下記にあります。
zodを使ってLIFFからアクセストークンを取得して、tRPC側で受け取ります。
LINEのgetProfile処理を行って、ユーザー情報を取得しにいきます。
フロントエンドコード補足
LIFFの初期化をmain.tsxで行っています。必ずLIFFの初期化を通過するような作りが必要です。
トップページ
useEffectでLIFF経由でユーザー情報を取得しにいきます。同時にアクセストークンも取得します。
ボタンを押下してバックエンドのtRPCに処理を実行してもらいます。結果は75行目で受け取ります。
tRPCのスゴイところ
型安全なので、バックエンド側のプロパティ名を変更すると、フロントエンド側にも影響します。
例えば、userIdからuserId2という別のプロパティ名に変更してみます。
backend/src/trpc/router.ts
userId2: z.coerce.string().parse(line.userId),
すると、このようにVSCode上でエラーが返ってきて、userId2ということを教えてくれます。
謝辞
今回サンプルを作るにあたって、下記を参考にいたしました。
まとめ
tRPCを使えば型安全にバックエンドとフロントエンドが連携できるので、オススメですね。
システム化のご検討やご相談は弊社までお問い合わせください。