初めに
現在Reactを用いて学習記録アプリを制作しています!
制作の過程でインプットタグに挿入したデータをsupabaseに追加するという機能を実装しようとしたのですが、うまく動作しなかったので共有します。
問題点
学習内容を入力するフォームと学習時間を記録するフォームを設置して、その横にある登録ボタンを押すとリストに名前が追加されるという機能の実装を試みました。
ですがボタンを押してもコンソール上にはエラーしか返ってきません...
結論から言うとボタンを押した時に動作する、supabaseにデータを追加する関数が間違っていました。
以下が間違っていた関数です。
export const addTodo = async (title, time) => {
const { data, error } = await supabase
.from("study-record")
.insert([{ title: title, time: time }]);
if (error) {
throw error;
}
return data;
};
解決策
正しいコードはselect();を追加した以下のコードです。
export const addTodo = async (title, time) => {
const { data, error } = await supabase
.from("study-record")
.insert([{ title: title, time: time }])
.select();
if (error) {
throw error;
}
return data;
};
以前までinsert()関数は、デフォルトでsupabase上の行を自動選択していたそうですが、現在はselect()をつけないと行の選択を行なってくれないそうです。
参考サイト:https://supabase.com/docs/reference/javascript/upsert#data-operations-return-minimal
終わりに
今までエラーが起こってもchatGPTやネットの情報しか見ていませんでした。
なぜなら公式ドキュメントは英語で書かれており、読むことに抵抗があったから!!
ですが今後は公式ドキュメントも積極的に確認していかないといけないなと思った事例でした。