Javascript로 Supabase데이터 사용하기

javascript에서 supabase의 데이터를 조회, 삭제, 추가하려면 어떻게 해야 할까.
방법은 크게 두 가지라고 한다. 그 중 supabase의 클라이언트 라이브러리를 활용하는 것이 일반적이다. supabase는 RESTful API와 실시간 기능을 모두 제공하기에 다양한 접근이 가능하다고 한다.

먼저 Supabase 클라이언트 라이브러리 방식이 있다. 이는 supabas 클라이언트를 통해 데이터 베이스 테이블에 직접 접근하는 방식이라고 한다. supabase는 공식 자바스크립트 클라이언트를 제공하기에 다음 과정을 통해 설치 및 초기화 단계를 거쳐야 한다.

import { createClient } from '@supabase/supabase-js';
const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY');

따라서 따로 supabase.js를 만들어 이 안에 스크립트를 작성해 놓는 것이 편하다. 위 코드에 export만 따로 만들어준다.

이제 데이터 가져오기, 삭제, 추가 등을 다음과 같이 실행할 수 있다.

import { supabase ] from '~/~/supabse';
       
async function() {
  const { data, error } = await supabase
    .from('your_table') // 테이블 이름
    .select('*'); // 가져올 컬럼, *는 모두 가져옴

  if (error) console.log('에러:', error);
  else console.log('데이터:', data);
}

다음으로 Axios + Edge Functions나 REST API를 사용하는 방식이 있다. 이 방식은 Supabase Edge functions을 호출하는 방식으로, Axios로 Post 요청을 보내고 있는 것이다. 서버리스 함수를 통해 데이터를 처리하거나 가져오는 방식이다.

import axios from "axios";

const BASE_URL = ~;
const API_KEY = ~;
const AUTHORIZATION = ~;

~

REST API로 호출하는 것도 보여주겠다.

async function fetchViaRest() {
  const response = await fetch('YOUR_SUPABASE_URL/rest/v1/your_table?select=*', {
    headers: {
      'apikey': 'YOUR_SUPABASE_KEY',
      'Authorization': `Bearer YOUR_SUPABASE_KEY`
    }
  });
  const data = await response.json();
  console.log(data);
}