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

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

import { useQuery } from 'react-query';
const MyComponent = () => {
  const { data, isLoading, isError } = useQuery('todos', fetchTodos);
  if (isLoading) {
    return <p>Loading...</p>;
  }
  if (isError) {
    return <p>Error fetching data</p>;
  }
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

2. useMutation: когда дело доходит до выполнения асинхронных запросов, изменяющих данные, вам подойдет useMutation. Он обрабатывает оптимистичные обновления, повторные попытки и предоставляет простой API для обновления кэша и обработки состояний успеха и ошибки.

import { useMutation } from 'react-query';
const MyComponent = () => {
  const mutation = useMutation((newTodo) => createTodoAPI(newTodo));
  const handleFormSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newTodo = Object.fromEntries(formData.entries());
    mutation.mutate(newTodo);
  };
  return (
    <form onSubmit={handleFormSubmit}>
      <input type="text" name="title" placeholder="Title" />
      <button type="submit" disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Adding...' : 'Add Todo'}
      </button>
    </form>
  );
};

3. useInfiniteQuery. При работе с данными, разбитыми на страницы, useInfiniteQuery упрощает процесс, обрабатывая разбиение на страницы и загружая дополнительные данные по мере необходимости. Он обеспечивает простой способ получения и отображения бесконечных списков или таблиц.

import { useInfiniteQuery } from 'react-query';
const MyComponent = () => {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(
    'todos',
    fetchTodos,
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
    }
  );
  return (
    <>
      {data.pages.map((page, pageIndex) => (
        <ul key={pageIndex}>
          {page.map((todo) => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      ))}
      {hasNextPage && (
        <button onClick={fetchNextPage} disabled={isFetchingNextPage}>
          {isFetchingNextPage ? 'Loading more...' : 'Load More'}
        </button>
      )}
    </>
  );
};

4. useQueryClient: перехватчик useQueryClient дает вам доступ к экземпляру клиента запроса, позволяя выполнять мутации вручную или делать недействительными/запрашивать определенные запросы за пределами дерева компонентов.

import { useQueryClient } from 'react-query';
const MyComponent = () => {
  const queryClient = useQueryClient();
  const handleDataReset = () => {
    queryClient.resetQueries('todos');
  };
  return (
    <button onClick={handleDataReset}>Reset Data</button>
  );
};

<ол старт="5">

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

import { useQuery } from 'react-query';
const MyComponent = () => {
  const { data } = useQuery(['todos', { userId: 1 }], fetchUserTodos);
  // ...
};

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

Так чего же вы ждете? Попробуйте React Query и повысьте уровень своей игры в получении данных уже сегодня!