Supabase的關聯表格、外來鍵 | Foreign Key

閱讀時間約 7 分鐘
Supabase的關聯表格、外來鍵 | Foreign Key封面

Supabase的關聯表格、外來鍵 | Foreign Key封面

在前面的文章中已經在supabase中完成了基本的操作,甚至已經完成訂閱即時更新的功能,接著本篇文章要介紹的是如何在supabase裡設定與使用外來鍵,包含如何在客戶端撰寫查詢外鍵的SQL,馬上開始。

如果還沒有閱讀實時更新功能文章的話可以點擊下方去閱讀。

supabase的實時更新 | Subscribe to channel

嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。

外來鍵(Foreign Key)介紹

在使用supabase是用PostgreSQL作為資料庫使用,所以外來鍵的概念是需要具備的知識。
在網路上已有相當多外來鍵的說明,以下是我問Bing AI得到有關外來鍵的解釋內容:

外來鍵(Foreign Key)是一種資料庫的約束條件,用於建立兩個資料表之間的關聯。外來鍵的值必須參照另一個資料表的主鍵(Primary Key)或候選鍵(Candidate Key),或者為空值。外來鍵的作用是保證資料的一致性和完整性,避免出現不符合邏輯的資料。

為表格設定外來鍵

事前準備

要設定外來鍵(Foreign Key)的首要條件就是要有兩個表格、,我的構思是為前面使用的todos表格新增一個擁有者的欄位,用來外聯新增這筆代辦事項的使用者資料,這樣就可以一次知道這筆待辦事項與這筆資料擁有者的詳細資料。

回到supabase的後台,馬上就先新增一個簡單的members,主要有id欄位還有基本的email欄位,並且手動新增幾筆假資料,大概就會像圖中一樣。

原後台表格狀態

原後台表格狀態

新增外來鍵欄位

接下來切回todos表格,為表格新增一個新增欄位,用來關聯members表格,直接點擊欄位最右邊的+來新增,欄位的名字就叫做owner吧,表示是代辦事項擁有者的意思,這時候就要點擊畫面中間的Add foreign key relation的按鈕來新增外來鍵。

為todos表格新增外來鍵的新欄位

為todos表格新增外來鍵的新欄位

按了按鈕以後會跳出另一個面板設定,步驟也想當簡單,只要把表格的地方選到剛剛新增的表格members,主要關聯的欄位就直接設定id欄位。

設定外來鍵關聯

設定外來鍵關聯

另外介紹一下最下面的下拉選單,內容是詢問說當這個關聯的表格中的那一筆資料被刪除的時候,這個關聯關係要如何處理,目前可以先隨意設定一個動作,因為這兩個表格的刪除並不會影響練習,這個設定主要是因為有些資料有上下關係,資料庫會預設保護你誤刪一些上層資料,讓引用上層資料的下層資料失去關聯。

設定好外來鍵

設定好外來鍵

設定完成以後可以在原畫面中看到有下方圖的內容,按下送出即設定完成,接下來手動把外來鍵的內容填上去就完成兩個資料表格的關聯關係,完成的todos表格會變成下圖這樣。

設定完成以後的表格

設定完成以後的表格

直接查詢表格關聯

文件的說明

要使用外來鍵的話就要先看一下官方文件對於這個查詢的說明,在supabase的官方文件中有一段範例程式碼,內容如下。

let { data: todos, error } = await supabase.from("todos").select(`
some_column,
other_table (
foreign_key
)
`);


初次看這段程式碼的感覺就是這麼簡短?,看起來也不需要把關聯的欄位給寫出來就可以直接查詢外聯表格的內容,實際上的操作也幾乎是這樣,但在操作上卻踩了很多坑卡了很久。

客戶端查詢外來鍵表格

這段的撰寫邏輯,首先我畫面還是要查詢原本todos的所有欄位內容,所以星號保留,第二步就是指定查詢外聯表格名稱members,裡面所有欄位都查詢所以也用星號,所以整段內容如下:

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

換個方式解釋的話,先把select()裡面改用反引號的字串,原本要查詢的欄位保持不變,多個欄位則用逗號隔開,換行直接指定外聯表格名稱並配上括號,括號內就和原本查詢欄位的方式一樣,每個欄位用逗點分隔。

在前端直接執行就可以把這兩個表格的所有欄位給查詢回來,返回的資料格式如下:

[
{
id: 7,
user_id: "9fe1408a-b5d8-4fd8-92aa-0c631e514c29",
task: "task 3",
is_complete: false,
inserted_at: "2023-08-16T09:46:05.017571+00:00",
owner: 2,
members: {
id: 2,
created_at: "2023-08-02T06:37:22.546873+00:00",
email: "foo@sample.com",
},
},
{
id: 6,
user_id: "9fe1408a-b5d8-4fd8-92aa-0c631e514c29",
task: "task 2",
is_complete: true,
inserted_at: "2023-08-16T09:46:05.017571+00:00",
owner: 1,
members: {
id: 1,
created_at: "2023-07-28T03:54:25.544457+00:00",
email: "sample@sample.com",
},
},
];

可以看到在撰寫關聯表格的時候並不需要額外撰寫程式或是指定參數,只需要事前在supabase後台把表格間的關聯關係都設定完成,就可以輕鬆地在前端查詢各個表格的外聯關係。

畫面顯示

現在每次查詢的資料都有附帶擁有著的資料,於是就延續之前的畫面把顯示的欄位修改一下,修改成顯示擁有者的email,這樣就完成一個資料的外來鍵和外聯表格的顯示。

前端畫面直接顯示關聯表格

前端畫面直接顯示關聯表格

總結

外來鍵對supabase來說是一個非常重要的功能,也同時在其他關聯式資料庫都有一樣重要的地位,在supabase中前端在查詢外聯表格的時可以透過後台設定完成外來鍵的欄位,然後在前端直接選取外聯表格的欄位查詢,相當直覺、方便、維護容易。

有興趣的內容

6會員
23內容數
沙龍新手
留言0
查看全部
發表第一個留言支持創作者!
技術叢林 的其他內容
在網頁裡直接監聽資料庫的變化吧! 這個聽起來需要複雜工程的事情,在supabase的幫助之下就可以解決,串接好後只要資料庫中的資料發生變化,supabase會自動把最新資料發送到前端頁面,可以讓使用者即時收到最新資訊,省去重複刷新頁面,提供使用者體驗。 在supabase中的實時更新總共有3種事件
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
在上篇文章中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中的實時更新總共有3種事件
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
在上篇文章中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是什麼、基本功能應用,
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第31天 今天一直在思考我到底想帶給大家什麼 而什麼才是TA會想要付費獲得的? 究竟是痛點不夠痛還是TA沒找對人?
Thumbnail
現代人生活節奏快速,常常將繁忙的工作和社交活動擠滿每一分鐘。然而,我們常常忽略了一個重要的健康元素:睡眠。睡眠不僅僅是休息的時間,它與身體代謝率之間存在著緊密的聯繫。接下來將說明睡眠品質和瘦身之間的關聯,並分享幾個改善睡眠品質的實用方法,從而增加你的代謝率,達到更好的瘦身效果。 睡眠與代謝率的密切關
今天想跟大家聊聊我的平台分享主題,以及為何你需要關注我這位創作者! 曾經,我是名列前茅的好學生,出社會後,選擇一份安穩的工作,這樣看似美好的人生,卻在出社會後的某一天,全都變了調.....
Thumbnail
今年的冷真是不同以往,氣候異常什麼北極震盪的,也不知道是否是因為年紀大了,反正覺得特別地冷,然後就收到兩個死訊,一個是我的大學同學開本班頭砲癌症,另一個是一位近八十歲的名醫急性心肌梗塞。什麼好事都可以搶第一,但死這件事真的就謝謝再連絡。
Thumbnail
信託與節稅的關聯 我有幸實地參與曹老師信託實戰課程,真是精彩豐富,受益良多。 「信託」作為「資產規劃與財富管理」最重要的工具,它主要功能是「節稅」嗎? 如果是,「信託」真的如坊間所傳是有錢人節稅之利器可以成功高額節稅嗎?….其實不然。 例如, 再如, 但是,
Thumbnail
最近對於「信任」的主題又有一層新的體悟,我發現原來信任跟自由有很大很大的關聯性。在關係裡面信任的標的,要先從自己開始,然後才是對方與這段關係。愛、信任與尊重似乎是維持一段,情趣不退的長久關係裡面的必要三大元素,其中缺一不可。 我最近的感受是,因為讓自己擁有了自由,可以做任何自己想要的事,可以要求也
Thumbnail
跟所有社會心理學的問題一樣,簡單的問題通常會有複雜的答案。早期一些研究發現,40%的人的現任情人,也是前任情人(e.g., Cupach & Metts, 2002; Langhinrichsen-Rohling, Palarea, Cohen, & Rohling, 2000)。用白話的方式說,
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
哈囉大家好~ 我是想 #過有選擇的人生 的寶拉Paula 創業日記來到了第31天 今天一直在思考我到底想帶給大家什麼 而什麼才是TA會想要付費獲得的? 究竟是痛點不夠痛還是TA沒找對人?
Thumbnail
現代人生活節奏快速,常常將繁忙的工作和社交活動擠滿每一分鐘。然而,我們常常忽略了一個重要的健康元素:睡眠。睡眠不僅僅是休息的時間,它與身體代謝率之間存在著緊密的聯繫。接下來將說明睡眠品質和瘦身之間的關聯,並分享幾個改善睡眠品質的實用方法,從而增加你的代謝率,達到更好的瘦身效果。 睡眠與代謝率的密切關
今天想跟大家聊聊我的平台分享主題,以及為何你需要關注我這位創作者! 曾經,我是名列前茅的好學生,出社會後,選擇一份安穩的工作,這樣看似美好的人生,卻在出社會後的某一天,全都變了調.....
Thumbnail
今年的冷真是不同以往,氣候異常什麼北極震盪的,也不知道是否是因為年紀大了,反正覺得特別地冷,然後就收到兩個死訊,一個是我的大學同學開本班頭砲癌症,另一個是一位近八十歲的名醫急性心肌梗塞。什麼好事都可以搶第一,但死這件事真的就謝謝再連絡。
Thumbnail
信託與節稅的關聯 我有幸實地參與曹老師信託實戰課程,真是精彩豐富,受益良多。 「信託」作為「資產規劃與財富管理」最重要的工具,它主要功能是「節稅」嗎? 如果是,「信託」真的如坊間所傳是有錢人節稅之利器可以成功高額節稅嗎?….其實不然。 例如, 再如, 但是,
Thumbnail
最近對於「信任」的主題又有一層新的體悟,我發現原來信任跟自由有很大很大的關聯性。在關係裡面信任的標的,要先從自己開始,然後才是對方與這段關係。愛、信任與尊重似乎是維持一段,情趣不退的長久關係裡面的必要三大元素,其中缺一不可。 我最近的感受是,因為讓自己擁有了自由,可以做任何自己想要的事,可以要求也
Thumbnail
跟所有社會心理學的問題一樣,簡單的問題通常會有複雜的答案。早期一些研究發現,40%的人的現任情人,也是前任情人(e.g., Cupach & Metts, 2002; Langhinrichsen-Rohling, Palarea, Cohen, & Rohling, 2000)。用白話的方式說,