【Supabase + JavaScript】よく使う処理まとめ

2023/5/24

最近、JavaScript(Next.js)とSupabaseでWEBサイトを作り始めました！

そこで今回は、JavaScriptでSupabaseを使う際のよく利用する処理をメモとして記載しています。

Supabase Docs

今回の前提
1）特定テーブルのデータを取得する
2）特定テーブルの特定IDのデータを取得する
3）特定テーブルにデータを追加する
4）特定テーブルからデータを削除する
5）特定テーブルのデータを更新する

今回の前提

使用するライブラリ

$ npm install @supabase/supabase-js

Supabase Javascript Client（インストール）

セットアップ

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(YOUR_SUPABASE_URL, YOUR_SUPABASE_ANON_KEY)

Supabase Javascript Client（セットアップ）

今回のデータベース構造

`posts`テーブル

- `id`: 数値 (自動的にインクリメントされる主キー)
- `title`: 文字列 (投稿のタイトル)
- `description`: 文字列 (投稿の詳細説明)

1）特定テーブルのデータを取得する

例えば、postsテーブルから全てのデータを取得します。

const { data, error } = await supabase
  .from('posts')
  .select('*')

console.log(data)

// [
//     {
//       "id": 1,
//       "title": "Post 1",
//       "description": "This is post 1",
//     },
//     ...
// ]

https://supabase.com/docs/reference/javascript/select

2）特定テーブルの特定IDのデータを取得する

例えば、postsテーブルから特定ID（例えば1）のデータを取得します。

const { data, error } = await supabase
  .from('posts')
  .select('*')
  .eq('id', 1)

console.log(data)

// レスポンス：
// {
//   "id": 1,
//   "title": "Post 1",
//   "description": "This is post 1",
// }

3）特定テーブルにデータを追加する

例えば、postsテーブルに新しいデータを追加します。

const { data, error } = await supabase
  .from('posts')
  .insert([
    { title: 'New Post', description: 'Hello, world!' }
  ])
  .select()

console.log(data)

// [
//   {
//     "id": 2,
//     "title": "New Post",
//     "description": "Hello, world!"
//   },
// ]

https://supabase.com/docs/reference/javascript/insert

4）特定テーブルからデータを削除する

例えば、postsテーブルから特定ID（例えば1）のデータを削除します。

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

https://supabase.com/docs/reference/javascript/delete

5）特定テーブルのデータを更新する

例えば、postsテーブルの特定ID（例えば1）のデータを更新します。

const { data, error } = await supabase
  .from('posts')
  .update({ title: 'Updated Post' })
  .eq('id', 1)

console.log(data)

// [
//   {
//     "id": 1,
//     "title": "Updated Post"
//     "description": "This is post 1",
//   },
// ]