Tanstack Query와 Axios를 활용한 아름다운 오류 처리 (최고의 조합??)

Source: Dev.to

백엔드 서비스

이 프로젝트는 매우 단순한 아키텍처를 가지고 있습니다.

• Supabase 를 BaaS 로 사용해 인증, 세션 관리 등을 처리합니다.
• Express 가 인가, 데이터베이스 조회 및 기타 백엔드 서비스를 담당합니다.

Express에서는 간소화된 MVC 아키텍처를 사용합니다:

• Models – Supabase와의 모든 데이터베이스 작업을 처리합니다.
• Views – 프론트‑엔드의 서비스 클래스입니다.
• Controllers – 비즈니스 로직을 포함합니다.

구조와 관심사의 분리를 보장하기 위해 이러한 이름을 사용합니다.

예시 Controller

export const completeProfile = async (req, res) => {
  try {
    const { role, userData } = req.body;

    const existingProfile = await UserProfileModel.getCustomerProfile(req.user.id);

    if (existingProfile) {
      return res.status(400).json({
        error: "ProfileError",
        message: "Profile already exists",
      });
    }

    const result = await UserProfileModel.createProfileWithEntity(
      req.user.id,
      role,
      userData
    );

    res.json({
      message: "Profile completed successfully",
      role,
      userId: req.user.id,
    });
  } catch (error) {
    res.status(500).json({
      error: "ProfileError",
      message: error.message,
    });
  }
};

사용자가 이미 존재하는 프로필을 생성하려고 할 때, 컨트롤러는 400 응답을 반환합니다:

{
  "error": "ProfileError",
  "message": "Profile already exists"
}

좋은 부분: Axios

Axios는 fetch API보다 API 요청을 간단하게 만들어 주는 프로미스 기반 HTTP 클라이언트입니다.

fetch 사용

const completeProfile = async (payload) => {
  const res = await fetch('/profile/complete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });

  if (!res.ok) {
    const errorData = await res.json().catch(() => ({}));
    throw new Error(errorData.message || 'Failed to complete profile');
  }

  return res.json();
};

Axios 사용

import axios from 'axios';

const completeProfile = async (payload) => {
  const { data } = await axios.post('/profile/complete', payload);
  return data;
};

Axios 오류 객체

응답 상태가 2xx 범위를 벗어나면 Axios는 다음과 같은 오류 객체를 던집니다:

{
  "response": {
    "status": 400,
    "data": {
      "error": "ProfileError",
      "message": "Profile already exists"
    }
  }
}

이렇게 하면 수동으로 if (!res.ok) 를 검사할 필요가 없어집니다.

TanStack Query (구 React Query)

각 컴포넌트마다 try / catch 로 오류를 처리하는 대신, TanStack Query는 데이터 페칭, 캐싱, 로딩 상태 및 오류 처리를 중앙 집중화합니다.

TanStack Query란?

TanStack Query는 React용 강력한 데이터‑페칭 및 상태‑관리 라이브러리입니다. 자동으로 다음을 관리합니다:

• 로딩 상태
• 오류 처리
• 재시도 및 캐싱
• 백그라운드 재페칭

이를 통해 보일러플레이트 코드를 작성하는 대신 기능 구현에 집중할 수 있습니다.

Axios와 함께 TanStack Query 사용

import { useMutation } from '@tanstack/react-query';

const useCompleteProfile = () => {
  return useMutation({
    mutationFn: (payload) => completeProfile(payload),
  });
};

컴포넌트에서 오류 처리

import { View, Text } from 'react-native';
import { useCompleteProfile } from './hooks';

const CompleteProfileComponent = ({ payload }) => {
  const mutation = useCompleteProfile();

  const handleSubmit = () => {
    mutation.mutate(payload);
  };

  return (
    <View>
      {/* ...your form UI... */}

      {mutation.isError && (
        <Text>
          {mutation.error?.response?.data?.message || 'An error occurred'}
        </Text>
      )}
    </View>
  );
};

mutation.isError 플래그는 Axios가 오류를 던질 때 자동으로 true 가 되며, 오류 상세 정보는 mutation.error 를 통해 접근할 수 있습니다.

이미지