Skip to content

建立 2026-09-14 更新 2026-09-14

JavaScript Client 與 CRUD

@supabase/supabase-js 把 REST API 包成可串接的方法。學會 from + select / insert / update / delete，再加上過濾器，就能完成大多數資料操作。

安裝與建立 Client

npm install @supabase/supabase-js

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
)

每個回傳值幾乎都是 { data, error }。先看 error，不要假設 data 一定有值。

讀取

const { data, error } = await supabase
  .from('todos')
  .select('id, task, is_complete')
  .eq('is_complete', false)
  .order('created_at', { ascending: false })
  .limit(20)

常用過濾：eq、neq、gt、lt、is、in、like。單筆可用 .eq('id', id).single()；找不到時 error 會告訴你。

關聯表（需有外鍵）：

const { data, error } = await supabase
  .from('todos')
  .select('id, task, profiles(display_name)')

新增

const { data, error } = await supabase
  .from('todos')
  .insert({ task: '寫 RLS 政策', user_id: user.id })
  .select()

.select() 才能拿回插入後的列（含資料庫產生的 id）。user_id 必須等於目前使用者，否則 RLS 的 with check 會拒絕。

更新與刪除

const { error: updateError } = await supabase
  .from('todos')
  .update({ is_complete: true })
  .eq('id', todoId)

const { error: deleteError } = await supabase
  .from('todos')
  .delete()
  .eq('id', todoId)

一定要加過濾。 沒有 .eq(...) 的 update / delete 會作用在政策允許的所有列，開發時用自己的帳號測試可能「只改一筆」，換一個權限較寬的政策就變成改到全部。

呼叫資料庫函式

const { data, error } = await supabase.rpc('incomplete_count')

對應 SQL Editor 裡建立的函式，見 SQL Editor。

錯誤怎麼讀

error.message 常是給人類看的句子；真正分類靠 error.code（Postgres）或 HTTP 狀態。RLS 擋住時，讀取多半回空陣列而不是丟錯，寫入才會失敗。這跟「連線失敗」不一樣，除錯時先確認有沒有登入、政策有沒有涵蓋這次操作。

相關資料