Supabase に入門した

• 前提
• プロジェクト情報のの確認
• テーブルの作成
  • テーブル作成
  • RLS ポリシーの作成
• Vite プロジェクトの作成
  • プロジェクト作成
  • Supabase パッケージのインストール
  • 環境変数の設定
• 実装
• 動作確認
• 参考資料

Use Supabase with React | Supabase Docs をベースに、 VanillaJS で DB に接続しに行ってみた。

前提

• Supabase プロジェクト作成済み

プロジェクト情報のの確認

1. プロジェクトページを開く
2. 右下の情報をメモ
   • Project URL
   • API Key

テーブルの作成

プロジェクトページ -> SQL editor を選択。 表示された SQL エディターで SQL を実行していく。

テーブル作成

-- テーブル作成
create table instruments (
  id bigint primary key generated always as identity,
  name text not null
);
-- テストデータ挿入
insert into instruments (name)
values
  ('violin'),
  ('viola'),
  ('cello');

-- row level security 有効化
alter table instruments enable row level security;

RLS ポリシーの作成

テーブル内のデータを、アノニマスユーザーが読み取り可能に設定。

create policy "public can read instruments"
on public.instruments
for select to anon
using (true);

• anon: アノニマスユーザー

Vite プロジェクトの作成

プロジェクト作成

node ➜ /workspaces/TIL/supabase (supabase-firststep) $ npm create vite@latest firststep
Need to install the following packages:
create-vite@7.0.3
Ok to proceed? (y) y


> npx
> create-vite firststep

│
◇  Select a framework:
│  Vanilla
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in /workspaces/TIL/supabase/firststep...
│
└  Done. Now run:

  cd firststep
  npm install
  npm run dev

Supabase パッケージのインストール

cd firststep && npm install @supabase/supabase-js

環境変数の設定

.env.local を作成し、そこにメモしたプロジェクト情報を指定。

VITE_SUPABASE_URL=<Project URL>
VITE_SUPABASE_ACCESS_TOKEN=<API Key>

実装

■ src/main.ts:

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY);

const { data } = await supabase.from("instruments").select();

console.log(data);

const app = document.getElementById('app');

if (app) {
  // ルート要素作成
  const root = document.createElement('div');

  // タイトル追加
  const h1 = document.createElement('h1');
  h1.textContent = "Supabase Instruments";
  root.appendChild(h1);

  // リスト作成
  const ul = document.createElement('ul');
  data?.forEach(instrument => {
    const li = document.createElement('li');
    li.textContent = `id: ${instrument.id}, name: ${instrument.name}`;
    ul.appendChild(li);
  });
  root.appendChild(ul);

  // ルート要素をアプリケーションに追加
  app.appendChild(root);

}

動作確認

npm run dev して http://localhost:5173 にアクセスすると、挿入したデータが表示される。 OK.

参考資料

• Use Supabase with React | Supabase Docs