【Supabase】Supabaseでリロード時の入力内容を保持する方法

はじめに

こちらの記事は、学習でのアウトプットを目的として制作した記事になります。誤った情報や必要な情報が不足している可能性があります。予めご了承ください。間違いや気になる点がございましたらご指摘いただきますと幸いです。

　簡易的な学習記録アプリを作成しています。
　TODOリストなど入力内容をSupabaseに登録して、リロード時にも入力した内容が保持されるようにしたい。

問題

　学習内容と学習時間を入力して、「登録」を押すと下に入力された内容が表示されるがリロードすると消えてしまうので、リロード時にも入力内容を保持したい。

解決方法

　「登録」クリック時に入力した内容をSupabaseのデータベースに送信して直接追加することで入力内容を保持。

①任意の場所に　予め用意したSupabase設定用のtsファイルに、下記の記述を追加。

export const addRecord = async (title: string, time: number) => {
  await supabase.from("study-record").insert({ title: title, time: time });
};

②先ほどエクスポートした関数をインポートし、登録ボタン部分に関数を先ほどエクスポートした変数を使用する関数を追記。

import { addRecord } from "../utils/supabaseFunctions";


<form onSubmit={(e) => handleSubmit(e)}>
  <button>
    登録
  </button>
</form>

③用意した関数handleSubmitにエクスポートしたaddRecord関数を追記。

const handleSubmit = async (e) => {
    e.preventDefault();
    if (text.trim() === "" || time <= 0 || isNaN(time)) {
      setError("正しく入力されていない項目があります。");
      return;
    }
    console.log("入力した内容：", text, "時間：", time);
    await addRecord(text, time);
    
    setText("");
    setTime(0);
    setError("");
    console.log("学習記録の合計時間:", sumTotalTime);
};

④登録した入力内容がSupabase上のデータベースに反映されているか確認。反映されていればOK。反映されてない場合は、関数名の誤字や書き方に間違いがないか確かめて下さい。

⑤このままだと入力内容が画面に反映されていないので、一度変数に格納してstateの値を更新する。

const handleSubmit = async (e) => {
    e.preventDefault();
    if (text.trim() === "" || time <= 0 || isNaN(time)) {
      setError("正しく入力されていない項目があります。");
      return;
    }
    console.log("入力した内容：", text, "時間：", time);
    await addRecord(text, time);
    let todos = await getAllRecords();
    setRecords(todos);
    
    setText("");
    setTime(0);
    setError("");
    console.log("学習記録の合計時間:", sumTotalTime);
};

これでリロード時の入力した内容の保持

おわりに

　Supabaseを使ってリロード後でも入力内容を簡単に保持することができました。Supabaseのデータベースに追加できてもStateを更新しないと画面自体は変わらないので注意が必要です。