Zenn
Open5

読者コミュニティ｜【T3 Stack 入門】認証機能付き ToDo アプリを作成しよう（Next.js & tRPC & NextAuth & Prisma）

zorrozorro

初めまして、ご執筆お疲れ様です。
無事にデプロイまで進めることができ、良い勉強になりました。ありがとうございます。

一箇所、npmとpnpmで結果が異なる箇所が出ましてお尋ねしたいと思いました。
Chapter 15 楽観的更新を行おう 楽観的更新の様子を観察する（Todo の内容編集時）
pnpmの場合だと、こちらの失敗時に元々の値に書き戻らずに入力中の値が残ってしまい、npmの場合だと正常に書き戻りました。
この現象がなぜ起こるのかなにか思い当たることはないかと思い質問しました。

FarStepFarStep

お返事が遅くなって申し訳ありません。

npm と pnpm で結果が異なる箇所が出た件について、ご連絡頂き誠にありがとうございました。
私の方で再現しようとしたのですが、うまく再現できず、原因の特定までいたりませんでした。
申し訳ありません。

該当箇所には、「npm と pnpm で挙動が異なることがある」という旨を追加させて頂きました。
こういったご指摘は非常に助かります 😭
ありがとうございます。

今後ともよろしくお願いします。

isoseaisosea

こんにちは！
T3 Stackについて気になっていたので、とても楽しく学習できました。教材を進める中で気になったところだけ書き留めておきます。

[05]において、npx husky-initを行うと、私はnpm testが出力されたので、その削除が必要かもしれないと思いました。
[10]においてはコードの一例を挙げている形だと思いますが、一回これに書き換えるものだと勘違いしてしまいました。

以下は気にならない程度の誤植です。
[15] 最後に下記コードで、更新前のデータのスナップショット「を」？
[17] 環境変数の設定が完了した「ら」？

Yuji TanakaYuji Tanaka

楽観的更新時の更新失敗時のロールバックについて、僕の環境でも、更新失敗時に元々の値に書き換わらない現象が発生しましたのでご報告いたします。
Chapter 15 楽観的更新を行おう 楽観的更新の様子を観察する（Todo の内容編集時）

本文には下記のようにありましたが、

text には、更新前の Todo の内容が格納されていますので、

こちらの環境の text には、更新前の Todo の内容ではなく、入力した Tdoo の内容が格納されているようでした。
（パッケージマネージャは npm を使用しています）

ということで、context から text の値を取得してロールバックしました。
（少々チカラワザですが）

onError: (err, _, context) => {
  toast.error("An error occured when editing todo");
  console.error(err);
  if (!context) return;
  const previousText = context?.previousTodos?.filter((t) => t.id === id)[0]?.text;
  if (previousText) {
    setCurrentTodo(previousText);
  }
  trpc.todo.all.setData(undefined, () => context.previousTodos);
},