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政策,消除安全上的疑慮。

有興趣的內容

為什麼會看到廣告
avatar-img
6會員
23內容數
沙龍新手
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
技術叢林 的其他內容
在上篇文章中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
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
已經存在在table裡面的那些record做更新。 ※ 語法 UPDATE [LOW_PRIORITY] [IGNORE] table_name SET column_name1 = expr1, column_name2 = expr2, … [WHERE
Thumbnail
※ 把record加到table有兩種方式: VALUES • SELECT ※ 語法 INSERT INTO VALUES 語法: Record 代表一組值的集合,每個值對應到表格中的一個欄位(column)。 INSERT INTO 語法用來指定要插入資料的表格。 需要提供一個
Thumbnail
※ 為什麼需要 Subquery? 當⼀個任務需要多個 Query 完成任務,可以使⽤ Subquery 把多個 Query 合併成⼀個 Query。 當我們在進行SQL查詢時,每次查詢都需要在Web Server和資料庫之間來回傳遞資料。這個過程會產生網路延遲,特別是當兩者之間的物理距離較遠時
Thumbnail
※ 關聯式資料庫(RDBMS)是什麼? 關聯式資料庫(RDBMS)是一種傳統的資料庫系統,以結構化查詢語言(SQL)為基礎,將資料儲存於預定義的表格中。這些表格包括行和列,彼此之間存在明確的關聯性。 ※ 關聯式資料庫(RDBMS)有兩個重要元素: 關聯(Relational): 關聯式資料庫
Thumbnail
※ 為什麼選擇SQLite? 安裝簡單:SQLite是一個零配置的資料庫,不需要複雜的設定和安裝過程。。 使用SQL語法。 設計選擇多元性(MySQL / SQLite):適合於小零件資料應用、嵌入式系統、物聯網設備。 ※ SQLite四大優點: 執行檔檔案很小:資料庫系統需要的磁碟空
Thumbnail
這篇文章主要是介紹了SQL查詢效能調校的方法,針對索引最佳化做了整理和分享,並提供了一些注意事項和建議。
Thumbnail
在進行SQL查詢邏輯更改時,需要適當地使用SubQuery和join來達到新的排序需求。本文將介紹原本的撈取邏輯、需求以及如何使用SubQuery來解決新的排序需求。
Teradata SQL Assistant調整選項Submit only the selected query text, when highlighted
※ MySQL是什麼? MySQL是一種開源(免費)的關聯式資料庫管理系統,所以任何人都可以免費使用,是Web開發中最常用的資料庫之一。MySQL 會將資料儲存在由資料列與資料欄組成的資料表中。使用者可使用結構化查詢語言 (通常稱為 SQL) 來定義、操控、控管及查詢資料。  簡單來說,資料
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
已經存在在table裡面的那些record做更新。 ※ 語法 UPDATE [LOW_PRIORITY] [IGNORE] table_name SET column_name1 = expr1, column_name2 = expr2, … [WHERE
Thumbnail
※ 把record加到table有兩種方式: VALUES • SELECT ※ 語法 INSERT INTO VALUES 語法: Record 代表一組值的集合,每個值對應到表格中的一個欄位(column)。 INSERT INTO 語法用來指定要插入資料的表格。 需要提供一個
Thumbnail
※ 為什麼需要 Subquery? 當⼀個任務需要多個 Query 完成任務,可以使⽤ Subquery 把多個 Query 合併成⼀個 Query。 當我們在進行SQL查詢時,每次查詢都需要在Web Server和資料庫之間來回傳遞資料。這個過程會產生網路延遲,特別是當兩者之間的物理距離較遠時
Thumbnail
※ 關聯式資料庫(RDBMS)是什麼? 關聯式資料庫(RDBMS)是一種傳統的資料庫系統,以結構化查詢語言(SQL)為基礎,將資料儲存於預定義的表格中。這些表格包括行和列,彼此之間存在明確的關聯性。 ※ 關聯式資料庫(RDBMS)有兩個重要元素: 關聯(Relational): 關聯式資料庫
Thumbnail
※ 為什麼選擇SQLite? 安裝簡單:SQLite是一個零配置的資料庫,不需要複雜的設定和安裝過程。。 使用SQL語法。 設計選擇多元性(MySQL / SQLite):適合於小零件資料應用、嵌入式系統、物聯網設備。 ※ SQLite四大優點: 執行檔檔案很小:資料庫系統需要的磁碟空
Thumbnail
這篇文章主要是介紹了SQL查詢效能調校的方法,針對索引最佳化做了整理和分享,並提供了一些注意事項和建議。
Thumbnail
在進行SQL查詢邏輯更改時,需要適當地使用SubQuery和join來達到新的排序需求。本文將介紹原本的撈取邏輯、需求以及如何使用SubQuery來解決新的排序需求。
Teradata SQL Assistant調整選項Submit only the selected query text, when highlighted
※ MySQL是什麼? MySQL是一種開源(免費)的關聯式資料庫管理系統,所以任何人都可以免費使用,是Web開發中最常用的資料庫之一。MySQL 會將資料儲存在由資料列與資料欄組成的資料表中。使用者可使用結構化查詢語言 (通常稱為 SQL) 來定義、操控、控管及查詢資料。  簡單來說,資料
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為