Zenn
📘

「Remix v2」に「supabase」をインストールする

2024/04/14に公開
Supabase
Remix
tech

テーブルの作成,データを手動で登録











データベースの事前準備

  1. ポリシーの設定
  2. アクセスKEYの取得

1. ポリシーの設定

セキュリティポリシーの設定です。
メニューからセキュリティ＞ポリシー＞作成＞




（すべての読み取りを許可）


2. アクセスKEYの取得

メニューから設定＞API





以下を取得しました。

  • URL
  • APIKEY

事前準備は完了です。

Remixにインストール

  1. supabaseのライブラリをインストールする
  2. .envファイルにアクセスKEYを入れる
  3. ライブラリ読み込み
  4. ローダーでGETリクエスト

1. supabaseのライブラリをインストールする

npm install @supabase/supabase-js

2. .envファイルにアクセスKEYを入れる

プロジェクトのトップディレクトリに .envを作る（.envは環境変数です）

.env
SUPA_BASE_URL=https://axmwuzurqlhmlzkptdco.supabase.co
SUPA_BASE_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImF4bXd1enVycWxobWx6a3B0ZGNvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTMwODE5MTIsImV4cCI6MjAyODY1NzkxMn0.o6J4ZiLjixDrV-4kuYSGV8pLz1fcyzuEYeVMw1WIMw4

3. ライブラリ読み込み

app\routes\_index.tsx
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPA_BASE_URL!;
const supabaseAnonKey = process.env.SUPA_BASE_API_KEY!;
const supabase = createClient(supabaseUrl, supabaseAnonKey);

4. ローダーで async GETリクエスト

app\routes\_index.tsx
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPA_BASE_URL!;
const supabaseAnonKey = process.env.SUPA_BASE_API_KEY!;
const supabase = createClient(supabaseUrl, supabaseAnonKey);



import { LoaderFunction, json } from "@remix-run/node"
import {useLoaderData} from "@remix-run/react"

export const loader: LoaderFunction = async () => {
  const { data, error } = await supabase
    .from('test')
    .select('*');

  if (error) throw new Error(error.message);
  return json(data);
};


export default function Index() {
  const data = useLoaderData();
  return (
    <div>
      <h1>Data Fetched</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

できたわ😁

別の記事でClerkAuthで認証してログインユーザーだけが自分のデータを読み取り書き込み可能にする設定も書いたので読んでね

https://zenn.dev/harukii/articles/f9c1a66ae344fc

Discussion