Blog>
Snippets

Handling Offline to Online Transitions with onlineManager

Show how to use onlineManager in React Query to detect changes in network state and automatically resume suspended queries when the application goes back online.
import { onlineManager } from 'react-query';
import NetInfo from '@react-native-community/netinfo';
Importing onlineManager from react-query and NetInfo from @react-native-community/netinfo for network state detection.
function setupOnlineManager() {
  onlineManager.setEventListener(setOnline => {
    return NetInfo.addEventListener(state => {
      setOnline(state.isConnected);
    });
  });
}
Setting up the onlineManager's event listener using NetInfo to detect changes in network state. This updates the onlineManager's state based on the device's connectivity.
setupOnlineManager();
Calling the setup function to initialize the onlineManager with our custom event listener.