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

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

import { useQuery } from 'react-query';
const MyComponent = () => {
  const { data, isLoading, error } = useQuery('todos', () =>
    fetch('https://api.example.com/todos').then((res) => res.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>
  );
};

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

import { useMutation, useQueryClient } from 'react-query';
const MyComponent = () => {
  const queryClient = useQueryClient();
  const updateTodo = useMutation((updatedTodo) =>
    fetch(`https://api.example.com/todos/${updatedTodo.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedTodo),
    }).then((res) => res.json())
  );
  const handleUpdateTodo = (todo) => {
    updateTodo.mutate({ ...todo, completed: !todo.completed }, {
      onSuccess: () => {
        queryClient.invalidateQueries('todos');
      },
    });
  };
  return (
    <button onClick={() => handleUpdateTodo(todo)}>Toggle Complete</button>
  );
};

3. Разбиение на страницы.
   React Query упрощает разбиение на страницы, предоставляя встроенную поддержку разбиения на страницы. Хук useInfiniteQueryиспользуется для получения данных с разбивкой на страницы. Вот пример:

import { useInfiniteQuery } from 'react-query';
const MyComponent = () => {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(
    'todos',
    ({ pageParam = 1 }) => fetch(`https://api.example.com/todos?page=${pageParam}`).then((res) => res.json()),
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
    }
  );
  return (
    <div>
      {data.pages.map((page) =>
        page.map((todo) => <div key={todo.id}>{todo.title}</div>)
      )}
      <button onClick={fetchNextPage} disabled={!hasNextPage || isFetchingNextPage}>
        {isFetchingNextPage ? 'Loading more...' : 'Load More'}
      </button>
    </div>
  );
};

4. Аннулирование и обновление данных.
   React Query позволяет вам делать недействительными и обновлять данные, когда это необходимо. Для этого объект queryClientпредоставляет такие методы, как invalidateQueriesи refetchQueries. Вот пример:

import { useQueryClient } from 'react-query';
const MyComponent = () => {
  const queryClient = useQueryClient();
  const handleLogout = () => {
    // Invalidate and refetch all queries
    queryClient.invalidateQueries();
    queryClient.refetchQueries();
  };
  return <button onClick={handleLogout}>Logout</button>;
};

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