[TanStakQuery] Network Mode

Jeris·2023년 5월 21일

TanStak Query docs translation

목록 보기

14/42

TanStack Query는 네트워크에 연결되어 있지 않은 경우 Queries, Mutations가 어떻게 작동해야 하는지를 구분하기 위해 세 가지 네트워크 모드를 제공합니다. 이 모드는 각 Query / Mutation에 대해 개별적으로 설정하거나 query / mutation defaults를 통해 전역적으로 설정할 수 있습니다.

TanStack Query는 데이터 fetcfetching 라이브러리와 함께 데이터 fetching에 가장 자주 사용되므로 기본 네트워크 모드는 온라인입니다.

Network Mode: online

이 모드에서는 네트워크에 연결되어 있지 않으면 Queries와 Mutations이 실행되지 않습니다. 이것이 기본 모드입니다. 쿼리 fetch가 시작되면 네트워크 연결이 되지 않아 fetch를 수행할 수 없는 경우 항상 현재 state(loading, error, success)로 유지됩니다. 그러나 fetchStatus가 추가로 노출됩니다. 이는 다음 중 하나일 수 있습니다:

fetching: queryFn이 실제로 실행 중이며 요청이 진행 중입니다.
paused: 쿼리가 실행되고 있지 않음 - 다시 연결될 때까지 paused 상태입니다.
idle: 쿼리를 가져오지 않고 일시 중지되지 않았습니다.

isFetching, isPaused 플래그는 이 상태에서 파생되어 편의를 위해 노출됩니다.

"loading 상태를 확인하는 것만으로는 로딩 스피너를 표시하기에 충분하지 않을 수 있다는 점에 유의하세요. 쿼리는 state: 'loading'일 수 있지만, 처음 마운트하는 중이고 네트워크에 연결되어 있지 않은 경우 fetchStatus: 'paused'일 수 있습니다."

온라인 상태이기 때문에 쿼리가 실행되지만 fetch가 계속 진행되는 동안 오프라인 상태가 되면, TanStack 쿼리도 재시도 메커니즘을 일시 중지합니다. 일시 중지된 쿼리는 네트워크 연결이 다시 확보되면 계속 실행됩니다. 이는 refetch가 아니라 continue이기 때문에 refetchOnReconnect(이 모드에서는 기본값이 true임)와는 무관합니다. 그 사이에 쿼리가 취소된 경우에는 계속 진행되지 않습니다.

Network Mode: always

이 모드에서 TanStack 쿼리는 항상 fetch하며 온라인/오프라인 상태를 무시합니다. TanStack Query가 작동하기 위해 활성 네트워크 연결이 필요하지 않은 환경에서 TanStack Query를 사용하는 경우(예: AsyncStorage에서 읽기만 하거나 queryFn에서 Promise.resolve(5)만 리턴하려는 경우)에 이 모드를 선택하면 됩니다.

네트워크에 연결되어 있지 않기 때문에 쿼리는 paused 되지 않습니다.
refetchOnReconnect는 이 모드에서 기본적으로 false로 설정됩니다. 네트워크에 다시 연결하는 것은 오래된 쿼리를 다시 가져오기 위한 좋은 지표가 아니기 때문입니다. 원하는 경우 refetchOnReconnect를 켜도 됩니다.

Network Mode: offlineFirst

이 모드는 처음 두 옵션의 중간 지점으로, TanStack Query가 queryFn을 한 번 실행한 후 재시도를 일시 중지합니다. 이 모드는 offline-first PWA에서처럼 캐싱 요청을 가로채는 서비스 워커가 있거나 Cache-Control header를 통해 HTTP 캐싱을 사용하는 경우 매우 유용합니다.

이러한 상황에서는 오프라인 저장소/캐시에서 fetch하여 첫 번째 fetch가 성공할 수 있습니다. 그러나 캐시에 누락이 있는 경우 네트워크 요청이 실패하고 이 경우 이 모드는 online 쿼리처럼 작동하여 재시도를 일시 중지합니다.

Devtools

TanStack Query Devtools는 쿼리를 fetching할 수 있지만 네트워크에 연결되어 있지 않은 경우 쿼리를 paused 상태로 표시합니다. 오프라인 동작을 모방하는 토글 버튼도 있습니다. 이 버튼은 실제로 네트워크 연결을 실제로 망치지는 않지만(브라우저 개발자 도구에서는 망칠 수 있음), OnlineManager를 오프라인 상태로 설정한다는 점에 유의하세요.