Draftbit Document 공부| REST API Integration: Supabase 2, POST/PATCH/DELETE

Draftbit Document 공부| REST API Integration:Supabase

공부 자료는

https://docs.draftbit.com/docs/supabase#post-request-to-submit-a-new-row

Connect Supabase to Draftbit - REST API Documentation

 

 

공부 순서는

1. POST request: 새로운 데이터 제출

2. PATCH request: 기존 기록 업데이트

3. DELETE request : 기존 기록 제거

 

갑자기 Passing data 추가

 

 

결과물은..

Add 잘 들어가고요.

근데 궁금한 게 왜 id가 53부터 시작하는 지?

 

 

 

Update는 다 잘 되고,

 

 

 

Passing data 로 하는 게 맞는지는 모르겠지만,

데이터 다른 페이지로 넘기고 (너무 답답해서 번호도 집어넣음)

 

 

Delete 

삭제하고 다시 목록 페이지로 넘어가게 Add action

 

 

아직 갈 길이 멀다.

 

 

 

---

주저리주저리 공부내용

 

1. POST request

DB에 새로운 데이터 제출하려면~!~!~!

 

 

 

새로운 Endpoint 만들기

 

Step 1 Basics

• Name: Add new item
• Method: POST

Step 2 Object & Role

• Object: groceries
• Role: Create

Step 3 Path & Parameters

• /groceries

Step 4 Request Body

{
"key": "value"
}

이렇게 되어있는 걸

{
"title": {{value}}
}

 로 바꿔주기. 

그러면,

 

Request Body Test Values가 생성됨.

 

Step 5 Headers

KEY: Prefer

VALUE: return=representation

 

빌더 내에서 JSON 응답으로 Supabase 데이터 테이블에 추가된 새 행을 확인하려면, 반환=대표라는 값과 함께 Prefer라는 새 헤더를 전달해야 한다고 한다... (무슨말이죠,, 어디로 가야하죠아젓시,, 일단 하라는대로 하기)

 

 

I got you

 

supabase에 실시간으로 업로드 되는 것 확인함.

 

임의로 넣은 cookie가 되는 거 확인했고,

 

 

내가 입력하는 값이 출력되게 하려면

 

Text Input란 만들어주고, Setup에서 Data Source를 textInputValue로 만듦.

 

 

버튼에도 endpoint 넣어주기

 

 

와 뭔가 된다.

 

 

 

2. PATCH request: 기존 기록 업데이트

DB에 저장된 데이터를 업데이트해보자!

 

 

새로운 Endpoint 만들기

 

Step 1 Basics

• Name: Update an item
• Method: PATCH

Step 2 Object & Role

• Object: groceries
• Role: Update

Step 3 Path & Parameters

• Path는
  • /groceries?id=eq.{{id}}
  • /테이블명?컬럼명=eq.{{컬러명}}
• Path Test Values는
  • id  |  33

Step 4 Request Body

{
"key": "value"
}

이렇게 되어있는 걸

{
"columnName": {{newTitleValue}}
}

니까

나는 
{
"title": {{value}}
}

 Request Body Test Values는 

value는 Orange로 바꿔주라함.

 

 

33번의 cookie가 Orange로 바뀐 거 확인함..

 

 

 

그럼 이제 밖에 버튼을 만들어서 적용해보자.

 

 

 

text input의 data source는 textinputValue 2로 잡아주고 

(설명서에는 이렇게 안써이는데.. 이리저리 해보다보니...)

 

button API 는

Query id를 textinputValue2, Body의 new title Value는 orange 유지..

 

 

 

왜인지는 모르겠으나

cookie id가 29부터 시작이라 

29 넣어봄.

 

 

29번이 Orange로 바뀌었음을 확인함.

 

 

 

넘어갑니다.

 

 

 

 

3. DELETE request : 기존 기록 제거

삭제 가실게요.

 

endpoint추가

 

Step 1 Basics

• Name: Delete item
• Method: DELETE

Step 2 Object & Role

• Object: groceries
• Role: Delete

Step 3 Path & Parameters

 

• Path는
  • /groceries?id=eq.{{id}}
  • /테이블명?컬럼명=eq.{{컬럼명}}
• Path Test Values는
  • id  |  30 으로 해줌.

바로 Step 6 Test

잘 지워짐

 

 

근데 설명이 잘 가다가 

왜 갑자기 없던 페이지 만들어서 진행하시는데..

 

 

우리 잘 맞춰가고 있었잖아요....  ^ㅠ^... 

 

이거 .. 

Passing data 문서 보고 해결 

https://wontime.tistory.com/11

Draftbit Document 공부| REST API Integration: Supabase Passing data, 화면끼리 데이터 전달하기

---