Supabase edge function insert data

새로운 프로젝트 생성시 찾아보기 귀찮아서 메모겸 적어두어요. 

 

이번에는 Supabase 와 연결하여 데이터를 직접 넣고 조회하는 기능을 만들어 볼거에요.

 

먼저 디렉토리 구조에요. 

아래와 같은 구조로 구성을 해주세요. 

cores.ts, index.ts, .env 파일을 제외한 나머지는 supabase 프로젝트 init 시에 자동 생성 되어요. 

supabase 프로젝트 init 방법에 대해 궁금하시다면 이전 포스팅 글을 읽고 와주세요. 

Supabase edge function

 

 

1. index.ts 

import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.7.1'
import { corsHeaders } from "./shared/cors.ts"



Deno.serve(async (req: Request) => {

  try {
    const supabase = createClient(
      // Supabase API URL - env var exported by default.
      Deno.env.get('PUBLIC_SUPABASE_URL') ?? '',
      
      // Supabase API ANON KEY - env var exported by default.
      Deno.env.get('PUBLIC_SUPABASE_KEY') ?? '',
      // Create client with Auth context of the user that called the function.
      // This way your row-level-security (RLS) policies are applied.
      {
        global: {
          headers: { Authorization: req.headers.get('Authorization')! },
        },
      }
    )
    
    ///hashtag 테이블 hashtag_name 컬럼에 데이터를 넣고, 조회 해요
    const { data, error } = await supabase.from('hashtag')
    .insert({ hashtag_name: "TEST" }).select()
    
    
    if (error) {
      throw error
    }

    return new Response(JSON.stringify({ data }), {
      headers: { ...corsHeaders,  'Content-Type': 'application/json' },
      status: 200,
    })

  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      status: 400,
    })
  }
})

 

2.  cors.ts

export const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
  }

3. .env

아래 키들은 각각 아래 그림에 보이는 키들을 참조하여 작성해 주세요. 

Supabase -> Project Settings -> API 

1.PUBLIC_SUPABASE_URL

2. PUBLIC_SUPABASE_KEY 

 

.env 파일에서 키값을 입력시 SUPABASE_ 로 시작하면 에러가 발생하기 때문에 

앞에 다른 문자열을 추가해주세요. 

PUBLIC_SUPABASE_URL="https://xxxxxxx.supabase.co"
PUBLIC_SUPABASE_KEY="xxxxxxxxx.xxxxxx.xxx"

 

3. 이제 서비스를 시작하고 실행시켜 보아요. 

supabase start           

supabase functions serve --env-file ./../supabase/functions/.env

 

아래처럼 실행이 된다면 성공이에요. 

 

4. 해당 테이블의 RLS 를 해제 해 주세요. (테스트를 위해 해제하는 것 입니다!!!)

아래 항목을 체크 해제 하고 Save를 눌러 저장해주세요.

Enable Row Level Security (RLS)

 

5. 본인의 프로젝트 이름에 맞게 url을 입력하여 실행해주세요.