supabaseで簡単なTodoアプリを構築した話 - リアルタイム機能

はじめに

Baas(Backend As A Service)で何かサービスを構築してみたいと思い、
firebaseを触ってみようと思ったところ、Firebase の代替と謳われているsupabaseを発見。

こちらの方が面白そうだと感じたため、構築してみることに

使ったもの

• Vite + Svelte + Typescript

  • @supabase/supabase-js
  • tailwind css

• supabase

  • auth
  • db
  • realtime

これまで

1. フロント側でsupabaseを呼び出せるところように

   https://qiita.com/doyaseizin/items/8820a095a433d09f300d

2. データ取得・操作

   https://qiita.com/doyaseizin/items/d6e0237b700448cc1826

3. ポリシー設定

   https://qiita.com/doyaseizin/items/2afe8df35e0a7adc7e00

tasksテーブル

項目	型
id	uuid
user_id	uuid
content	text
is_done	boolean
created_at	date

前回まででこのテーブルから自分が作成した、Todoの取得や操作ができるようになった。

今回

共同作業などを行っているときは、
他の人の操作が即座に自分の画面に表示された方が都合がいい。

今回はsupabaseのリアルタイム機能を使って、DBの操作が行われたときに、
即座に画面に反映されるようにしていく。

1. Realtimeを有効化する

1. サイドメニューより、Table Editorタブを開く
2. テーブルを選択し、テーブル名横の∨をクリックし、Edit Tableを選択する。
3. Enable Realtimeにチェックを入れてSaveする

2. リアルタイムリスナーをセットアップ

1. Channelをセット

     const TaskChannel = supabase.channel('task')
   

2. イベントに対してのコールバック関数を設定

   例) tasksテーブルにINSERTイベントが起きた時に着火させたい場合

     const TaskChannel = supabase.channel('task')
   
     TaskChannel
       .on (
         'postgres_changes',
         { event: 'INSERT', schema: 'public', table: 'tasks' },
         (payload) => {
           // こちらに処理を作成
         }
       )
   

同様にUPDATEやDELETEのイベントが起きた時にも処理を作成することで、
DBの状態をリアルタイムに受け取り、ローカルへ反映させることが可能でした。

これでシンプルなToDoアプリの完成です。

次回はsupabaseをdocker-composeで起動し、利用した感想などを書いていきます。

supabase、とってもいい感じですね