크롬에서 react-query 함수를 이용한 api가 호출되지 않을때

사건의 발단

next js에서 상태관리를 보다 편리하게 하고
캐시 기능까지 순수 제공해주는 react-query를 이용하여 개발을 하고 있었다.
적용을 하여 배포를 하였는데,

???: 지원씨(나) 배포된 사이트 왜이래요?
나: 네? 뭐가요?? 잘되기만 하구만
???: 나는 안되는데??
나: 믿을 수 없어 거짓말!!!!

현상은 이러했다.
개개인의 IOS(아이폰,맥북 등)기기로 chrome으로 개발된 페이지를 접속할때 랜덤적으로 react-query의 api가 동작하지 않는 것이다.

다른 브라우저에서는 잘 작동하니까 원인 찾기가 어려웠다.

발견한 원인

react-query의 옵션중 networkMode라는 옵션이 있다.
네트워크 연결이 없을때 어떻게 동작해야하는지 구별하기 위해 3가지 다른 network mode를 제공한다.

• online: default옵션으로 네트워크가 연결된 상태면 fetch하고 그게아니면 paused 상태로 멈춘다.
• always: 항상 fetch하여 paused 상태가 되지 않는다.
• offlineFirst: 첫 번째 요청은 항상 이루어지며 실패하면 retry하지 않고 paused 상태가 된다.

default 옵션으로는 online으로 적용이 되는데, 처음에 네트워크가 연결된 상태가 아님으로 paused 상태로 멈춰서 api를 받아올 수 없는 것으로 이해 했다.

추가적으로 WIfi를 껏다 키면 해결 된다고 한다.

도움을 준 링크