Network Mode

React Query는 네트워크 연결이 없을때 Query와 Mutation이 어떻게 동작해야하는지 구별하기 위해 3가지 다른 network mode를 제공한다. 이 mode는 각 Query/Mutation에 개별적으로 설정하거나, query/mutation 기본값을 통해 전역적으로 설정할 수 있다.

React Query는 데이터 fetching 라이브러리와 함께 data fetching에 가장 자주 사용되므로, default network mode는 online이다.

Network Mode : Online

이 모드에서는 네트워크에 연결되어 있지 않으면 Query와 Mutation이 실행되지 않는다. 이것이 default mode이다. query에 대해 fetch가 시작되면, 네트워크 연결이 없어 fetch를 수행할 수 없는 경우에는 항상 해당 state(loading, error, success)로 유지된다. 그러나 fetchStatus가 추가로 노출된다. 이는 다음 중 하나가 될 수 있다. :

• fetching : queryFn이 실제로 실행중이다. - request가 in-flight
• paused : query가 실행되고 있지 않다. - 다시 연결할때까지 일시중지된다.
• idle : query가 fetching도 아니며 paused도 아니다.

isFetching, isPaused 플래그는 이 state에서 파생되어 편의상 노출된다.

loading spinner를 표시하기 위해 loading state를 확인하는것만으로는 충분하지 않을 수 있음을 명심해라. 처음 mounting중에 네트워크 연결이 없을경우 Query는 loading state에 있지만 paused fetchStatus에 있을 수 있다.

온라인 상태여서 query가 실행되지만 fetching중에 오프라인 상태가 되면, React Query는 retry 매커니즘도 일시중지한다. 일시중지된 쿼리들은 네트워크에 다시 연결되면 계속 실행된다. 이것은 refetch가 아니라 continue이기 때문에 refetchOnReconnect(이 모드에서는 기본적으로 true)와 무관하다. 그 사이에 쿼리가 취소된 경우, 쿼리는 continue되지 않는다.

Network Mode : always

이 모드에서, React Query는 항상 fetch하고 online/offline 상태를 무시한다. 쿼리가 작동하기 위해 active 네트워크 연결이 필요없는 환경에서 React Query를 사용하는 경우 이 모드를 선택할 수 있다. - (예: AsyncStorage에서 읽기만 하거나, queryFn에서 Promise.resolve(5)만 반환하려는 경우)

• 네트워크에 연결되어 있지 않기 때문에 쿼리는 절대 일시중지되지 않는다.
• Retry도 일시중지 되지 않는다. - 쿼리는 실패하면 error state가 된다.
• 이 모드에서 네트워크에 재연결되는것은 더이상 stale한 쿼리들이 refetch되어야 한다는 좋은 지표가 아니기 때문에, refetchOnReconnect의 기본값은 false로 설정된다. 원한다면 계속 켤 수 있다.

Network Mode : offlineFirst

이 모드는 처음 두 옵션의 중간 지점이며, 여기서 React Query는 queryFn을 한번 실행하지만 retry들을 일시중지한다. 이 기능은 offline-first PWA처럼 캐싱 request를 intercept하는 serviceWorker가 있거나, Cache-Control 헤더를 통해 HTTP 캐싱을 사용하는 경우 매우 유용하다.

이러한 상황에서 첫번째 fetch는 offline storage/cache에서 이루어지기 때문에 성공할 수 있다. 하지만 cahce miss가 있는 경우 네트워크 request가 나가고 실패하며, 이 경우 이 모드는 online query처럼 행동한다. - retry를 일시중지한다.

Devtools

React Query Devtool은 fetching하지만 네트워크 연결이 없는 경우 쿼리를 paused state로 표시한다. 모의 오프라인 동작 토클 버튼도 있다. 이 버튼은 실제로 네트워크 연결을 방해하진 않지만(브라우저 devtool에서 할 수 있음), OnlineManager를 오프라인 상태로 표시한다.

Signature

• networkMode : 'online' | 'always' | 'offlineFirst'
  • optional
  • 기본값은 'online'