在supabase裡可以直接從客戶端讀取資料庫中的資料，在設定好RLS的前提之下，更可以對資料庫直接進行新增、修改、刪除等操作。
嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。
新增表格與假資料
在對資料庫操作前，先為資料庫新增個表格和很多的假資料，supabase很貼心有提供sql模板，可以一鍵新增表格和資料。
先進到後台選擇SQL Editor，可以來到SQL編輯器的頁面，如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕，可以開啟一個空白頁面開始編輯，在模板的地方supabase官方有提供很多練習的表格結構，有的模板會額外提供一些假資料，現在supabase甚至提供AI輔助撰寫SQL的功能。
選擇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會自己想像一些名字替代，需要手動微調即可。
詳細的內容可以看官方對此功能的直接介紹。
操作資料庫
使用範例模板新增完成以後回到資料庫後就會看到一個新的表格叫做todos，在執行這個SQL指令的同時有設定RLS政策，基本上需要登入的狀態才能進行接下來的操作。
如果登入上有問題可以參考前面文章。
新增資料
因為目前表格是空的所以一筆資料都沒有，在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旁邊的完成是我的按鈕總結
使用客戶端操作supabase的時候，只需要掌握KEY對應VALUE的概念，和supabase-js的直觀簡潔的操作方式，讓開發者輕鬆的與資料庫互動，再加上良好的RLS政策，消除安全上的疑慮。
有興趣的內容
- Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！
- 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！
