Use Supabase with React | Supabase Docs をベースに、 VanillaJS で DB に接続しに行ってみた。
前提
- Supabase プロジェクト作成済み
プロジェクト情報のの確認
- プロジェクトページを開く
- 右下の情報をメモ
- 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 devSupabase パッケージのインストール
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.