Supabase裡查詢、新增、修改、刪除資料

新增表格與假資料

選擇SQL模板

這裡使用Todo List當作接下來的範例，只需要選擇這個模板，接著點擊右下方的RUN按鈕就可以完成新增表格和設定RLS等功能。

create table todos (

  id bigint generated by default as identity primary key,

  user_id uuid references auth.users not null,

  task text check (char_length(task) > 3),

  is_complete boolean default false,

  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null

)

新增完成後就可以回到客戶端練習與表格互動。

文章撰寫時間官方sql模板下方的RLS政策在新增資料時遇到錯誤，本篇文章是改使RLS預設的4個讀取，新增，更新，刪除的政策，內容無修改。

AI輔助SQL

就在這篇文章準備的這幾週，supabase發佈全新的AI輔助工具，這個工具可以協助管理員用簡短的句子寫出正確的SQL內容。

使用方式也相當簡單，在開啟一頁空白SQL頁面後點擊右上角的綠色符號即可開啟AI輔助工具。

開啟後在工具裡輸入你想要的SQL功能，按下enter後AI就會產生指定的設定。

supabase有提供安全性的選項可以勾選，會提供這個選項是因為有些用戶的DB屬於機密性，或是具有隱私的資料不想給AI讀取怕會有一些隱憂，就可以不勾選這個欄位，其中的差異只會差在AI在產生SQL指令的時候欄位名稱和實際DB欄位名稱會不一樣，AI會自己想像一些名字替代，需要手動微調即可。

詳細的內容可以看官方對此功能的直接介紹。

操作資料庫

新增資料

因為目前表格是空的所以一筆資料都沒有，在console或是畫面都難以呈現空空的狀態，不如就先來新增幾筆假資料。

新增資料的方式有兩種，一種是單筆資料新增的方式，使用物件的方式指定好每個KEY對應VALUE，另一種方式是用陣列的方式一次新增多筆資料，而每個陣列也都是使用物件的KEY對應VALUE的方式。

這裡就先一次新增3筆假資料，直接用新增多筆資料的方式新增，範例的內容如下。

const { data, error } = await supabase.from('todos').insert([

  {

    user_id: '9fe1408a-b5d8-4fd8-92aa-0c631e514c29',

    task: 'task 1'

  },

  {

    user_id: '9fe1408a-b5d8-4fd8-92aa-0c631e514c29',

    task: 'task 2'

  },

  {

    user_id: '9fe1408a-b5d8-4fd8-92aa-0c631e514c29',

    task: 'task 3'

  }

]).select()

執行完後，沒有收到什麼錯誤訊息就是新增成功拉！如果需要馬上處理資料可以接data來處理，或是馬上讀取資料全部撈出來看一下。

讀取資料

執行以下程式碼，回傳的內容就是我們表格裡面所有資料。

import supabase from '../supabase'



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

馬上就會看到todos裡面的所有資料，下圖是我呈現在畫面中的樣子。

只想要撈出顯示使用的欄位可以在select裡面指定，如以下範例。

let { data: members, error } = await supabase.from('todos').select('some_column,other_column')

刪除資料

刪除資料也是很輕鬆可以寫完，範例程式如下。

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

刪除ID是5的這筆資料，執行完重新整理以後畫面中可以看到，資料庫裡面已經沒有這筆資料。

開發模板的畫面，刪除正確

刪除的話就需要指定說要刪除的是哪一筆資料，指定ID可以刪除指定資料，也可以刪除多筆資料就需要使用更多的篩選器串接在後面指定。

修改資料

待辦清單會使用到的修改資料就是把資料的完成狀態更新，執行以下程式。

const { error } = await supabase.from('todos').update({ is_complete: true }).eq('id', 6)

更新完成後重新把資料撈出來看就會看到is_complete欄位已經被更新。

is_complete旁邊的完成是我的按鈕

總結

有興趣的內容

Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！ 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！