TimeoutManager

Der TimeoutManager verwaltet setTimeout und setInterval Timer in TanStack Query.

TanStack Query verwendet Timer, um Funktionen wie die Query- staleTime und gcTime sowie Wiederholungen, Throttling und Debouncing zu implementieren.

Standardmäßig verwendet der TimeoutManager die globalen setTimeout und setInterval, kann aber so konfiguriert werden, dass stattdessen benutzerdefinierte Implementierungen verwendet werden.

Ihre verfügbaren Methoden sind

• timeoutManager.setTimeoutProvider
  • TimeoutProvider
• timeoutManager.setTimeout
• timeoutManager.clearTimeout
• timeoutManager.setInterval
• timeoutManager.clearInterval

Mit setTimeoutProvider können benutzerdefinierte Implementierungen der Funktionen setTimeout, clearTimeout, setInterval und clearInterval gesetzt werden. Dies wird als TimeoutProvider bezeichnet.

Dies kann nützlich sein, wenn Sie Probleme mit der Leistung der Ereignisschleife bei Tausenden von Abfragen feststellen. Ein benutzerdefinierter TimeoutProvider könnte auch Timer-Verzögerungen unterstützen, die länger sind als der maximale Verzögerungswert von setTimeout von etwa 24 Tagen.

Es ist wichtig, setTimeoutProvider aufzurufen, bevor Sie einen QueryClient oder Abfragen erstellen, damit derselbe Provider konsistent für alle Timer in der Anwendung verwendet wird, da verschiedene TimeoutProvider ihre Timer nicht gegenseitig abbrechen können.

import { timeoutManager, QueryClient } from '@tanstack/react-query'
import { CustomTimeoutProvider } from './CustomTimeoutProvider'

timeoutManager.setTimeoutProvider(new CustomTimeoutProvider())

export const queryClient = new QueryClient()

import { timeoutManager, QueryClient } from '@tanstack/react-query'
import { CustomTimeoutProvider } from './CustomTimeoutProvider'

timeoutManager.setTimeoutProvider(new CustomTimeoutProvider())

export const queryClient = new QueryClient()

Timer sind sehr leistungssensibel. Kurzfristige Timer (wie solche mit Verzögerungen unter 5 Sekunden) sind tendenziell latenzempfindlich, während langfristige Timer mehr von Timer-Coalescing profitieren können – dem Bündeln von Timern mit ähnlichen Fälligkeiten – unter Verwendung einer Datenstruktur wie einem hierarchischen Zeitrad.

Der TimeoutProvider-Typ erfordert, dass Implementierungen Timer-ID-Objekte verarbeiten können, die über Symbol.toPrimitive in einen number umgewandelt werden können. Dies liegt daran, dass Laufzeitumgebungen wie NodeJS von ihren globalen setTimeout und setInterval Funktionen Objekte zurückgeben. TimeoutProvider-Implementierungen können Timer-IDs intern in Zahlen umwandeln oder ihren eigenen benutzerdefinierten Objekttyp zurückgeben, der { [Symbol.toPrimitive]: () => number } implementiert.

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
}

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
}

setTimeout(callback, delayMs) plant die Ausführung eines Callbacks nach ungefähr delay Millisekunden, ähnlich der globalen setTimeout-Funktion. Der Callback kann mit timeoutManager.clearTimeout abgebrochen werden.

Es gibt eine Timer-ID zurück, die eine Zahl oder ein Objekt sein kann, das über Symbol.toPrimitive in eine Zahl umgewandelt werden kann.

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

const timeoutId = timeoutManager.setTimeout(
  () => console.log('ran at:', new Date()),
  1000,
)

const timeoutIdNumber: number = Number(timeoutId)

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

const timeoutId = timeoutManager.setTimeout(
  () => console.log('ran at:', new Date()),
  1000,
)

const timeoutIdNumber: number = Number(timeoutId)

clearTimeout(timerId) bricht einen mit setTimeout geplanten Callback ab, ähnlich der globalen clearTimeout-Funktion. Es sollte mit einer Timer-ID aufgerufen werden, die von timeoutManager.setTimeout zurückgegeben wurde.

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

const timeoutId = timeoutManager.setTimeout(
  () => console.log('ran at:', new Date()),
  1000,
)

timeoutManager.clearTimeout(timeoutId)

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

const timeoutId = timeoutManager.setTimeout(
  () => console.log('ran at:', new Date()),
  1000,
)

timeoutManager.clearTimeout(timeoutId)

setInterval(callback, intervalMs) plant, dass ein Callback ungefähr alle intervalMs aufgerufen wird, ähnlich der globalen setInterval-Funktion.

Wie setTimeout gibt es eine Timer-ID zurück, die eine Zahl oder ein Objekt sein kann, das über Symbol.toPrimitive in eine Zahl umgewandelt werden kann.

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

const intervalId = timeoutManager.setInterval(
  () => console.log('ran at:', new Date()),
  1000,
)

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

const intervalId = timeoutManager.setInterval(
  () => console.log('ran at:', new Date()),
  1000,
)

clearInterval(intervalId) kann verwendet werden, um ein Intervall abzubrechen, ähnlich der globalen clearInterval-Funktion. Es sollte mit einer Intervall-ID aufgerufen werden, die von timeoutManager.setInterval zurückgegeben wurde.

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

const intervalId = timeoutManager.setInterval(
  () => console.log('ran at:', new Date()),
  1000,
)

timeoutManager.clearInterval(intervalId)

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

const intervalId = timeoutManager.setInterval(
  () => console.log('ran at:', new Date()),
  1000,
)

timeoutManager.clearInterval(intervalId)