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

鼻爾蓋茲

發佈於即時、安全、強大：探索 Supabase 的無限可能

2023/12/11 更新2023/08/29 發佈閱讀 7 分鐘

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表格新增外來鍵的新欄位

按了按鈕以後會跳出另一個面板設定，步驟也想當簡單，只要把表格的地方選到剛剛新增的表格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: "[email protected]",
    },
  },
  {
    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: "[email protected]",
    },
  },
];