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

2022年12月11日日曜日

Supabase

t f B! P L

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

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

スポンサーリンク

準備

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

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

enter image description here

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

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

実装

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

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()

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

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

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

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

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

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

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

まとめ

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

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ