OnlineManager

OnlineManager는 TanStack Query에서 온라인 상태를 관리합니다. 기본 이벤트 리스너를 변경하거나 온라인 상태를 수동으로 변경할 수 있습니다.

기본적으로 onlineManager는 활성 네트워크 연결을 가정하고, window 객체에서 online과 offline 이벤트를 듣고 상태 변화를 감지합니다.

이전 버전에서는 네트워크 상태를 확인하기 위해 navigator.onLine을 사용했습니다. 하지만 이 방법은 Chromium 기반 브라우저에서 잘 작동하지 않았습니다. 이로 인해 잘못된 오프라인 상태로 표시되는 문제들이 많이 발생 (opens in a new tab)했습니다.

이를 해결하기 위해, 이제는 항상 online: true로 시작하고 online 및 offline 이벤트만 듣고 상태를 업데이트합니다.

이 방법은 잘못된 오프라인 상태로 표시될 가능성을 줄여주지만, 인터넷 연결이 없어도 작동할 수 있는 서비스 워커를 통해 로드되는 오프라인 앱에서는 잘못된 온라인 상태로 표시될 수 있습니다.

사용할 수 있는 메서드는 다음과 같습니다:

`onlineManager.setEventListener`

setEventListener는 커스텀 이벤트 리스너를 설정하는 데 사용할 수 있습니다:

import NetInfo from "@react-native-community/netinfo";
import { onlineManager } from "@tanstack/react-query";
 
onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected);
  });
});

`onlineManager.subscribe`

subscribe는 온라인 상태의 변경 사항을 구독하는 데 사용할 수 있습니다. 이 함수는 구독 해제 함수를 반환합니다:

import { onlineManager } from "@tanstack/react-query";
 
const unsubscribe = onlineManager.subscribe((isOnline) => {
  console.log("isOnline", isOnline);
});

`onlineManager.setOnline`

setOnline은 온라인 상태를 수동으로 설정하는 데 사용할 수 있습니다.

import { onlineManager } from "@tanstack/react-query";
 
// 온라인 상태로 설정
onlineManager.setOnline(true);
 
// 오프라인 상태로 설정
onlineManager.setOnline(false);

Options

online: boolean

`onlineManager.isOnline`

isOnline은 현재 온라인 상태를 가져오는 데 사용할 수 있습니다.

const isOnline = onlineManager.isOnline();

focusManager notifyManager