react-query vs SWR и избавимся ли мы от Redux?

Давайте сначала познакомимся с обоеми библиотеками, чтобы сравнить их и убедиться, что лучше. react-query и SWR — это две популярные библиотеки для управления состоянием данных в React-приложениях. Они обе предназначены для облегчения работы с данными, получаемыми с сервера, но имеют некоторые различия в функциональности и подходах.

react-query

react-query — это мощная библиотека для управления состоянием данных в React-приложениях. Она предоставляет простые и эффективные инструменты для работы с данными, получаемыми с сервера, и упрощает взаимодействие с API-запросами. Ниже познакомимся с базовыми фичами данной библиотеки:

Кеширование данных: Одна из основных возможностей react-query — это кеширование данных. При выполнении запросов к серверу библиотека автоматически кэширует полученные данные. Это позволяет избежать повторных запросов на сервер при обращении к тем же данным в разных частях приложения. Кэш react-query также автоматически инвалидируется при обновлении данных на сервере или вручную с помощью инвалидации.

// инвалидация
queryClient.invalidateQueries()

Автоматическое обновление данных: react-query предоставляет механизм автоматического обновления данных на основе определенных событий. Когда выполняется запрос на сервер, библиотека автоматически обновляет кэшированные данные при успешном завершении запроса, мутации или ручных вызовах обновления. Это позволяет всегда иметь актуальные данные в приложении.

Повторные запросы: В случае ошибок при выполнении запроса react-query предоставляет механизм повторных запросов, который автоматически попытается повторить запрос. Это особенно полезно при работе с нестабильным интернет-соединением или временными проблемами на стороне сервера. А так же можно настроить интервал между повторными запросами или указать максимальное количество повторов в настройках.

Оптимистические обновления: react-query поддерживает оптимистические обновления данных. Это позволяет обновлять кэшированные данные немедленно, еще до того, как запрос на сервер будет завершен. Это создает плавное впечатление для пользователей и повышает отзывчивость интерфейса.

Обработка ошибок и повторные запросы: Библиотека упрощает обработку ошибок при выполнении запросов. Она предоставляет механизм повторных запросов при ошибках, что позволяет автоматически попробовать повторить запрос для получения данных. Это особенно полезно при работе с нестабильным интернет-соединением или временными проблемами на стороне сервера.

Гибкая настройка запросов: Библиотека предоставляет гибкие средства для настройки запросов, позволяя контролировать кэширование, время жизни данных, политики повторных запросов и многое другое.

// установка значения по умолчанию глобально
import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
   defaultOptions: {
      queries: {
      staleTime: Infinity,
    },
  },
});

// установка значения по умолчанию для
// определенных запросов
queryClient.setQueryDefaults(
  ['todos'], { staleTime: 3000 }
)

Мутации: react-query поддерживает мутации, позволяя легко выполнять изменения данных на сервере. Мутации представляют собой специальные функции, которые выполняют запросы на сервер для изменения данных, и автоматически обновляют соответствующий кэш после успешного завершения мутации.

Интеграция с React: react-query разработана специально для работы с React и интегрируется с ним без проблем. Она предоставляет хуки и компоненты, которые позволяют удобно взаимодействовать с данными и отображать их в интерфейсе React-компонентов.

// пример использования библиотеки в проекте
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then(
        (res) => res.json(),
      ),
  })

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>