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的按鈕來新增外來鍵。

按了按鈕以後會跳出另一個面板設定，步驟也想當簡單，只要把表格的地方選到剛剛新增的表格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中前端在查詢外聯表格的時可以透過後台設定完成外來鍵的欄位，然後在前端直接選取外聯表格的欄位查詢，相當直覺、方便、維護容易。

有興趣的內容

• Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！
• 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！