Что такое React Query

1️⃣ Как кратко ответить

React Query — это библиотека для управления состоянием и кэширования серверных данных в React-приложениях. Она упрощает работу с асинхронными запросами, обеспечивая автоматическое обновление данных, кэширование, повторные попытки запросов и синхронизацию данных между компонентами.

2️⃣ Подробное объяснение темы

React Query — это мощный инструмент для управления состоянием данных, получаемых с сервера, в приложениях на React. Он решает множество проблем, связанных с асинхронными запросами, такими как кэширование, повторные попытки запросов, обновление данных и синхронизация между компонентами.

Зачем это нужно

В типичном React-приложении часто возникает необходимость получать данные с сервера. Это может быть вызвано необходимостью отображения списка пользователей, получения информации о продукте или обновления данных в реальном времени. Управление этими данными вручную может быть сложным и подверженным ошибкам. React Query автоматизирует многие из этих задач, позволяя разработчикам сосредоточиться на логике приложения, а не на управлении состоянием данных.

Как это работает

React Query предоставляет хуки, которые можно использовать для выполнения запросов и управления состоянием данных. Основные из них — useQuery и useMutation.

Пример использования useQuery

import { useQuery } from 'react-query';
​
function fetchUser(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json());
}
​
function UserProfile({ userId }) {
  // Используем хук useQuery для получения данных пользователя
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUser(userId));
​
  // Если данные загружаются, показываем индикатор загрузки
  if (isLoading) return <span>Loading...</span>;
​
  // Если произошла ошибка, показываем сообщение об ошибке
  if (error) return <span>Error: {error.message}</span>;
​
  // Если данные успешно загружены, отображаем информацию о пользователе
  return (
    <div>
      <h1>{data.name}</h1>
      <p>Email: {data.email}</p>
    </div>
  );
}

• useQuery(['user', userId], () => fetchUser(userId)): Хук useQuery принимает ключ запроса и функцию, которая возвращает промис с данными. Ключ запроса используется для кэширования и идентификации данных.
• isLoading: Булевое значение, указывающее, загружаются ли данные.
• error: Объект ошибки, если запрос завершился неудачно.
• data: Полученные данные, если запрос завершился успешно.

Пример использования useMutation

import { useMutation } from 'react-query';
​
function updateUser(userId, userData) {
  return fetch(`https://api.example.com/users/${userId}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  }).then(response => response.json());
}
​
function UpdateUserForm({ userId }) {
  const mutation = useMutation(userData => updateUser(userId, userData));
​
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const userData = Object.fromEntries(formData.entries());
    mutation.mutate(userData);
  };
​
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" />
      <input name="email" placeholder="Email" />
      <button type="submit">Update</button>
      {mutation.isLoading && <span>Updating...</span>}
      {mutation.isError && <span>Error: {mutation.error.message}</span>}
      {mutation.isSuccess && <span>Updated successfully!</span>}
    </form>
  );
}

• useMutation(userData => updateUser(userId, userData)): Хук useMutation используется для выполнения мутаций данных, таких как создание, обновление или удаление.
• mutation.mutate(userData): Метод для выполнения мутации с переданными данными.
• mutation.isLoading, mutation.isError, mutation.isSuccess: Состояния мутации, которые можно использовать для отображения статуса операции.

Преимущества React Query

• Кэширование: Автоматическое кэширование данных, что позволяет избежать повторных запросов к серверу.
• Повторные попытки: Автоматические повторные попытки запросов в случае неудачи.
• Синхронизация: Обновление данных в реальном времени при изменении на сервере.
• Управление состоянием: Упрощает управление состоянием асинхронных данных в приложении.

React Query значительно упрощает работу с серверными данными в React-приложениях, делая код более чистым и поддерживаемым.