7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Reactからsupabaseにデータを追加できない

Posted at

初めに

現在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やネットの情報しか見ていませんでした。
なぜなら公式ドキュメントは英語で書かれており、読むことに抵抗があったから!!
ですが今後は公式ドキュメントも積極的に確認していかないといけないなと思った事例でした。

7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?