[React] 내 tanstack query는 왜 에러를 내지 않을까??

지난 프로젝트 중 API URL을 설정해두지 않아 절대 네트워크 요청이 이뤄질 수 없는 상황이었는데 네트워크 에러는 나면서 컴포넌트 내부에서 탠스택쿼리의 isSuccess 를 조건으로 설정해둔 alert이 뜨는 현상이 있었다.

대체 이게 뭐지..? 하다가 우선 당장 해야했던 기능 구현을 마무리하고 조금 여유가 생겼을 때 다시 알아보았다.

 

이유는 생각보다 간단했다! 탠스택쿼리의 queryFn, mutationFn에서 에러가 발생했을 때도 에러가 아닌 데이터를 return해주고 있었기 때문이다.

 

기존 코드

export const postSignUp = async (userInput) => {
  try {
    const response = await authInstance.post('/signup', userInput);
    return response.data;
  } catch (error) {
    return error.response.data;
  }
};

- error를 캐치하여 데이터를 반환하고 있다.

변경한 코드

export const postSignUp = async (userInput) => {
  try {
    const response = await authInstance.post('/signup', userInput);
    return response.data;
  } catch (error) {
    throw error.response?.data || error.message;
  }
};

- error를 throw한다 (호출한 상위 스코프로 에러를 던진다)

 

즉 useQuery, useMutation 등은 기존 방식에선 에러가 아닌 데이터를 반환받았기 때문에 네트워크 요청이 성공했다고 판단해 isSuccess가 true가 됐던 것!

아래처럼 throw error를 사용해줘야 데이터 반환이 아닌 에러가 발생했다고 판단한다.