Restore environmentManager to default behavior
To restore the default server detection behavior, call environmentManager.setIsServer(() => isServer) using the isServer utility imported from @tanstack/react-query.
TanStack Query · Reference · all subjects
manager classes
40 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
environmentManager purpose and default behavior
The environmentManager manages how TanStack Query detects whether the current runtime should be treated as server-side. By default, it uses the same server detection as the exported isServer utility from query-core. Use this manager to override server detection globally for runtimes that are not traditional browser/server environments, such as extension workers.
environmentManager.isServer method
Returns whether the current runtime is treated as a server environment. Called as environmentManager.isServer() with no parameters, it returns a boolean value.
environmentManager.setIsServer method
Overrides the server check globally. Takes a single option: isServerValue, which is a function with signature () => boolean. This function is called to determine server status instead of the default isServer utility.
environmentManager.setIsServer usage example
The setIsServer method is called with a function that returns a boolean. Example: environmentManager.setIsServer(() => { return typeof window === 'undefined' && !('chrome' in globalThis) })
notifyManager.schedule signature and usage
The schedule method has the signature `function schedule(callback: () => void): void`. It schedules a function to be run on the next batch. By default, the batch is run with a setTimeout, but this can be configured.
notifyManager.setNotifyFunction signature and usage
The setNotifyFunction method overrides the notify function that is passed the callback when it should be executed. The default notifyFunction just calls it. This can be used to wrap notifications with React.act while running tests.
notifyManager.setNotifyFunction example with React.act
In tests with React, you can set the notify function using `notifyManager.setNotifyFunction(act)` where act is imported from 'react-dom/test-utils'.
notifyManager.setBatchNotifyFunction signature and usage
The setBatchNotifyFunction method sets the function to use for batched updates. If your framework supports a custom batching function, you can let TanStack Query know about it by calling notifyManager.setBatchNotifyFunction.
notifyManager.setScheduler signature and usage
The setScheduler method configures a custom callback that should schedule when the next batch runs. The default behaviour is `setTimeout(callback, 0)`.
notifyManager.setBatchNotifyFunction example with Solid.js
In solid-query, the batch function is set using `notifyManager.setBatchNotifyFunction(batch)` where batch is imported from 'solid-js'.
notifyManager.setScheduler configuration examples
The setScheduler method can be configured with different schedulers: `notifyManager.setScheduler(queueMicrotask)` to schedule batches in the next microtask, `notifyManager.setScheduler(requestAnimationFrame)` to schedule batches before the next frame is rendered, or `notifyManager.setScheduler((cb) => setTimeout(cb, 10))` to schedule batches some time in the future.
notifyManager purpose and methods overview
The notifyManager handles scheduling and batching callbacks in TanStack Query. It exposes six methods: batch, batchCalls, schedule, setNotifyFunction, setBatchNotifyFunction, and setScheduler.
notifyManager.batch signature and usage
The batch method has the signature `function batch<T>(callback: () => T): T`. It batches all updates scheduled inside the passed callback and is mainly used internally to optimize queryClient updating.
notifyManager.batchCalls signature and usage
The batchCalls method is a higher-order function with the signature `function batchCalls<T extends Array<unknown>>(callback: BatchCallsCallback<T>): BatchCallsCallback<T>`, where `type BatchCallsCallback<T extends Array<unknown>> = (...args: T) => void`. It takes a callback and wraps it so that all calls to the wrapped function schedule the callback to be run on the next batch.
focusManager.subscribe usage and return value
subscribe accepts a callback function that receives an isVisible boolean parameter indicating the visibility state. The subscribe method returns an unsubscribe function.
focusManager.setFocused parameter and behavior
setFocused accepts a focused parameter of type boolean or undefined. Setting true marks the app as focused, false marks it as unfocused, and undefined falls back to the default focus check.
focusManager.isFocused usage
isFocused is a method that takes no parameters and returns the current focus state as a boolean.
FocusManager purpose
FocusManager manages the focus state within TanStack Query and can be used to change the default event listeners or manually change the focus state.
FocusManager available methods
FocusManager has four available methods: setEventListener, subscribe, setFocused, and isFocused.
focusManager.setEventListener signature and usage
setEventListener accepts a callback function that receives a handleFocus parameter. The callback should set up event listeners and return an unsubscribe function that removes those listeners. Example: focusManager.setEventListener((handleFocus) => { window.addEventListener('visibilitychange', handleFocus, false); return () => { window.removeEventListener('visibilitychange', handleFocus); }; })
TimeoutManager purpose and usage
The TimeoutManager handles setTimeout and setInterval timers in TanStack Query. TanStack Query uses timers to implement features like query staleTime and gcTime, as well as retries, throttling, and debouncing. By default, TimeoutManager uses the global setTimeout and setInterval, but it can be configured to use custom implementations instead.
TimeoutManager available methods
TimeoutManager has the following methods: timeoutManager.setTimeoutProvider, timeoutManager.setTimeout, timeoutManager.clearTimeout, timeoutManager.setInterval, and timeoutManager.clearInterval.
setTimeoutProvider for custom timer implementation
setTimeoutProvider can be used to set a custom implementation of the setTimeout, clearTimeout, setInterval, and clearInterval functions, called a TimeoutProvider. This may be useful if you notice event loop performance issues with thousands of queries. A custom TimeoutProvider could also support timer delays longer than the global setTimeout maximum delay value of about 24 days. It is important to call setTimeoutProvider before creating a QueryClient or queries, so that the same provider is used consistently for all timers in the application, since different TimeoutProviders cannot cancel each other's timers.
TimeoutProvider type signature
The TimeoutProvider type is defined as: type ManagedTimerId = number | { [Symbol.toPrimitive]: () => number }; type TimeoutProvider<TTimerId extends ManagedTimerId = ManagedTimerId> = { readonly setTimeout: (callback: TimeoutCallback, delay: number) => TTimerId; readonly clearTimeout: (timeoutId: TTimerId | undefined) => void; readonly setInterval: (callback: TimeoutCallback, delay: number) => TTimerId; readonly clearInterval: (intervalId: TTimerId | undefined) => void; }. The TimeoutProvider type requires that implementations handle timer ID objects that can be converted to number via Symbol.toPrimitive because runtimes like NodeJS return objects from their global setTimeout and setInterval functions.
timeoutManager.setTimeout behavior
timeoutManager.setTimeout(callback, delayMs) schedules a callback to run after approximately delay milliseconds, like the global setTimeout function. The callback can be canceled with timeoutManager.clearTimeout. It returns a timer ID, which may be a number or an object that can be coerced to a number via Symbol.toPrimitive.
timeoutManager.clearTimeout behavior
timeoutManager.clearTimeout(timerId) cancels a timeout callback scheduled with setTimeout, like the global clearTimeout function. It should be called with a timer ID returned by timeoutManager.setTimeout.
timeoutManager.setInterval behavior
timeoutManager.setInterval(callback, intervalMs) schedules a callback to be called approximately every intervalMs, like the global setInterval function. Like setTimeout, it returns a timer ID, which may be a number or an object that can be coerced to a number via Symbol.toPrimitive.
timeoutManager.clearInterval behavior
timeoutManager.clearInterval(intervalId) can be used to cancel an interval, like the global clearInterval function. It should be called with an interval ID returned by timeoutManager.setInterval.
Example: Setting custom TimeoutProvider
import { timeoutManager, QueryClient } from '@tanstack/react-query' import { CustomTimeoutProvider } from './CustomTimeoutProvider' timeoutManager.setTimeoutProvider(new CustomTimeoutProvider()) export const queryClient = new QueryClient()
Example: Using timeoutManager.clearInterval
import { timeoutManager } from '@tanstack/react-query' const intervalId = timeoutManager.setInterval( () => console.log('ran at:', new Date()), 1000, ) timeoutManager.clearInterval(intervalId)
OnlineManager default online state detection
By default, the onlineManager assumes an active network connection and listens to the 'online' and 'offline' events on the window object to detect changes. The default initial state is online: true. In previous versions navigator.onLine was used but this was replaced because it doesn't work well in Chromium based browsers due to false negatives.
OnlineManager available methods
OnlineManager has four available methods: setEventListener, subscribe, setOnline, and isOnline.
onlineManager.setEventListener
setEventListener can be used to set a custom event listener. It takes a callback function that receives a setOnline function as a parameter, which can be called to update the online state. The callback should return an unsubscribe function.
onlineManager.setEventListener example with React Native
Example of using setEventListener with React Native NetInfo: 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 can be used to subscribe to changes in the online state. It takes a callback function that receives the current isOnline boolean value. The method returns an unsubscribe function.
onlineManager.subscribe example
Example of subscribing to online state changes: import { onlineManager } from '@tanstack/react-query'; const unsubscribe = onlineManager.subscribe((isOnline) => { console.log('isOnline', isOnline) })
onlineManager.setOnline
setOnline can be used to manually set the online state. It takes a single required parameter 'online' of type boolean.
onlineManager.setOnline example
Example of manually setting online state: import { onlineManager } from '@tanstack/react-query'; onlineManager.setOnline(true); onlineManager.setOnline(false);
onlineManager.isOnline
isOnline can be used to get the current online state. It takes no parameters and returns a boolean value indicating whether the system is currently online.