OnlineManager

The OnlineManager manages the online state within TanStack Query. It can be used to change the default event listeners or to manually change the online state.

Per default, the onlineManager assumes an active network connection, and listens to the online and offline events on the window object to detect changes.

In previous versions, navigator.onLine was used to determine the network status. However, it doesn't work well in Chromium based browsers. There are a lot of issues around false negatives, which lead to Queries being wrongfully marked as offline.

To circumvent this, we now always start with online: true and only listen to online and offline events to update the status.

This should reduce the likelihood of false negatives, however, it might mean false positives for offline apps that load via serviceWorkers, which can work even without an internet connection.

Its available methods are:

• setEventListener
• subscribe
• setOnline
• isOnline

setEventListener can be used to set a custom event listener:

import NetInfo from '@react-native-community/netinfo'
import { onlineManager } from '@tanstack/react-query'

onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected)
  })
})

import NetInfo from '@react-native-community/netinfo'
import { onlineManager } from '@tanstack/react-query'

onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected)
  })
})

subscribe can be used to subscribe to changes in the online state. It returns an unsubscribe function:

import { onlineManager } from '@tanstack/react-query'

const unsubscribe = onlineManager.subscribe((isOnline) => {
  console.log('isOnline', isOnline)
})

import { onlineManager } from '@tanstack/react-query'

const unsubscribe = onlineManager.subscribe((isOnline) => {
  console.log('isOnline', isOnline)
})

setOnline can be used to manually set the online state.

import { onlineManager } from '@tanstack/react-query'

// Set to online
onlineManager.setOnline(true)

// Set to offline
onlineManager.setOnline(false)

import { onlineManager } from '@tanstack/react-query'

// Set to online
onlineManager.setOnline(true)

// Set to offline
onlineManager.setOnline(false)

Options

• online: boolean

isOnline can be used to get the current online state.

const isOnline = onlineManager.isOnline()

const isOnline = onlineManager.isOnline()