🔥 Trouble Shooting - Tanstack Query에서 data.data 중첩 문제

🚨 문제 상황

Tanstack Query의 useQuery를 사용하는데 반환된 데이터가 data.data와 같이 중첩되어 있었다.

💻 문제 발생 코드

// getProductDetail 함수
const getProductDetail = async (productId) => {
  const { data, error } = await supabase
    .from('products')
    .select('*')
    .eq('id', productId)
    .single();

  if (error) throw error;
  return { data, error }; // 문제의 원인!
};

🤔 원인 분석 - "return { data, error };"가 안 되는 이유

return { data, error }; 코드가 문제가 되는 이유는 이중 래핑(double wrapping) 때문이다:

1. Supabase 응답 구조: Supabase는 이미 응답을 { data, error } 형태로 반환함
2. 수동 래핑: return { data, error };로 한 번 더 같은 구조로 감싸줌
3. React Query 래핑: React Query는 쿼리 함수의 반환값을 자동으로 data 속성에 넣음

이 세 단계가 결합되어 다음과 같은 중첩 구조가 생성됨:

// 최종 데이터 구조
{
  data: {        // 자동 생성
    data: {      // getProductDetail에서 수동으로 감싼 부분
      id: 1,     // 실제 Supabase 데이터
      title: "상품명"
      // ...
    },
    error: null  // getProductDetail에서 수동으로 감싼 부분
  }
}

이 구조에서 상품명에 접근하려면 data.data.title처럼 작성해야 함

✅ 해결 방법

getProductDetail 함수에서 불필요한 래핑을 제거하고 데이터만 반환하도록 수정:

export const getProductDetail = async (productId) => {
  const { data, error } = await supabase
    .from('products')
    .select('*')
    .eq('id', productId)
    .single();

  if (error) throw error;
  return data; // 데이터만 반환
};

📝 배운 점

1. Tanstack Query의 데이터 처리 방식 이해:

   • Tanstack Query는 쿼리 함수의 반환값을 data 속성에 자동으로 넣음
   • 이미 { data, error } 구조를 가진 값을 반환하면 중첩 발생

2. API 응답 처리의 올바른 패턴:

   • 성공 시: 필요한 데이터만 반환 (return data;)
   • 실패 시: 에러를 throw (throw error;)

💡 추가 TIP

Supabase를 사용할 때는 다음 패턴이 가장 효율적이다:

const someApiFunction = async () => {
  const { data, error } = await supabase.from('table').select('*');
  
  if (error) throw error; // Tanstack Query의 에러 처리 메커니즘 활용
  return data;            // 데이터만 깔끔하게 반환
};

이 패턴을 사용하면 Tanstack Query와 잘 어울리는 깔끔한 데이터 구조를 얻을 수 있다!