Sobes.tech
Middle

TanStack Query (React Query) колдонуп, колдонуучулардын тизмесин ар 15 секундда бир polling кылуу үчүн кандай уюштуруу керек? Кантип функцияны колдонуп, кандай параметрлер менен?

sobes.tech AI

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 позволяет автоматически обновлять данные по таймеру.