Tanstack query의 retry

백엔드에서 api 호출에 대한 데이터를 DB에서 조회한다.

조회한 결과가 빈 배열이면 204 status code로 response를 보냈다.

그런데...

분명 첫 번째 응답이 204로 잘 왔는데
이후에 3번의 추가 api 호출이 진행되는 것을 발견했다.

재시도 대기 시간은 1000ms -> 2000ms -> 4000ms -> 8000ms로
지수 백오프의 형태를 보이면서..

그래서 왜 이러지라는 생각에
if(response.status === 204) return null
이거 한 줄 api 호출 함수에 추가했더니 retry는 없었다.

왜... 자동으로 보내지는 걸까... 이유를 모르겠다.

Tanstack-query의 retry 기본값이 3이고, 지수 백오프를 사용하고 있어서 위와 같이 retry를 수행했던 것이다!

해결은 다음과 같이 했다.

아래와 예시 같이 retry 옵션을 활용해서 retry 횟수를 조절할 수 있다.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0, // 재시도 하지 않음
    },
  },
});

하지만 node 백엔드에서 http status code를 204로 두고 response를 보낼 경우
response body에 무엇을 담든 내용물 없이 ""으로 반환이 된다.

현재 fetch api를 사용하고 있기 때문에 역직렬화를 해야하는데,
""가 response로 날라왔을 경우 response.json()은 syntax error가 나오게 된다.

따라서 백엔드에서 보내줄 데이터가 없더라도, status code를 200으로 두고 빈 배열을 반환하는 방향으로 수정했다.

그런데 왜 204 response가 성공적으로 왔는데 Tanstack-query는 retry를 진행했던 것일까?

앞서 언급했듯, ""에 .json()으로 역직렬화를 하면서 syntax error가 발생했기 때문이다.
Tanstack-query는 queryFn에서 syntax error가 발생하면 api 호출 결과와 무관하게 retry를 진행한다.

아래 예시를 아무 queryFn에 추가해보자. 별도 수정을 하지 않았다면 3번의 retry가 일어나는 것을 확인할 수 있다.

  let num: any = 123;
  console.log(num.toUpperCase());