[코드 개선하기] try, catch vs React Query의 onSuccess, onError : 비동기 처리 로직 통일하기

🖥️ 코드리뷰 中

export const createPost = async (data: ICreatePostRequest) => {
  const response = await axiosInstance.post<IApiResponse<{ postId: number }>>(
    `${API_SUB_URLS_V3}/posts`,
    data
  );

  return response.data.data;
};

 

코드 리뷰에서 위와 같은 질문을 받고 비동기 처리 로직을 돌아보았고, react query의 에러 핸들링 메소드와 try, catch를 혼용해서 사용하고 있었습니다.

 

비동기 로직 되돌아보기

export const createPost = async (data: ICreatePostRequest) => {
  const response = await axiosInstance.post<IApiResponse<{ postId: number }>>(
    `${API_SUB_URLS_V3}/posts`,
    data
  );

  return response.data.data;
};

해당 함수는 api 호출과 그에 따른 응답 데이터를 반환하는 함수로, @tanstack/react-query의 useMutation을 사용한 커스텀 훅(useCreatePost)에서 호출해 사용중입니다.

 

createPost() 호출 커스텀 훅

/**
 * 게시글 등록 뮤테이션 훅
 * */
export const useCreatePost = () => {
  return useMutation({
    mutationFn: (data: ICreatePostRequest) => createPost(data),
  });
};

useCreatePost() 호출

아래와 같이 페이지에서 useCreatePost 훅을 호출하면서, 결과적으로 createPost()를 호출합니다. 에러 핸들링의 경우, try-catch, onError(react query 내부 에러 핸들러)를 사용하였는데 두 방법의 차이를 인지하지 못하고 혼용해서 중복 사용하고 있었습니다.

const createPostMutation = useCreatePost();
const handleCreatePost = (data: IPostFormData) => {
    try {
      createPostMutation.mutateAsync(
        {
          // data
        },
        {
          onSuccess: response => {
            // 성공 시 수행
          },
          onError: (error: any) => {
           // 에러 발생 시 수행
          },
        }
      );
    } catch {
      alert('게시글 등록에 실패했습니다');
    }
  };

try-catch 문은 자바스크립트 코드에서 throw 된 에러를 핸들링하며 onError의 경우 React Query 내부에서 발생한 비동기 에러를 핸들링합니다.

mutateAsync의 경우 요청 실패시 promise를 reject하므로 catch문이 실행될 수 있습니다. 그러나 제 코드에서는 async-await를 쓰지 않아 즉시 다음으로 넘어가게 되고, catch 문이 에러를 잡지 못한 것으로 판단됩니다.

마찬가지로 onError의 경우에도 비동기 요청이 실패할 경우 수행됩니다.

비동기 에러를 잡는데 try-catch 문은 async-await 키워드를 쓰지 않아 의미가 없었지만 onError 덕분에 제 코드에서는 에러 처리가 잘 동작했던 것입니다.

수정

결론적으로, 아래와 같은 방식으로 에러 핸들링을 통일하였습니다.

createPostMutation.mutate(
      {
        // request data
      },
      {
        onSuccess: response => {
          // 성공 시 수행
        },
        onError: (error: unknown) => {
         // 에러 발생 시 수행
        },
      }
    );