[react-query] onError 이후 onSuccess 또는 axios 요청이 한번 더 가는 경우

서두

react-query useQuery로 서버에 카카오 로그인 요청을 했는데,
retry 옵션으로 요청 한번만 가도록 했으나 서버에서 같은 인가코드로 두번 요청이 들어온다는 서버에러 코드를 뱉고 있었다.

---

클라이언트 로직

분명히 쿼리 실행 후 onSuccess , onError 에
다른 위치로 replace 시켜주는 코드가 있었는데 replace 되기전에
자꾸 요청이 한번 더 발생하는 에러가 발생했다.

위 문제를 해결하기 위해 ,

코드 하나하나 지워가고 추가하며 에러 잡았는데
useQuery 옵션 전달에서 리패치 관한 에러코드 다 넣으면서 확인했는데
WindowFocus 옵션을 주니 요청이 가지 않는것을 확인 할 수 있었다.

---

찾은 문제 점

처음에는 유니크하지 않은 쿼리키때문인지 의심했었는데 정답은 alert 창이였다.

카카오 로그인이 실패 할 경우 어떠한 이유때문에 실패했는지
서버에서 받은 코드와 메세지를 alert 창으로 띄워주었는데
alert창 종료 후 윈도우 포커스 되니까 같은 요청 한번 더 가도록 되었던 것이였다.

아래와 같이 추가 옵션값을 주어 위 문제를 해결했다.

refetchOnWindowFocus: false,

//옵션들
{
    retry: false,
    refetchOnWindowFocus: false,
    refetchInterval:false,
    refetchIntervalInBackground:false,
    refetchOnMount : false,
    refetchOnReconnect:false,
}

꽤나 오랜시간동안 디버깅을 했고, 놓친 부분이라 기록해놓는다.