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

Что такое React-запрос?

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

Упрощенная выборка данных

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

import { useQuery } from 'react-query';

function UserProfile() {
  const { data, isLoading, isError } = useQuery('user', fetchUserData);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (isError) {
    return <p>Error fetching user data.</p>;
  }

  return (
    <div>
      <h1>Welcome, {data.name}!</h1>
      {/* Render user profile */}
    </div>
  );
}

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

Загрузка и состояния ошибок

React Query также упрощает управление загрузкой и состояниями ошибок во время выборки данных. Используя свойства isLoading и isError, возвращаемые хуком useQuery, мы можем легко обрабатывать эти сценарии в наших компонентах.

function UserProfile() {
  const { data, isLoading, isError } = useQuery('user', fetchUserData);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (isError) {
    return <p>Error fetching user data.</p>;
  }

  // Render user profile
}

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

Автоматическое восстановление данных

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

const queryConfig = {
  refetchInterval: 5000, // Refetch data every 5 seconds
};

function UserProfile() {
  const { data } = useQuery('user', fetchUserData, queryConfig);

  // Render user profile
}

В приведенном выше фрагменте кода мы передаем объект queryConfig в качестве третьего аргумента хуку useQuery. Установив для свойства refetchInterval значение 5000 (5 секунд в миллисекундах), React Query будет автоматически обновлять данные через указанный интервал. Эта функция особенно полезна для данных в реальном времени или часто меняющихся сценариев данных.

Предварительная выборка данных

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

import { useQueryClient } from 'react-query';

function UserProfile() {
  const queryClient = useQueryClient();

  useEffect(() => {
    queryClient.prefetchQuery('user', fetchUserData);
  }, [queryClient]);

  // Render user profile
}

В приведенном выше примере мы используем хук useQueryClient, чтобы получить доступ к экземпляру клиента запроса. Внутри хука useEffect мы предварительно получаем данные, используя queryClient.prefetchQuery. Этот процесс предварительной выборки извлекает данные и сохраняет их в кэше, что делает их доступными при необходимости.

Простое обновление состояния и мутация

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

import { useMutation, queryCache } from 'react-query';

function LikeButton({ postId }) {
  const likeMutation = useMutation((postId) => likePost(postId), {
    onSuccess: () => {
      queryCache.invalidateQueries('posts');
    },
  });

  const handleLike = () => {
    likeMutation.mutate(postId);
  };

  return (
    <button onClick={handleLike} disabled={likeMutation.isLoading}>
      {likeMutation.isLoading ? 'Liking...' : 'Like'}
    </button>
  );
}

В приведенном выше фрагменте кода мы используем хук useMutation для создания функции мутации likeMutation, которая инкапсулирует логику лайкания публикации. Когда вызывается функция handleLike, мутация запускается вызовом likeMutation.mutate(postId). React Query обрабатывает процесс мутации, включая оптимистичные обновления, обработку ошибок и аннулирование кеша.

Автономная поддержка

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

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

Заключение

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

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

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

Удачного кодирования с React Query!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .