【supabase】supabase-jsでsupabaseからデータを取得する

はじめに

jisouの課題で学習記録アプリを作成しており、supabaseのからデータを取得する実装について、備忘録として記事にまとめていきたいと思います。

supabaseの公式記事を参考に実装しました。
https://supabase.com/docs/reference/javascript/installing

気づき

①supabase-jsをターミナルでインストール

npm install @supabase/supabase-js

②Supabase clientを初期化する

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

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

※データベースのURLは table editor → Project Setting → DATE APIのProject URLで確認

※public-anon-keyは上記Project SettingのAPI Keysで確認

※VITEではimport.meta.env.VITE_SUPABASE_URLimport.meta.env.VITE_PUBLIC_SUPABASE_ANON_KEYで.envファイルに格納しているURLとANON取得する

【つまずいた点】
ANON_KEYを取得する際にPUBLICの記載を失念していたために、データを取得できていなかった

③supabaseのデータを取得する非同期処理の関数を定義

import {supabase} from "./supabase";

export const getAllTodos = async () => {
  const { data, error } = await supabase.from("study-record").select("*");

  if (error) {
    console.error("データ取得エラー:", error.message);
    return [];
  }

  return data;
};

おわりに

今回初めてReactでデータベースからデータの取得を実装してみました。
まだまだ、データベースについてSQLやquery等、理解できていない用語が出てきているので、また備忘録として記事に残していきたいと思います。