Supabaseでデータベースの変更をリアルタイムに検知する

Supabaseはいわゆる BaaS (Backend As A Service)で、ちまたでは Firebase の RDB（PostgreSQL）版と言われる。

今回は、Supabaseの Realtime 機能を使って、データベースの変更をリッスンし、接続されているクライアントに一斉に通知する方法を紹介する。

スポンサーリンク

準備

まず、変更を通知する対象のテーブルのリアルタイム機能を有効にする。（デフォルトは無効）

[Database] → [Tables] の順に進み、対象のテーブルの鉛筆アイコンをクリック。

[Enable Realtime] のチェックを入れ、[Save] ボタンで保存する。

筆者の環境では、この設定が反映されるまでに時間がかかったので、ちょっと待ってから次のステップに進んだ方がいいも。

実装

以下は、データベースの変更通知を受信し、データの変更内容をコンソールに出力するサンプルコードである。

import { supabase } from "../lib/supabaseClient"

supabase
.channel('*')
.on('postgres_changes', { 
  event: '*', 
  schema: 'public', 
  table: "tasks" 
}, payload => {
  if (payload.eventType == "INSERT") {
    console.log("登録データ", payload.new)
  } else if (payload.eventType == "UPDATE") {
    console.log("変更前データ", payload.old)
    console.log("変更後データ", payload.new)
  } else if (payload.eventType == "DELETE") {
    console.log("削除データ", payload.old)
  }
})
.subscribe()

上のコードのポイントを解説する。

channel()

SupabaseのRealtime 機能にはチャンネルという概念がある。これは、いわゆるチャットルーム（もしくはグループ）的なイメージで、指定したチャンネルのメッセージだけを受信することなどが可能だ。

今回はデータベースの変更監視のため、全チャンネルを対象とする * を指定している。

on()

監視するデータの種類、オプション、変更を検知した時のコールバック関数を指定する。

まず、第１引数には、データベース（Postgres）変更の監視を示す postgres_changes を指定する。

第２引数には対象となるスキーマやオブジェクト、イベントタイプなどのオプションを指定する。

名前	説明	例
event	データベースのどの操作を検知するか指定	INSERT or UPDATE or DELETE or *
schema	スキーマ名	public
table	テーブル名	my_table
filter	検知するレコードの絞り込み条件（指定方法が謎…）	room_id=eq.${roomId}

第３引数に、変更を検知した時に呼び出すコールバック関数を指定する。

コールバック関数の引数で、データベースで発生した操作、変更前、変更後のデータを取得できる。

名前	説明
event	発生した操作（INSERT or UPDATE or DELETE）
old	変更前のデータ
new	変更後のデータ

まとめ

SupabaseのRealtime を使って、データベースの変更をリアルタイムに他のクライアントに通知する方法を紹介した。公式のドキュメントの情報が少なく、なかなか手間取ることも多いが、RDBに慣れ親しんだ筆者にとって、PostgreSQLのBaaS (Backend As A Service)は魅力的なので、地道に学んでいこうと思う。