> Как работать с loading и data из useQuery (React)

В React Query (TanStack Query) работа с loading и data из useQuery строится на состояниях запроса. Основные поля: isLoading (первая загрузка, когда данных ещё нет), isFetching (любая загрузка, включая фоновую), data (результат) и error.

Пример типичного использования:

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

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json()),
  });

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

  return <div>Имя: {data.name}</div>;
}

Ключевые моменты:

• isLoading - true только при первой загрузке без кэша. Для последующих рефетчей используйте isFetching, если нужно показать индикатор обновления.

• data может быть undefined, пока запрос не выполнен, поэтому всегда проверяйте isLoading или error перед рендерингом.

• Для оптимизации UX можно комбинировать: показывать старые данные (если они есть) с индикатором фоновой загрузки, используя isFetching и isPreviousData (для пагинации).

Пример с сохранением предыдущих данных:

JSX
const { data, isLoading, isFetching } = useQuery({...});

if (isLoading) return <Spinner />;

return (
  <div>
    {data && <Content data={data} />}
    {isFetching && <Skeleton />}
  </div>
);

Такой подход делает интерфейс отзывчивым и избегает мерцания при повторных запросах.