react-query retry

관리자 페이지에서 요청이 하나 남았을 때 수락 혹은 취소를 하면 약 3초간 요청이 남아있었다.

네트워크창을 열어보니
404 에러가 뜨고 요청을 3번 더 보내는 것을 확인할 수 있었다.

react-query 는 요청 실패 시 기본 3번 재요청을 보낸다.
따라서 값이 없을 때(404에러) 처음 관리자 페이지를 들어가면 3번의 요청을 보낼동안 로딩 화면이 보이고, 모든 요청을 처리했을 때에도 3번의 요청을 보낼동안 사라지지 않았던 것이다.

 const {
    data: data2,
    isLoading: isLoading2,
    fetchNextPage: fetchNextPage2,
    isFetchingNextPage: isFetchingNextPage2,
    hasNextPage: hasNextPage2,
    error: error2,
    isError: isError2,
  } = useInfiniteQuery(
    ["newInfo"],

    ({ pageParam = 0 }) => newInfoCreateRequest(pageParam),

    {
      getNextPageParam: (currentPage, allPages) => {
        const nextPage = allPages.length;
        const totalPage = currentPage?.data?.response?.totalPages;
        return nextPage > totalPage || nextPage == totalPage ? null : nextPage;
      },

      retry: 0,  //여기에 추가!!
    }
  );

그래서 무한스크롤 요청 코드에 retry 를 0으로 설정하여 재요청을 막았더니 마지막 요청이어도 바로바로 반영이 되고, 요청이 없으면 바로 해당 경고 화면이 보였다.

retry를 해주면 재요청 하는 동안 요청이 들어온것을 반영할 수 있겠지만 재요청하는 delay가 생각보다 사용자 입장에서 좋지 못할 것 같아 임시로 0을 설정해 주기로 했다.