> Сколько значений возвращает хук useQuery (React)

Короткий ответ

Хук useQuery из библиотеки React Query (TanStack Query) возвращает объект с множеством полей, включая data, isLoading, error, isError, isSuccess, status, fetchStatus, refetch, isFetching и другие. Фактически это один объект, содержащий состояние запроса, данные, флаги загрузки и ошибок, а также методы для управления. Количество возвращаемых значений - около 20-25 свойств в зависимости от версии.

Подробное объяснение

useQuery возвращает единый объект, который инкапсулирует всё состояние асинхронного запроса. Основные группы полей:

• Данные и ошибки: data, error, dataUpdatedAt, errorUpdatedAt
• Флаги состояния: isLoading, isFetching, isSuccess, isError, isIdle, isStale, isRefetching, isPaused
• Статусы: status (enum: 'loading' | 'error' | 'success' | 'idle'), fetchStatus (enum: 'fetching' | 'paused' | 'idle')
• Методы: refetch, remove, update, promise
• Мета-информация: failureCount, failureReason, errorUpdateCount, isPreviousData, isPlaceholderData

Важно понимать разницу между isLoading (первая загрузка без данных) и isFetching (любой фоновый запрос). status даёт более детальный контроль, а fetchStatus показывает, идёт ли сейчас сетевой запрос.

На практике

В реальных проектах обычно используют деструктуризацию для получения нужных полей:

JAVASCRIPT
const { data, isLoading, error } = useQuery(...)

Для сложных сценариев (пагинация, prefetching, optimistic updates) могут потребоваться isPreviousData, fetchStatus, refetch. Не стоит использовать isLoading для индикации фонового обновления - для этого есть isFetching. При работе с кэшем важно учитывать isStale для показа устаревших данных.

Пример кода

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

function UserProfile({ userId }) {
  const { 
    data, 
    isLoading, 
    isFetching, 
    error, 
    isError, 
    status,
    refetch 
  } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    staleTime: 5 * 60 * 1000, // 5 минут
  });

  if (isLoading) return <Spinner />;
  if (isError) return <Error message={error.message} />;

  return (
    <div>
      {isFetching && <RefreshIndicator />}
      <UserCard user={data} />
      <button onClick={() => refetch()}>Обновить</button>
    </div>
  );
}

Как отвечать на собеседовании

Начни с того, что useQuery возвращает один объект с множеством полей, а не несколько значений. Перечисли основные группы: данные, флаги состояния, методы. Подчеркни разницу между isLoading и isFetching - это частый вопрос. Упомяни, что точный список зависит от версии библиотеки (TanStack Query v3 vs v4/v5). Если спросят про кастомные хуки - скажи, что можно обернуть useQuery и вернуть только нужные поля.

Что проверяет интервьюер

• Понимание разницы между isLoading и isFetching
• Знание структуры возвращаемого объекта, а не просто "он возвращает данные"
• Умение работать с состояниями запроса (loading, error, success)
• Понимание концепций stale time, cache time, refetching
• Способность объяснить, как использовать status и fetchStatus для точного контроля

Типичные ошибки

• Путают isLoading и isFetching, используя первый для всех индикаций загрузки
• Думают, что useQuery возвращает несколько значений (как массив), а не объект
• Игнорируют status и fetchStatus, хотя они дают более гибкий контроль
• Не учитывают, что data может быть undefined при isLoading === false (если ошибка)
• Забывают про isPreviousData при пагинации, что приводит к миганию интерфейса