Supabase裡查詢、新增、修改、刪除資料
閱讀時間約 7 分鐘
在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政策，基本上需要登入的狀態才能進行接下來的操作。
如果登入上有問題可以參考前面文章，Supabase的身份認證和會員管理。
新增資料
因為目前表格是空的所以一筆資料都沒有，在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欄位已經被更新。
總結
使用客戶端操作supabase的時候，只需要掌握KEY對應VALUE的概念，和supabase-js的直觀簡潔的操作方式，讓開發者輕鬆的與資料庫互動，再加上良好的RLS政策，消除安全上的疑慮。
有興趣的內容
留言0
查看全部
技術叢林 的其他內容
你可能也想看
探索峇里島的無人秘境 6個峇里島秘境沙灘攻略/如何查詢潮汐？峇里島除了眾所周知的熱門海灘外，這個島嶼還藏著許多秘境小海灘，人煙稀少，沒有什麼觀光客，等待著探險家的發現。介紹五個秘境沙灘推薦
2023-08-22
母親在我心裡扎下的刺每次只要有人在網路上或電視上訴說自己的父母如何讓自己感到痛苦，總是會有一派的人出面聲討並且指責不應該批評生養自己長大的父母，認為這是一種忘恩負義的不孝行徑。但假設我們都不去談父母所帶來的創傷，難道就能自然抹滅或消除內心的傷痕嗎？
作者在三十歲的那年才赫然發現自己不斷被母親虐待荼毒，在此之前感受到的是
2023-03-26
我要去哪裡查詢「國家考試出題老師是誰呢」？最近，有聽眾在Apple podcast給我5星留言，順便問了國家考試出題老師是誰這個問題。
關於此問題，其實非常多聽眾私訊問過站長；其實阿……，在站長的書《關於國考：你不知道的那些事》第4章，就非常明白跟大家說查詢、肉搜國考出題委員的方法。
早在古早時代，也就是電腦尚未普及化的時候，當時考選部都會
2022-10-12
9/13 美林美銀基金經理人調查-後週期循環比例 (Late-Cycle)在本次BofA基金經理人調查中:我們正處於經濟衰退中嗎?
本篇介紹什麼是後週期循環期?
以及經理人認為目前屬於後週期循環期比例與型經濟衰退的關係
2022-10-04
電影《王者理查》│不只是女兒成功的推手，也是自卑、掌控欲強烈的虎爸大小威廉斯的成就，或許有很大一部分得力於她們父親的用心，但我自己同時身為一位女兒與母親的角色，在看到一位用心用力、有遠見、有爆棚信心的父親的同時，也看到一位極度自卑而又掌控欲強烈的虎爸。
2022-04-05
聯徵信用評估表內容為何？聯徵信用紀錄如何查詢？可親至聯徵信用卡中心臨櫃辦理聯徵信用評估表，標準名稱是「個人聯徵信用報告」。這個資料是由每家銀行提供，所有銀行必須把每個客戶跟銀行往來的所有資料，報送到聯徵中心彙整成一份所謂的聯徵報告。聯徵信用紀錄如何查詢？除了傳統郵寄或親至郵局臨櫃辦理，或是網路或app線上申請，還可以親至聯徵信用卡中心臨櫃辦理，一年有一次可免費申請。
2022-03-15
去看理查哈蒙德新的科學節目《Brain Reaction》錄影先說結論：那並不是一個認知中寓教於樂的科學教育節目，如果你能從中學到什麼，那就真的太好了。
2022-02-11
為什麼收不到宇宙的禮物？大概無法取消訂單與查詢是個問題吸引力法則相關的書至少我認知中從二十年前的秘密爆紅後就在台灣風靡起來，不過這麼多年過去，仍然只有極少數人學會怎麼使用並收到自己訂的禮物，而無法實現的人不是在圍觀吐槽，就是質疑與批評，我至今花費一年多專注練習也不是每次下訂單都會收到，不過多少收到五分鐘內、幾天內或數月數年的願望實現。
2021-10-11