TIL #65 | supabase에서 데이터를 가져오는 방법

1. 테이블에 존재하는 전체 데이터 가져오기

export async function getRegions() {
  const { data, error } = await supabaseForClient
    .from("project_regions")
    .select("*")

  if (error) console.log("error", error)

  return data
}

테이블로부터 전체 데이터를 가져와야 할 경우 .from("테이블 이름").select("*") 를 사용할 수 있다.
이때 select("컬럼")으로 지정하면 해당하는 컬럼 데이터만 가져올 수 있다.

2. 조인 테이블을 사용하여 데이터 가져오기

/** projectId와 일치하는 기술 스택 가져오기 */
export async function getProjectTech(projectId: string) {
  const { data, error } = await supabaseForClient
    .from("project_tech")
    .select("*, projectTechs:techs(*)")
    .eq("project_id", projectId)

  const techs = data?.map((tech) => tech.projectTechs?.tech_name)

  if (error) console.log("error", error)

  return techs
}

조인 테이블 project_tech으로부터 project_id 값이 같을 경우 foreign key로 연결된 tech_id로 접근하여 techs 정보를 가져올 수 있다. 이 경우 select("*, 조인할 테이블(*)" 을 사용할 수 있는데 콜론을 사용하여 이름을 지정해서 가져올 수 있다.

3. 특정 데이터를 배열로 가져오기

/** 포지션에 대한 기술 스택 가져오기 */
export async function getTechs() {
  try {
    // 1. 모든 포지션을 가져온다
    const { data: positions, error: positionError } = await supabaseForClient
      .from("positions")
      .select("*")

    if (positionError) {
      console.error("Error fetching positions:", positionError)
      throw positionError
    }

    // 2. 각 포지션에 대한 techs를 가져온다
    const techsPromises = positions.map(async (position) => {
      const { data: positionTechs, error: positionTechError } =
        await supabaseForClient
          .from("position_tech")
          .select("*, techs(*)")
          .eq("position_id", position.id)

      if (positionTechError) {
        console.error(
          `Error fetching techs for position ${position.id}:`,
          positionTechError,
        )
        throw positionTechError
      }

      // 3. 가져온 techs 데이터를 반환한다
      return positionTechs?.map((tech) => tech.techs)
    })

    // 모든 포지션에 대한 techs를 병렬로 가져오기
    const techs = await Promise.all(techsPromises)

    return techs
  } catch (error) {
    console.error("Error in getTechs:", error)
    throw error
  }
}

특정 데이터를 배열로 가져오고 싶을 경우의 코드이다.
먼저 positions 테이블에서 기준이 될 모든 값을 가져왔다.
가져온 데이터 positions에 map을 사용하여 순환하면서 position_id에 해당하는 techs 값을 리턴했다.
map의 반환값인techsPromises에는 position_id에 해당하는 techs들이 결과인 Promise 객체가 배열로 저장되어 있기 때문에 await Promise.all(techsPromises)을 사용하여 Promise를 병렬로 실행시켜서 결과적으로 position_id값을 기준으로 배열로 저장된 techs를 가져왔다.