놀랍게도 위의 짤을 공식에서 사용함ㄷㄷ

수수수수파베이스 나에게 시련을 줘....

데이터 추가 문제

supabase를 본격적으로 다루는건 이번 프로젝트에서 처음이었는데, 역시 해본 거랑 너무 달랐다. 수업때 한 건 정말 실습에 불과했구나 싶었다.

^ 대혼란 파티 (여러 데이터를 추가하면서 만든 테스트 데이터들)

^ 북마크 추가 버튼을 눌렀는데 위와 같은 오류 발생

이미 우리 DB에 저장된 장소라면 장소를 새로 등록하는 로직은 피해야하기에 추가한 확인 부분, 근데 여기서 에러가 떴다ㅠㅠ, 근데 또 위에서 봤던 것처럼 테스트 데이터는 너무 잘 전해졌다.

DB에 저장도 되고, frontend에도 잘 업데이트 되어서 화면에 잘 보이는데 이 에러는 도대체 뭐지???

406 에러는 진짜 처음 봤다ㅠㅠ, 그리고 튜터님도 정말 거의 본 적이 없다고 하셨다.

해서 북마크 추가하는 api를 튜터님과 뜯어보았다.

export const addBookmark = async (itemData, userId) => {
  try {
    // spot에 저장 여부
    // DB에 존재하는 스팟이라면 (유저 중 누군가 이미 저장한 장소인 경우)
    // 저장 하지 않는다
    // 1. 장소가 DB에 존재하는 확인
    const { data: existingSpot, error: spotCheckError } = await supabase
      .from('spots')
      .select('id')
      .eq('id', itemData.id)
      .maybeSingle();
    // 주의: single()은 에러가 뜹니다

    if (spotCheckError && spotCheckError.code !== 'PGRST116') {
      // 일치하는 row가 없을 때 에러 코드 = 'PGRST116'
      // 즉 존재하지 않는 데이터 에러(장소를 새로 저장해야한다는 뜻) 외의 에러는 방지
      throw spotCheckError;
    }

    // 2. 장소가 DB에 존재하지 않는다면 새로 저장
    // kakao에서 제공하는 itemData 객체에서 필요한 데이터만 저장
    if (!existingSpot) {
      const { data: newSpot, error: spotInsertError } = await supabase
        .from('spots')
        .insert([
          {
            id: itemData.id,
            place_name: itemData.place_name,
            x: Number(itemData.x),
            y: Number(itemData.y),
            address_name: itemData.address_name,
            category_name: itemData.category_name,
            phone: itemData.phone,
            road_address_name: itemData.road_address_name,
            place_url: itemData.place_url
          }
        ])
        .select()
        .single();

      if (spotInsertError) throw spotInsertError;
    }

    // 3. 북마크 table에 새로운 북마크 저장
    const { data: bookmarkData, error: bookmarkInsertError } = await supabase
      .from('bookmarks')
      .insert([
        {
          user_id: userId,
          spot_id: itemData.id
        }
      ])
      .select();
    if (bookmarkInsertError) throw bookmarkInsertError;

    // 성공값 반환
    return {
      success: true,
      bookmark: bookmarkData
    };
  } catch (error) {
    console.error('[AddBookmark] Error ->', error);
    throw error;
  }
};

정리하자면
1. 저장하고자 하는 장소가 이미 DB에 등록이 되어있는지 확인한다
2-1. 존재하지 않는 장소라면 DB에 추가하여 spot 아이디를 받아온다
2-2. 존재한다면 존재하는 spot 아이디를 받아온다
3. 북마크 테이블에 추가해준다

문제 원인/해결

위의 단계마다 콘솔을 찍어보며 알아낸 것은 1번 단계에서 에러가 뜬다는 것을 발견했다. 정말로다가 왜 그런지 알 수 없었지만 원래 maybeSingle() 부분이 single()로 되어있었다. 근데 알고보니 single() 에러였던....

근데 의아한건 2번 단계에서도 사용하는 single()은 에러를 일으키지 않았다.

해서 사실 문제의 원인과 해결도 하긴 했지만 근본적인 원인을 찾아내지는 못했다ㅠㅠ

아마도 시간이 남을때 조금 더 알아봐야할 것 같다.

Supabase를 사용하다가 406 에러가 뜬다면 single()의 문제가 아닌지 보기로 했다.