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번까지 이루어지는지 확인 부탁드립니다.