supabase의 데이터 쿼리 처리 방식 - await 필수 !

 

일반적인 비동기 함수 처리에서 API 요청을 하면 await가 있던 없던 모두 요청으로 받아들여진다.

await가 없는 비동기 함수 요청 로직을 콘솔에 찍으면 Promise{<pending>} 으로 나오며

객체 내부에는 'fulfilled'로 데이터 페칭이 진행된 것을 확인할 수 있다.

혹시 몰라 데이터 링크 부분에 오타를 내어 일부러 오류를 내었더니 콘솔에 오류가 찍히며 잘 실행되었다.

 

let query = supabase.from(HOTPLACE).select('*');
 if (area) query.eq('area', area);
  console.log('query', query);

  const getHotplaces = async () => {
    // let query = await supabase.from(HOTPLACE).select('*');
    const { data, error } = await query;
    if (error) {
      throw new Error(error.message);
    }
    return data;
  };

async - await를 적용한 query의 값은 콘솔에 잘 찍힌다.

하지만 위의 로직처럼 supabase에 API 요청을 await 없이 보냈을 때에는 Promise가 아닌 요청 객체 자체가 콘솔에 찍혔다.

왜 그럴까?

supabase에서는 await 없이 데이터를 요청하게 되면 자체적으로 데이터를 불러오는 것을 막게 되어있다고 한다.

Supabase의 API 메서드(.select(), .insert(), .update() 등)는 비동기 함수이다.
즉, 데이터를 즉시 반환하지 않고 비동기 처리가 끝난 후 데이터를 반환한다.

 

그렇기 때문에 await 처리를 하지 않은 query를 콘솔에 찍으면

Promise는 아직 완료되지 않았으므로 Promise 객체(요청 자체)를 출력하는 것이다.

 

async - await를 사용하면 promise를 벗겨내어 데이터 자체를 확인할 수 있다.