Вопрос с собеседования · Frontend

Как работать с серверными данными через TanStack Query?

MiddleReact
Ещё спрашивают так:
  • Чем useQuery лучше fetch в useEffect?
Коротко

Серверное состояние — копия данных сервера: его нужно кэшировать, обновлять, дедуплицировать. useQuery({ queryKey, queryFn }) даёт data, isPending, error, кэш по ключу, повторы при ошибках, фоновое обновление при возврате на вкладку, отмену устаревших запросов. useMutation выполняет изменения; после успеха — invalidateQueries по ключу, и связанные запросы перезагрузятся. Ключ включает все параметры: ["orders", { page, status }].

  • staleTime — сколько данные считаются свежими, без лишних запросов
  • Не копировать data в useState — читать из кэша
  • Гонки и отмену библиотека решает сама, в отличие от fetch в useEffect

А ещё Серверные данные в Redux/Zustand — частая лишняя работа

Подробно

const { data, isPending, error } = useQuery({
  queryKey: ["orders", page], queryFn: () => api.orders(page), staleTime: 30_000 });
const qc = useQueryClient();
const del = useMutation({ mutationFn: api.deleteOrder,
  onSuccess: () => qc.invalidateQueries({ queryKey: ["orders"] }) });

Что хотят услышать

  • Кэш по ключу, состояния загрузки и ошибок.
  • useMutation и инвалидация.
  • staleTime, без копирования в state.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓useQuery кэширует по ключу и ведёт загрузку и ошибки; после мутации запросы инвалидируют
  • ✗Данные из useQuery нужно сразу копировать в useState, чтобы их можно было менять
  • ✗Параметры запроса не нужно включать в queryKey
  • ✗TanStack Query подходит только для GraphQL

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования