Использование React Query: упрощение работы с серверными данными

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

Установка и подключение React Query

Для начала нужно установить React Query в свой проект. Это можно сделать с помощью npm или yarn:

npm install react-query
yarn add react-query

После установки нужно подключить React Query в своем главном компоненте:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    {/* Ваши компоненты */}
  </QueryClientProvider>
);

export default App;

Запросы к серверу с помощью React Query

React Query предоставляет хук useQuery для выполнения запросов к серверу. Он принимает функцию или промис, которые возвращают данные с сервера. Пример использования:

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
};

const MyComponent = () => {
  const { data, isLoading, error } = useQuery('myData', fetchData);

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

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

  return <div>{data}</div>;
};

В этом примере мы используем хук useQuery для выполнения запроса fetchData и получения данных с сервера. Обратите внимание, что мы задаем ключ myData для запроса, чтобы React Query мог кешировать данные и автоматически обновлять компонент при необходимости.

Мутации данных с помощью React Query

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

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

const updateData = async (id, newData) => {
  // Выполнение мутации на сервере и получение обновленных данных
};

const MyComponent = () => {
  const queryClient = useQueryClient();

  const mutation = useMutation((newData) => updateData(1, newData), {
    onSuccess: () => {
      queryClient.invalidateQueries('myData');
    },
  });

  const handleUpdate = () => {
    mutation.mutate({ some: 'data' });
  };

  return (
    <div>
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
};

В этом примере мы используем хук useMutation для выполнения мутации updateData и обновления данных на сервере. При успехе мутации мы вызываем метод invalidateQueries у объекта queryClient, чтобы React Query обновил кеш и автоматически перерисовал компоненты, зависящие от этих данных.

Кеширование и автоматическое обновление данных

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

import { useQuery } from 'react-query';

const MyComponent = () => {
  const { data } = useQuery('myData', fetchData, {
    refetchInterval: 5000, // обновление данных каждые 5 секунд
  });

  return <div>{data}</div>;
};

В этом примере мы используем опцию refetchInterval, чтобы React Query автоматически обновлял данные каждые 5 секунд. Если данные на сервере изменились, React Query автоматически обновит их и перерисует компонент.

Итоги

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