【JavaScript+SupaBase】データベースのレコードを削除する方法

はじめに

現在JavaScriptとReactで学習内容＆学習時間を記録するアプリを作成中です。
DBはSupabaseを使用しています。
今回は 「ブラウザ上で削除ボタンを押下した時に、リストの要素に加えてSupabase上のレコードも削除する」処理について説明します。

問題

公式のドキュメントに書き方を載せてくれています。（TypeScript版もある）

ドキュメントの例文はこちらになります。
この場合「countoriesテーブルの中から、id=1のデータを消去する」という意味です。
この.eq() メソッドは、特定のフィールドが特定の値と等しい条件を指定するために使用されます。（今回の条件だと id=1 ですね）
ですが、今回は指定した条件を満たす行を削除したいです。

const { error } = await supabase
  .from('countries')
  .delete()
  .eq('id', 1)

解決方法

.eq() メソッドの代わりに、 .match() メソッドを使用します。
.match() メソッドは指定された条件に一致する行を削除するために使用されます。

下記のように修正しました。
今回の流れとしては 「study-recordテーブルから、指定されたstudyContentとstudyTimeの値に一致するレコードを削除する」 処理になります。

supabaseFunctions.js

export const deleteRecords = async (studyContent, studyTime) => {
  await supabase
    .from('study-record')
    .delete()
    .match({studyContent, studyTime}); // .eq() の代わりに .match() を使用
};

おわりに

以上が特定のフィールド・値を消去する処理ではなく、特定の条件を満たすレコードを削除する方法になります。