TanStackQuery (6) - Network Mode

 

TanStackQuery는 네트워크 연결이 없는 경우 query와 mutaion이 어떻게 동작해야하는지 구분하기 위해

세 가지 다른 네트워크 모드를 제공한다 

TanStackQuery는 데이터 가져오기 라이브러리와 함께 데이터를 가져오는데 많이 사용되므로 기본 네트워크 모드는 온라인 이다.

 

네트워크 모드 : 온라인(기본)

이 모드에서는 네트워크 연결이 없으면 쿼리와 뮤테이션이 실행되지 않는다

쿼리에 대한 패치가 시작되면 네트워크 연결이 없어서 패치할 수 없는 경우 항상 상태 { pending, error, success } 를 유지한다.

그러나 fetchStatus는 추가로 다음의 세가지가 추가로 사용할 수 있다

1. fetching : queryFn이 실제로 실행중 - 요청이 진행중
2. paused :  쿼리가 실행되지 않음 - 다시 연결할 때까지 일시 중지됨
3. idle : 쿼리가 패치되지 않고 일시 중지 되지 않음

보류 상태를 확인하는 것만으로 로딩 스피너를 표시하기엔 충분하지 않다는 것을 명심하라

쿼리는 state: 'pending'일 수 있지만, 처음으로 마운트하고 네트워크 연결이 없는 경우 fetchStatus: 'paused' 일 수 있기 때문이다.

 

온라인 상태일 때는 쿼리가 실행되지만, 패치가 진행되는 동안 오프라인 상태가 되면 TansStack Query로 재시도 매커니즘을 일시 중지한다.

일시 중지된 쿼리는 네트워크 연결을 다시 얻을 때 계속 실행된다.

이는 refetch가 아니라 continue이기 때문에 그 사이에 쿼리가 취소된 경우 게속 refetch를 시도하지 않는다.

 

네트워크 모드 : always

이 모드에서 TanStackQuery는 항상 온라인/오프라인 상태를 무시하고 패치한다.

이는 쿼리가 작동하기 위해 네트워크 연결이 필요하지 않은 환경에서 TasnStack Query를 사용할 때 사용한다.

예를 들어 AsyncStorage에서 읽기만 하거나 queryFn에서 Promise.resolve(5)를 반환하기만 원하는 경우

이는 다음의 세가지 특성을 갖는다

• 네트워크에 연결되어 있지 않을 때 쿼리가 일시 중지되는 일이 없다
• 재시도 또는 일시 중지되지 않는다. 실패하면 쿼리가 오류 상태로 전환된다
• refetchOnReconnect는 이 모드에서 기본적으로 false로 설정된다 
  그 이유는 네트워크에 다시 연결하는 것이 오래된 쿼리를 다시 패치해야 한다는 이유가 되지 못하기 때문,
  원하는 경우 true로 설정할 수 있다.

네트워크 모드 : offlineFirst

이 모드는 처음 두 옵션 사이의 중간 지점으로, TanStack Query는 queryFn을 한 번 실행한 다음 재시도를 일시 중지한다.

이는 오프라인 우선 PWA와 같이 캐싱 요청을 가로채는 serviceWorker가 있거나 Cache-Contorl 헤더를 통해 HTTP 캐싱을 사용하는 경우에 매우 편리하다

 

이러한 상황에서 첫번쨰 패치는 오프라인 저장소/캐시에서 나오기 때문에 성공할 수 있다.

그러나 캐시 미스가 발생하면 네트워크 요청이 나가고 실패하게 되며, 이 경우엔 온라인 모드처럼 재시도를 일시 중지한다.

 

직접 사용하려면?

import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      networkMode: 'always', // online 또는 offlineFirst
    },
  },
});