7-9 [FE] [fix] 검색어 자동완성 api 오류 시 재요청이 되지 않던 오류 수정

[Palwol]

개요

• 검색어 자동완성 api 오류 발생 시 axios에서 retry(재요청)를 설정한 횟수만큼 실행하도록 설정해두었으나, 재요청이 1번만 일어나는 현상을 수정했습니다.

작업사항

• react-query에서 retry를 막던 queryClient.cancleQueries()를 제거했습니다.
• axios의 retry 로직 대신 react-query의 retry 옵션을 사용해서 오류 시 재요청을 구현했습니다.
• retry를 react-query로 위임하면서 customAxiosInstance의 역할이 작아졌다고 판단해 제거하였습니다.

리뷰 요청사항

• api 오류 발생 시 retry 로직이 잘 동작하는지 확인 부탁드립니다.

test 방법

// frontend/src/components/Search.tsx
// line:38

  const { isLoading, data: autoCompletedItems } = useQuery<IAutoCompletedItem[]>(
    ['getAutoComplete', debouncedValue],
  // keyword: debouncedValue를 keyword: ''로 변경
    () => api.getAutoComplete({ keyword: '' }).then((res) => res.data),
    {
      enabled: !!(debouncedValue && debouncedValue.length >= 2),
      retry: 3,
    },
  );

위 코드의 api.getAutoComplete({ keyword: debouncedValue }) 부분을 api.getAutoComplete({ keyword: '' })로 변경하고 검색어를 입력하면 에러가 발생합니다. 에러 발생 후 재요청이 3번까지 이루어지는지 확인 부탁드립니다.

[JunYupK]

axios 에서 react query로 옮기시면서 코드가 더 간결해진것같습니다.

[JunYupK]

여기에서는 예외처리를 어떻게 하나요?

[Palwol]

react query 자체에서 에러를 감지합니다만, 우선 자동완성 api는 에러 시 다른 에러 처리를 하지 않고 항상 '자동완성 검색어가 없습니다.' 문구만 보여주기로 했습니다. 자동완성 기능이 코어 기능은 아니기 때문에 우선 이렇게 처리했습니다.

참고로 아래 retry: 3 옵션으로 인해 api 에러 발생 시 3번 재요청을 보내는 작업은 진행됩니다.

[yeynii]

react-query 에 retry를 위임하니 코드가 훨씬 간결해졌군요👍