Sobes.tech
Middle

Wie man mit TanStack Query (React Query) das Polling der Benutzerliste alle 15 Sekunden organisiert? Welche Funktion verwenden und mit welchen Parametern?

sobes.tech KI

Antwort von AI

Для организации polling с помощью TanStack Query (React Query) используется опция refetchInterval в хукe useQuery. Она задает интервал в миллисекундах, с которым будет автоматически повторяться запрос.

Пример для опроса списка пользователей раз в 15 секунд:

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

function fetchUsers() {
  return fetch('/api/users').then(res => res.json());
}

function UsersList() {
  const { data, error, isLoading } = useQuery(['users'], fetchUsers, {
    refetchInterval: 15000, // 15 секунд
    refetchIntervalInBackground: true, // опционально, чтобы опрашивать даже если вкладка не активна
  });

  if (isLoading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Таким образом, useQuery с refetchInterval позволяет автоматически обновлять данные по таймеру.