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

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

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

npm install react-query

или если вы используете Yarn:

yarn add react-query

После завершения установки вы можете импортировать React Query и начать использовать его в своих компонентах.

Основное использование:

1. Запрос данных.
   Чтобы получить данные с помощью React Query, вы можете использовать хук useQuery. Допустим, мы хотим получить список задач из API. Вот пример:

import { useQuery } from 'react-query';
const TodoList = () => {
  const { data, isLoading, error } = useQuery('todos', async () => {
    const response = await fetch('/api/todos');
    return response.json();
  });
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

В этом примере перехватчик useQueryпринимает уникальный ключ 'todos'и асинхронную функцию, извлекающую данные. Перехватчик управляет состоянием загрузки, обработкой ошибок и кэшированием данных.

2. Изменение данных.
   React Query также предоставляет хук useMutationдля обработки изменений данных, таких как создание, обновление или удаление ресурсов. Вот пример обновления задачи:

import { useMutation } from 'react-query';
const EditTodoForm = ({ todo }) => {
  const { mutate, isLoading } = useMutation(
    async (updatedTodo) => {
      const response = await fetch(`/api/todos/${todo.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updatedTodo),
      });
      return response.json();
    }
  );
  const handleFormSubmit = (event) => {
    event.preventDefault();
    const updatedTodo = { ...todo, title: event.target.value };
    mutate(updatedTodo);
  };
  return (
    <form onSubmit={handleFormSubmit}>
      <input type="text" defaultValue={todo.title} />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
};

В этом примере хук useMutationпринимает асинхронную функцию мутации, которая обновляет задачу при вызове. Перехватчик управляет состоянием загрузки и предоставляет функцию mutateдля запуска мутации.

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

import { useMutation, useQueryClient } from 'react-query';
const EditTodoForm = ({ todo }) => {
  const queryClient = useQueryClient();
  const { mutate } = useMutation(/* mutation function */);
  const handleFormSubmit = async (event) => {
    // Update the todo
    // Invalidate and refetch todos
    await mutate(updatedTodo, {
      onSuccess: () => {
        queryClient.invalidateQueries('todos');
        queryClient.refetchQueries('todos');
      },
    });
  };
  // Rest of the component
};

В этом примере мы используем перехватчик useQueryClientдля получения доступа к экземпляру клиента запроса. После успешной мутации мы можем использовать методы invalidateQueriesи refetchQueriesдля обновления кэшированных задач.

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

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