오늘은 오랜만에 블로그를 적습니다.. 최근 많은 준비와 프로젝트가 겹쳐 블로그 적을 시간이 조금 부족했습니다.
다음 최종프로젝트는 이러지 않아야 다짐하며 트러블슈팅 시작하겠습니다.

Supabase 라이브러리와 TypeScript: 반환 타입 지정 트러블슈팅

Supabase 클라이언트를 사용해 데이터를 가져올 때, TypeScript의 타입 안전성을 확보하는 것은 매우 중요합니다.
기존에 fetch 함수를 사용해 데이터를 받아오던 코드를 Supabase 라이브러리 함수로 변경하는 과정에서
반환 타입이 any로 처리되는 문제를 해결하려고 했던 경험을 공유하고, 이를 위한 트러블슈팅 과정을 정리해보겠습니다.

---

문제 상황

Supabase 클라이언트 라이브러리를 사용하여 데이터를 가져올 때,
아래와 같이 기존의 fetch 함수 대신 Supabase의 .from() 메서드를 사용했습니다:

const { data, error } = await supabase
  .from('order_list')
  .select(`
    id,
    created_at,
    user_id,
    total_price,
    order_details (
      id,
      book_id,
      order_id,
      quantity,
      books (
        id,
        genre,
        price,
        title,
        author,
        rating,
        best_rank,
        image_url,
        publisher,
        description,
        published_date
      )
    )
  `)
  .eq('user_id', userId);

그러나, 이 방식은 반환 타입이 any로 처리되어 타입 안정성이 보장되지 않는 문제가 발생하였습니다.

---

.returns<T>() 시도와 문제점

조금 찾아보면 반환 타입을 지정하기 위해 supabase의 .returns<T>()메서드를 사용하기도 합니다.

const { data, error } = await supabase
  .from('order_list')
  .select(`...`)
  .eq('user_id', userId)
  .returns<OrderDetailInfo[]>();

하지만, 이 방식은 다음과 같은 문제를 야기합니다.

• IDE 경고 및 타입 에러 : 최신 Supabase 라이브러리에서는 .returns() 메서드가 지원되지 않거나
  타입 정의에 포함되어 있지 않아, IDE에서 밑줄이 그어지거나 에러가 발생합니다.

• 비표준 해결법 : 억지로 타입을 지정하려는 시도로 공식적으로는 권장되지 않는 방법이라고 합니다.

---

권장 해결 방법: 제네릭(Generic) 사용하기

우선 해당 트러블 슈팅은 이미 .returns<t>()메서드로 해결을 한 후 작성하는 방법으로 더 알아보기 위해 찾은 내용입니다.

Supabase 라이브러리에서는 제네릭을 사용하여 반환 타입을 지정하는 방법이 권장됩니다.
예를 들어, OrderDetailInfo 타입으로 결과를 받고 싶다면

const { data, error } = await supabase
  .from<OrderDetailInfo>('order_list')
  .select(`
    id,
    created_at,
    user_id,
    total_price,
    order_details (
      id,
      book_id,
      order_id,
      quantity,
      books (
        id,
        genre,
        price,
        title,
        author,
        rating,
        best_rank,
        image_url,
        publisher,
        description,
        published_date
      )
    )
  `)
  .eq('user_id', userId);

위와 같이 .from<OrderDetailInfo>()를 사용하면,
Supabase 클라이언트는 반환되는 data의 타입을 OrderDetailInfo[]로 추론하게 되어,
추가적인 타입 에러 없이 안전하게 사용할 수 있습니다.

---

결론

Supabase의 .from<T>() 제네릭을 사용하여 반환 타입을 지정하여 타입 안정성을 유지하며 데이터를 받아올 수 있습니다.