はじめに
Vite+Reactの環境でSupabaseのクライアント設定とデータを取得して表示するまでの手順をまとめます。
本記事では以下の環境で動作検証を行なっています。
- Vite 8.3.0
- React 19.2.8
- @supabase/supabase-js 2.117.1
Supabaseクライアントとは？
Supabase（スーパーベース）はPostgreSQLをベースにしたオープンソースのバックエンドサービスです。API経由でデータベース、ユーザー認証、ストレージ機能を提供します。Supabeseに登録している情報を取得したり追加・削除を行うにはアプリとSupabaseを紐づける必要があります。
この紐付け作業を行うのがクライアントです。
クライアント設定
ここからは順を追ってSupabaseのクライアント設定をしていく方法を紹介していきます。
Supabaseの公式ドキュメントにReact環境での導入方法が記載されてますのでこちらに準拠した内容で解説していきます。
ここからの解説はSupabaseにプロジェクトとテーブルが作成されている事とRLSをDisabledに設定しているのを前提とします。
RLSはSupabaseのセキュリティ機能のためデフォルトで有効化されていますが、今回は学習目的での使用となるためあえてRLSを無効にします。アプリとして公開する場合はRLSを必ず有効にしましょう。
Supabase.jsのインストール
SupabaseにはJavaScriptやTypeScriptでSupabaseを操作するための公式のライブラリSupabase.jsが用意されているため、こちらを利用してSupabaseクライアントを設定します。
npm install @supabase/supabase-js
Supabaseの環境変数を設定する
Supabaseのクライアント設定をするために、.envファイルをルートディレクトリ直下に作成します。
作成した.envにはSupabaseのプロジェクトのURLとパブリッシャブルキーを記述します。この2つはSupabaseにプロジェクトが作成済みの場合は以下のページに記載されているのでここからコピーしましょう。
プロジェクトのURLとパブリッシャブルキーを取得出来たら.envファイルに以下のように記述します。
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
<SUBSTITUTE_SUPABASE_URL>と<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>は取得したプロジェクトのURLとパブリッシャブルキーに置き換えてください。
なお、環境変数名は上記のVITE_SUPABASE_URLとVITE_SUPABASE_PUBLISHABLE_KEYでなくても良いですが、viteは環境変数名の頭にVITE_を付ける必要があります。
また、Gitを使用する場合は作成した.envファイルをGitの管理から除外しましょう。SupabaseのプロジェクトのURLとパブリッシャブルキーが第三者から閲覧出来てしまうためです。
.env
Supabaseクライアントの設定
Supabaseのクライアントを設定するためにsupabaseClient.jsファイルを作成し、次の記述をします（ファイル名はsupabaseClient以外でも問題ないです）
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
export const supabase = createClient(supabaseUrl, supabasePublishableKey)
次のコードは.envファイルに環境変数として定義したSupabaseのURLとパブリッシャブルキーをインポートして変数に代入しています。
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
この2つの値をcreateClientメソッドの引数に渡してエクスポートすることでクライアント設定が完了です。
Supabaseからデータを取得する
Supabaseのクライアント設定が完了したので、Supabaseに接続して登録しているデータを取得してみましょう。
import { useEffect, useState } from 'react'
import { supabase } from './lib/supabaseClient'
const App = () => {
const [records, setRecords] = useState([]);
useEffect(() => {
getData();
}, []);
const getData = async () => {
const { data, error } = await supabase.from('records').select();
if (error) {
console.error(error)
return
}
setRecords(data)
}
return (
<ul>
{records.map((record) => (
<li key={record.id}>{record.name}</li>
))}
</ul>
)
}
export default App
Supabaseのクライアント設定をしたsupabaseClient.jsをsupabaseとしてインポートします。
import { supabase } from './lib/supabaseClient'
supabaseのfromメソッドの引数にはプロジェクト名を指定します。
メソッドチェーンでselectメソッドを実行します。これでプロジェクトに登録されている全てのテーブルのデータを取得できます。
const { data, error } = await supabase.from('records').select();
Supabaseからデータを取得する関数をuseEffectでマウント時に実行し、データの取得が成功すればSupabaseに登録しているテーブルのデータが表示されます。
useEffect(() => {
getData();
}, [])
もし、Supabaseからデータの取得に失敗してしまう場合は以下の点を確認しましょう。
- 環境変数名に
VITE_が付いているか - プロジェクトのURLとパブリッシャブルキーは間違っていないか
-
.envファイルはプロジェクトのルートディレクトリにあるか - コードのスペルミスは無いか
おわりに
Reactでデータベースからデータの取得を行うのは初めてだったので結構苦戦しました。
Supabaseを利用するとバックエンドをすぐに用意出来て手軽に試せるのでもっと色々試していきたいです。