Для чего используется библиотека Tanstack Query?

Tanstack Query (ранее известная как React Query) — это мощная библиотека для управления состоянием данных, которые приходят с сервера, в клиентских приложениях, особенно в React. В отличие от библиотек управления состоянием вроде Redux, которые фокусируются на клиентском состоянии (например, открыт ли модальный окно), Tanstack Query специализируется на асинхронных данных: загрузке, кэшировании, синхронизации и обновлении информации из API.

Ключевые возможности и применение

Библиотека автоматически решает множество сложных задач:

• Кэширование и инвалидация: Загруженные данные кэшируются. При повторном запросе к тем же данным они мгновенно возвращаются из кэша, а на фоне может выполняться фоновый запрос для их обновления.
• Фоновое обновление: Данные могут автоматически обновляться при возвращении фокуса на окно браузера или через заданные интервалы, обеспечивая актуальность информации.
• Оптимистичные обновления: Позволяет обновить UI до получения ответа от сервера, создавая плавный пользовательский опыт.
• Управление зависимыми запросами: Легко организовывать цепочки запросов, где один запрос зависит от результата другого.
• Пагинация и бесконечная прокрутка: Предоставляет встроенные паттерны для реализации этих функций.

Практический пример

Вот базовый пример использования хука useQuery для загрузки списка пользователей:

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

const fetchUsers = async () => {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error('Network error');
  return response.json();
};

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'], // Уникальный ключ для кэша
    queryFn: fetchUsers,  // Функция для выполнения запроса
  });

  if (isLoading) return Loading...;
  if (error) return Error: {error.message};

  return (
    
      {data.map(user => (
        {user.name}
      ))}
    
  );
}

В этом примере useQuery автоматически обрабатывает состояние загрузки, ошибки и кэширует результат. При монтировании компонента в разных местах приложения с тем же queryKey данные будут переиспользованы.

Вывод

Tanstack Query стоит применять в React-приложениях, которые активно работают с внешними API и требуют эффективного управления загруженными данными. Она значительно сокращает шаблонный код, повышает производительность за счёт умного кэширования и улучшает пользовательский опыт за счёт фоновых обновлений и оптимистичных UI-изменений.