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

閱讀時間約 7 分鐘
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。

新增表格與假資料

在對資料庫操作前,先為資料庫新增個表格和很多的假資料,supabase很貼心有提供sql模板,可以一鍵新增表格和資料。
Supabase後台sql頁面
先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯,在模板的地方supabase官方有提供很多練習的表格結構,有的模板會額外提供一些假資料,現在supabase甚至提供AI輔助撰寫SQL的功能。

選擇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指令頁面
使用方式也相當簡單,在開啟一頁空白SQL頁面後點擊右上角的綠色符號即可開啟AI輔助工具。
自訂sql指令頁面使用AI協助
開啟後在工具裡輸入你想要的SQL功能,按下enter後AI就會產生指定的設定。
是否讓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欄位已經被更新。
is_complete旁邊的完成是我的按鈕

總結

使用客戶端操作supabase的時候,只需要掌握KEY對應VALUE的概念,和supabase-js的直觀簡潔的操作方式,讓開發者輕鬆的與資料庫互動,再加上良好的RLS政策,消除安全上的疑慮。

有興趣的內容

為什麼會看到廣告
6會員
23內容數
沙龍新手
留言0
查看全部
發表第一個留言支持創作者!
技術叢林 的其他內容
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase將為前端開發帶來創新、便利和效率。 什麼是Supabase? Supabase官網 Supabase是一個開源的後端服務平台,提供完全可
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase將為前端開發帶來創新、便利和效率。 什麼是Supabase? Supabase官網 Supabase是一個開源的後端服務平台,提供完全可
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
峇里島除了眾所周知的熱門海灘外,這個島嶼還藏著許多秘境小海灘,人煙稀少,沒有什麼觀光客,等待著探險家的發現。介紹五個秘境沙灘推薦
Thumbnail
每次只要有人在網路上或電視上訴說自己的父母如何讓自己感到痛苦,總是會有一派的人出面聲討並且指責不應該批評生養自己長大的父母,認為這是一種忘恩負義的不孝行徑。但假設我們都不去談父母所帶來的創傷,難道就能自然抹滅或消除內心的傷痕嗎? 作者在三十歲的那年才赫然發現自己不斷被母親虐待荼毒,在此之前感受到的是
Thumbnail
最近,有聽眾在Apple podcast給我5星留言,順便問了國家考試出題老師是誰這個問題。 關於此問題,其實非常多聽眾私訊問過站長;其實阿……,在站長的書《關於國考:你不知道的那些事》第4章,就非常明白跟大家說查詢、肉搜國考出題委員的方法。 早在古早時代,也就是電腦尚未普及化的時候,當時考選部都會
Thumbnail
在本次BofA基金經理人調查中:我們正處於經濟衰退中嗎? 本篇介紹什麼是後週期循環期? 以及經理人認為目前屬於後週期循環期比例與型經濟衰退的關係
Thumbnail
大小威廉斯的成就,或許有很大一部分得力於她們父親的用心,但我自己同時身為一位女兒與母親的角色,在看到一位用心用力、有遠見、有爆棚信心的父親的同時,也看到一位極度自卑而又掌控欲強烈的虎爸。
Thumbnail
聯徵信用評估表,標準名稱是「個人聯徵信用報告」。這個資料是由每家銀行提供,所有銀行必須把每個客戶跟銀行往來的所有資料,報送到聯徵中心彙整成一份所謂的聯徵報告。聯徵信用紀錄如何查詢?除了傳統郵寄或親至郵局臨櫃辦理,或是網路或app線上申請,還可以親至聯徵信用卡中心臨櫃辦理,一年有一次可免費申請。
Thumbnail
先說結論:那並不是一個認知中寓教於樂的科學教育節目,如果你能從中學到什麼,那就真的太好了。
Thumbnail
吸引力法則相關的書至少我認知中從二十年前的秘密爆紅後就在台灣風靡起來,不過這麼多年過去,仍然只有極少數人學會怎麼使用並收到自己訂的禮物,而無法實現的人不是在圍觀吐槽,就是質疑與批評,我至今花費一年多專注練習也不是每次下訂單都會收到,不過多少收到五分鐘內、幾天內或數月數年的願望實現。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
峇里島除了眾所周知的熱門海灘外,這個島嶼還藏著許多秘境小海灘,人煙稀少,沒有什麼觀光客,等待著探險家的發現。介紹五個秘境沙灘推薦
Thumbnail
每次只要有人在網路上或電視上訴說自己的父母如何讓自己感到痛苦,總是會有一派的人出面聲討並且指責不應該批評生養自己長大的父母,認為這是一種忘恩負義的不孝行徑。但假設我們都不去談父母所帶來的創傷,難道就能自然抹滅或消除內心的傷痕嗎? 作者在三十歲的那年才赫然發現自己不斷被母親虐待荼毒,在此之前感受到的是
Thumbnail
最近,有聽眾在Apple podcast給我5星留言,順便問了國家考試出題老師是誰這個問題。 關於此問題,其實非常多聽眾私訊問過站長;其實阿……,在站長的書《關於國考:你不知道的那些事》第4章,就非常明白跟大家說查詢、肉搜國考出題委員的方法。 早在古早時代,也就是電腦尚未普及化的時候,當時考選部都會
Thumbnail
在本次BofA基金經理人調查中:我們正處於經濟衰退中嗎? 本篇介紹什麼是後週期循環期? 以及經理人認為目前屬於後週期循環期比例與型經濟衰退的關係
Thumbnail
大小威廉斯的成就,或許有很大一部分得力於她們父親的用心,但我自己同時身為一位女兒與母親的角色,在看到一位用心用力、有遠見、有爆棚信心的父親的同時,也看到一位極度自卑而又掌控欲強烈的虎爸。
Thumbnail
聯徵信用評估表,標準名稱是「個人聯徵信用報告」。這個資料是由每家銀行提供,所有銀行必須把每個客戶跟銀行往來的所有資料,報送到聯徵中心彙整成一份所謂的聯徵報告。聯徵信用紀錄如何查詢?除了傳統郵寄或親至郵局臨櫃辦理,或是網路或app線上申請,還可以親至聯徵信用卡中心臨櫃辦理,一年有一次可免費申請。
Thumbnail
先說結論:那並不是一個認知中寓教於樂的科學教育節目,如果你能從中學到什麼,那就真的太好了。
Thumbnail
吸引力法則相關的書至少我認知中從二十年前的秘密爆紅後就在台灣風靡起來,不過這麼多年過去,仍然只有極少數人學會怎麼使用並收到自己訂的禮物,而無法實現的人不是在圍觀吐槽,就是質疑與批評,我至今花費一年多專注練習也不是每次下訂單都會收到,不過多少收到五分鐘內、幾天內或數月數年的願望實現。