[supabase] 배열 속성 column에 값 추가하기

구현 사항

사용자가 클래스를 예약하면 class 테이블에 있는 reserved_user_id 배열에 예약한 유저의 아이디를 추가해야함

배열에 값을 추가하기 위해서는 기존의 값을 불러와서 추가로 정보를 넣어서 업데이트 해야한다.

 

1. 클래스 테이블에서 현재 클래스 레코드의 reserved_user_id 값 조회하기

 // class 테이블의 reserved_user_id 배열 조회
  const { data: reservedUserList, error: fetchError } = await supabase
    .from('class')
    .select('reserved_user_id')
    .eq('class_id', classId)
    .single();

  if (fetchError) {
    console.log('예약한 유저 리스트 조회 중 오류 발생 =>', fetchError);
    return;
  }

 

2. 불러온 reserved_user_id 리스트에 지금 예약한 유저 아이디를 추가하기

reserved_user_id 필드가 null일 경우,  not iteration 에러가 발생하기 때문에 삼항 연산자를 사용하여 null일 경우를 처리해주어야 한다. 

만약 클래스 테이블의 해당 필드가 null이라면, 즉 아직 아무도 예약하지 않았다면, 새로운 예약자의 userId만을 배열에 넣는다. 이미 다른 예약자가 있다면, 기존 배열에 userId를 추가한다. 

// 기존 reserved_user_id 리스트에 예약한 유저 아이디를 추가
  // reservedUserList : {reserved_user_id: Array(3)}
  const { error: addError } = await supabase
    .from('class')
    .update([
      {
        reserved_user_id: reservedUserList.reserved_user_id ? [...reservedUserList.reserved_user_id, userId] : [userId]
      } // 리스트 값이 null일때 처리를 위해 삼항 연산자 사용
    ])
    .eq('class_id', classId)
    .select();

  if (addError) {
    console.log('예약한 유저리스트 업데이트 오류 발생 =>', addError);
    return;
  }
};

 

3. 클라이언트에서 updateReservedUser 함수에 userId와 classId를 전달하여 함수 실행

const handleReserveButtonClick = async () => {
      // class 테이블의 reserved_user_id 에 예약한 유저 아이디 리스트 업데이트
      updateReservedUser({ userId, classId });

	// ...중략
  };

 

🔽전체 코드

import { supabase } from '../supabase/supabase';

// class 테이블의 reserved_user_id 에 예약한 유저 아이디 리스트를 업데이트하는 api
export const updateReservedUser = async ({ userId, classId }: { userId: string; classId: string }) => {
  // class 테이블의 reserved_user_id 배열 조회
  const { data: reservedUserList, error: fetchError } = await supabase
    .from('class')
    .select('reserved_user_id')
    .eq('class_id', classId)
    .single();

  if (fetchError) {
    console.log('예약한 유저 리스트 조회 중 오류 발생 =>', fetchError);
    return;
  }

  // 기존 reserved_user_id 리스트에 예약한 유저 아이디를 추가
  // reservedUserList : {reserved_user_id: Array(3)}
  const { error: addError } = await supabase
    .from('class')
    .update([
      {
        reserved_user_id: reservedUserList.reserved_user_id ? [...reservedUserList.reserved_user_id, userId] : [userId]
      } // 리스트 값이 null일때 처리를 위해 삼항 연산자 사용
    ])
    .eq('class_id', classId)
    .select();

  if (addError) {
    console.log('예약한 유저리스트 업데이트 오류 발생 =>', addError);
    return;
  }
};