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ということを教えてくれます。
謝辞
今回サンプルを作るにあたって、下記を参考にいたしました。
Discussion