supabaseで簡単なTodoアプリを構築した話 - データ取得・操作

はじめに

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

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

使ったもの

• Vite + Svelte + Typescript

  • @supabase/supabase-js
  • tailwind css

• supabase

  • auth
  • db
  • realtime

前回

フロント側でsupabaseを呼び出せるところまでやった

前提

前回の手順で、supabase上のsqlエディターから
↓のテーブルを作成してある。

tasksテーブル

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

今回はこのテーブルからTodoの取得や新規登録をしてみる。

続き

1. submit時にinsertTodoを実行するようなフォームを用意する。

   <script lang='ts'>
     const new_todo = '';
   </script>
   
   <form on:submit|preventDefault={insertTodo} class="todo-form">
     <div>
       <input
         id="content"
         name="content"
         type="text"
         placeholder="新しいタスクを入力..."
         bind:value="{new_todo}"
       />
     </div>
     <button type="submit">
       作成
     </button>
   </form>
   

2. 前回作ったsupabaseClient.tsを呼び出し、insertTodoメソッドを作成する

   import { supabase } from '../supabaseClient';
   const new_todo = '';
   
   const insertTodo = async () => {
     const query = supabase
       .from('tasks')
       .insert({
         content: new_todo
       })
   
     await query
   }
   

3. これだけで新規登録ができた

4. 全件取得するには次のように取得できる。

   const listTodo = async () => {
     const query = supabase
       .from('tasks')
       .select()
   
     const { data, error } = await query
   }
   

同様にUPDATEやDELETEもSQLを操作するようにsupabaseから値を取ってくることができる。

これだと他のユーザーが作ったものも操作できてしまう。
自分が作ったものだけを操作できるようなポリシーの設定を次回書きます。

supabase、とってもいい感じ

追記

投稿しました。