Как с помощью TanStack Query (React Query) организовать периодический опрос (polling) списка данных? Какие функции и параметры для этого используются?

Основы polling в TanStack Query

TanStack Query (ранее React Query) предоставляет встроенную поддержку периодического опроса данных через параметр refetchInterval. Это удобно для сценариев, где данные часто обновляются на сервере, например, в дашбордах, системах мониторинга или чатах. Вместо ручной реализации с setInterval и управления состоянием, библиотека берет на себя всю логику перезапросов, кэширования и обновления UI.

Ключевые параметры и функции

• refetchInterval — число в миллисекундах, задающее частоту автоматических запросов. Если передать функцию, можно динамически менять интервал (например, останавливать опрос при определенных условиях).
• refetchIntervalInBackground — булево значение, разрешающее продолжать опрос, когда вкладка браузера неактивна (по умолчанию false).
• refetch — функция, возвращаемая из useQuery, для ручного запуска запроса.
• refetchOnWindowFocus — автоматический перезапрос при фокусировке окна, полезно комбинировать с polling.

Пример использования

import { useQuery } from '@tanstack/react-query';

function usePollingData() {
  return useQuery({
    queryKey: ['items'],
    queryFn: fetchItems,
    refetchInterval: 5000, // опрос каждые 5 секунд
    refetchIntervalInBackground: true, // продолжать в фоне
  });
}

// В компоненте
const { data, isLoading, error, refetch } = usePollingData();

В этом примере данные будут автоматически обновляться каждые 5 секунд, даже если пользователь переключился на другую вкладку. Если нужно остановить опрос при определенном условии, можно передать функцию: refetchInterval: (query) => query.state.data?.length ? 5000 : false.

Практические рекомендации

Polling следует применять, когда данные меняются не слишком часто и допустима небольшая задержка. Для реального времени лучше использовать WebSocket или Server-Sent Events. Также важно учитывать нагрузку на сервер: слишком частые запросы могут привести к проблемам с производительностью. TanStack Query автоматически отменяет запросы при размонтировании компонента, что предотвращает утечки памяти.

Вывод: Используйте refetchInterval в TanStack Query для простого и надежного периодического обновления данных в интерфейсах, где требуется актуальность без сложной ручной логики.