Почему важно кэшировать данные — основы React Query

Введение

Если бы данные были музыкой, то кэширование можно сравнить с плейлистом, где любимые треки всегда под рукой. Кэширование данных позволяет вашему приложению хранить недавно полученные данные, чтобы не делать запросы к серверу снова и снова. Это особенно полезно, если вы хотите снизить нагрузку на сервер, улучшить время отклика приложения и обеспечить плавный пользовательский опыт.

Вы когда-нибудь задумывались, почему Facebook или Instagram так быстро подгружают данные, даже если вы только что обновляли свои ленты? Это всё благодаря кэшированию. Без этого приложения буквально "захлебывались" бы в API-запросах, загружая сервер больше, чем девопса в пятницу вечером.

Почему кэширование важно?

1. Снижение нагрузки на сервер: используйте данные из кэша, а не делайте повторные запросы, когда это возможно.
2. Улучшение UX (пользовательского опыта): менее частые задержки на получение данных означают более плавную работу для пользователя.
3. Экономия ресурсов: оптимизация трафика и времени выполнения запросов. Особенно критично для мобильных приложений.

React Query как инструмент для кэширования

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

Почему React Query — топ?

Вместо того чтобы писать кучу кода для fetch или Axios (и потом разбираться в состоянии загрузки, ошибках и что-то где-то забывать), React Query предлагает вам готовое решение. Вот краткий список возможностей:

• Кэширование данных.
• Автоматическое обновление данных из API.
• Умная работа с ошибками.
• Кэш-менеджмент (это звучит серьёзно, потому что так и есть).
• Повторное использование запросов через хуки.

И, конечно, React Query отлично интегрируется с TypeScript, что идеально подходит нам как любителям типизации.

Архитектура и основные компоненты React Query

Чтобы понимать, как React Query работает под капотом, разберёмся, из каких ключевых понятий он состоит.

1. Query: это запрос к API. Например, вы можете использовать useQuery для получения данных из сервиса. Query автоматически кэшируется, переиспользуется и может обновляться.
2. Mutation: это действия, которые изменяют данные на сервере. Вы можете отправлять POST, PUT, DELETE запросы через useMutation.
3. QueryClient: сердце React Query — универсальный менеджер для всех запросов и кэша.
4. QueryKey: уникальный ключ, который позволяет React Query отличать один запрос от другого.

Каждый из этих компонентов подробно разберём в следующих лекциях, так что не переживайте, если пока не всё понятно.

Пример "плохого" подхода без React Query

Вот пример, когда мы работаем с серверными данными вручную:

import React, { useEffect, useState } from 'react';

const FetchDataComponent: React.FC = () => {
  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>{JSON.stringify(data)}</div>;
};

Кажется, не так уж и плохо? Но представьте, что таких компонентов у вас десятки, и везде приходится писать один и тот же шаблон. Усталость наступает быстро.

Пример с React Query

Теперь посмотрим, как легко можно заменить этот код с помощью React Query:

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

const FetchDataComponent: React.FC = () => {
  const { data, error, isLoading } = useQuery({
    queryKey: ['exampleData'],
    queryFn: () => fetch('https://api.example.com/data').then(res => res.json()),
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {(error as Error).message}</div>;

  return <div>{JSON.stringify(data)}</div>;
};

Вуаля! Нам больше не нужно вручную обрабатывать состояния загрузки и ошибки. React Query делает это автоматически.

Сравнение React Query с другими инструментами

На рынке есть несколько популярных библиотек для работы с серверными данными, но React Query выделяется своей простотой и мощностью. Рассмотрим пару конкурентов:

Redux Thunk отлично подходит для сложных сценариев, но требует больше кода для всего, что React Query делает "из коробки". Apollo Client — мощное решение для GraphQL, но если у вас REST API, тут React Query бьёт все рекорды.

Преимущества React Query в реальных проектах

Итак, чем же помогает React Query в реальной разработке? Вот несколько примеров:

• Воспользуйтесь кэшированием, чтобы мгновенно показать пользователю данные, которые он уже загружал.
• Подключите автообновление данных, например, для информации о статусе заказа или чата.
• Сконцентрируйтесь на бизнес-логике, а не на бесконечном написании fetch / Axios запросов и обработке состояний.

В следующих лекциях мы углубимся в детали установки и настройки React Query, использования хуков, таких как useQuery и useMutation, и рассмотрим, как типизировать данные.