【Supabase×react×typescript】保存したTODOをすぐ削除しようとするとエラーになる

はじめに

初歩的なことですが、詰まったので書きます

問題

保存したTODOアプリをリロードかけず、そのままTODOを削除しようとしたら
エラーが出ました。

開発ツールのコンソール上でのエラーはこんな感じ

DELETE https://shxhvlouxxdfkbszgsto.supabase.co/rest/v1/study-record?id=eq.6 400 (Bad Request)
~~~~~~
App.tsx:32 {code: '22P02', details: null, hint: null, message: 'invalid input syntax for type uuid: "6"'}

読み解くと、

・"id=eq.6"が有効なUUIDとして認識されていない。多分だが、ユーザーがUUID型として扱うべきカラムに整数の"6"を渡している。
・エラーメッセージはUUID型を期待するカラムに整数"6"を渡していて、正しいIDをURLパラメータに挿入する必要があることを示している。

っていうことがわかった。

なんじゃそりゃと思い見てみると、supabaseはuuid型になっているのに対し、
console.logで見てみると、6とか7とかの整数で返ってきていることがわかりました。

原因のコード

実際にコードを見返すとどうやら格好つけて作ったhookがおかしいっぽく、
確認していくとその予想は当たっていました。

const addTodo = async (text: string, time: number) => {
    try {
      setIsLoading(true);
      await AddTodo(text, time);
      const newId = records.length + 1;
      setRecords([...records, { id: String(newId), text, time }]);
      setOpen(false);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

ここの部分です。

const newId = records.length + 1;
setRecords([...records, { id: String(newId), text, time }]);

なんやこれ、、、

AddでTODOを追加し、一覧に表示させる時に勝手に整数に整形されていました。

なぜ自分がそんなコードを書いたのか覚えていないのですが、
型がちゃんと決まっていない状態で開発を進めていたので、
おそらく回避するために書いたのだろうと思います。

コメントを残さなかった過去の自分を恨みました。

解決方法

なんやなんや触って最後のコードはこちら。

 const addTodo = async (text: string, time: number) => {
    try {
      setIsLoading(true);
      const data = await AddTodo(text, time);

      if (data && data.length > 0) {
        const newTodo = new Todo(data[0].id, text, time);
        setRecords([...records, newTodo]);
      }
      setOpen(false);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

ifでnullとundefinedを避けて、
new Todo(data[0].id, text, time)で、新しく作成された TODO を Todo クラスのインスタンスとして作成するようにしました

おわりに

時間が空いたので、後々に影響があるよねって場所は
コメントを残した方がいいなと改めて強く思いました。