【Supabase】公式npmパッケージを使ってデータを取得・投稿する

こんにちは、ちょっと株式会社でフロントエンドエンジニアをしているShumpeiです。
今回はSupabaseを使ったJavaScriptのサンプルを紹介します。

Supabaseは無料でPostgreSQLを使えるBaaSです。
https://supabase.com/

DBの他、storageやAuthentication、Edge Functionsなどのサービスもあり、
Jamstackだったりサーバレス構成にはとても相性のよいサービスです。

また、GUIでは表現むずかしいところもSQL関数が書けるので、
ケアのされっぷりが心地よいです。
もちろんTypeScriptもサポートされています。

今回は公式が配布しているSupabase用のクライアント @supabase/supabase-js を使ってデータベースの読み書きができる簡単なサンプルを紹介します。

おことわり

事前にSupabaseのユーザ登録が完了していることと、
使用するデータベースがSupabase内に出来ていることを前提とします。

今回は id、 lunch、is_done、created_at というフィールド名を使った例を示します。

検証バージョン

• @supabase/supabase-js: 1.35.6

https://www.npmjs.com/package/@supabase/supabase-js

参照

公式Doc

• supabase-js
  • https://supabase.com/docs/reference/javascript
• 日本語版
  • https://www.supabase.jp/docs/

インストール

まずはパッケージをインストールします。

npm install @supabase/supabase-js

または

yarn add @supabase/supabase-js

環境変数でKEYを管理する

.env ファイルを作り、アプリからは環境変数で値を取得するようにします。

.env

SUPABASE_URL=https://<発行されたサブドメイン>.supabase.co
SUPABASE_API_KEY=<発行されたAPIキー>

設定する値はSupabaseのダッシュボードに行き、APIタブから確認できます。

• https://app.supabase.com/project/YOUR_DOMAIN/settings/api

SUPABASE_URL には Project URL にある値を割り当てます。
SUPABASE_API_KEY には Project API keys から anon public にある値をコピペしてください。

supabase-jsを使えるようにする

インストールした @supabase/supabase-js をインポートして繋ぎこみます。

/repository/index.js

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

const supabaseUrl = process.env.SUPABASE_URL
const supabaseAnonKey = process.env.SUPABASE_API_KEY

const supabase = createClient(
  supabaseUrl,
  supabaseAnonKey
);

export default supabase

これでアプリ内で使えるようになります。

supabase-jsを使う

ユースケースごとによしなにメソッドを作りましょう。

/service/index.js

import supabase from './repository/service.js'

// Supabaseで登録したテーブル名
const TABLE_NAME = 'sample'

// データ取得
export const getList = async () => {
  try {
      const { data, error } = await supabase
		.from(TABLE_NAME)
		.select('*')
		.order('created_at')

      if (error) throw new Error(error)

      return data
    } catch (e) {
        console.error(e.message)
    }
};

// データ更新
export const updateLunch = async ({ id, lunch, isDone }) => {
  try {
      await supabase
            .from(TABLE_NAME)
            .insert({ id, lunch, is_done:isDone })
  } catch (e) {
      console.error(e.message)
  }
};

/usecase/index.js

import { getList, updateLunch } from './service/index.js'

export const myList = () => {
  return getList()
}

export const updateLunchById = ({id, lunch, isDone}) => {
  updateLunch({id, lunch, isDone})
}

なんとなくイメージ湧きましたでしょうか？

あとはこのメソッドを実行されましたら
Supabase側のデータベースの画面に行き、
ヘッダにある Refresh ボタンをクリックすると再読み込みが走り、
データが更新されるのを確認できるかと思います。

まとめ

簡単ではありますが、Supabaseの公式パッケージを使用したサンプルスクリプトを書いてみました。
プロダクトの初期フェーズやプロトタイプを作るのであれば簡単に作れますので、検討する価値があるかと思います。

ぜひ使ってみてください⚡

---

ちょっと社では絶賛エンジニアを募集しています！
Jamstackに興味があるエンジニアさんはぜひご連絡ください〜〜
一緒に働きましょう〜〜🙌

ちょっと株式会社
https://chot-inc.com/