Когда дело доходит до получения данных в приложениях React, часто в игру вступают две популярные библиотеки — React-Query и SWR. Обе библиотеки предлагают мощные функции и упрощают процесс получения данных и управления ими. В этой статье блога мы углубимся в сходства, различия и варианты использования React-Query и SWR. Итак, начнем!

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

а. useQuery:
Хук useQuery— это сердце React-Query. Он позволяет извлекать данные и предоставляет различные параметры для настройки кэширования, повторной выборки и обработки ошибок. Вот пример:

import { useQuery } from 'react-query';
const MyComponent = () => {
  const { data, isLoading, error } = useQuery('todos', fetchTodos);
  if (isLoading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Error: {error.message}</p>;
  }
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

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

import { useMutation } from 'react-query';
const MyComponent = () => {
  const { mutate } = useMutation(createTodo, {
    onSuccess: () => {
      // Handle success
    },
    onError: (error) => {
      // Handle error
    },
  });
  const handleFormSubmit = (data) => {
    mutate(data);
  };
  return (
    <form onSubmit={handleFormSubmit}>
      {/* form inputs */}
      <button type="submit">Create Todo</button>
    </form>
  );
};

1. SWR:
   SWR (устаревшее при повторной проверке) — это облегченная библиотека выборки данных, разработанная командой Next.js. Основное внимание уделяется предоставлению простого, но мощного API для получения данных в приложениях React. Давайте рассмотрим некоторые методы и функции, предлагаемые SWR:

а. useSWR:
Хук useSWRлежит в основе SWR. Он принимает ключ (например, URL-адрес) и функцию выборки и возвращает данные, статус загрузки и ошибку. Вот пример:

import useSWR from 'swr';
const MyComponent = () => {
  const { data, error } = useSWR('/api/todos', fetcher);
  if (!data) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Error: {error.message}</p>;
  }
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

б. mutate:
Функция mutateв SWR позволяет вручную обновлять кэшированные данные, запуская повторную визуализацию и повторную проверку. Это полезно, если вы хотите обновить данные вне обычного запроса на выборку. Вот простой пример:

import useSWR, { mutate } from 'swr';
const MyComponent = () => {
  const { data } = useSWR('/api/todos', fetcher);
  const handleTodoUpdate = async (id, updatedData) => {
    await updateTodo(id, updatedData);
    mutate('/api/todos'); // Refresh the cached todos
  };
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>
          {todo.title} <button onClick={() => handleTodoUpdate(todo.id, { completed: true })}>Complete</button>
        </li>
      ))}
    </ul>
  );
};

React-Query и SWR — отличный выбор для получения данных в приложениях React. React-Query предоставляет более полный набор функций, что делает его подходящим для сложных случаев использования. С другой стороны, SWR легкий и простой, что делает его отличным выбором для небольших проектов. Понимание сходств и различий между этими библиотеками позволит вам принять обоснованное решение, основанное на требованиях вашего проекта. Приятного кодирования!