«Оптимизация управления данными в React с помощью React Query: подробное руководство и пример проекта»

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

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

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

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

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

import { useQuery } from 'react-query'

function MyComponent() {
  const { isLoading, data } = useQuery('todos', async () => {
    const response = await fetch('/api/todos')
    return response.json()
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

В этом примере мы получаем список задач из API и отображаем их в виде списка. Хук useQuery принимает строковый ключ («todos»), который используется для кэширования результатов, а также асинхронную функцию, которая извлекает данные.

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

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

function AddTodo() {
  const queryClient = useQueryClient()

  const { mutate, isLoading } = useMutation(
    async (todo) => {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(todo)
      })
      return response.json()
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('todos')
      }
    }
  )

  const handleSubmit = async (e) => {
    e.preventDefault()
    const { value } = e.target.elements.title
    mutate({ title: value })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Adding...' : 'Add'}
      </button>
    </form>
  )
}

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

3. Разбивка на страницы:
Другой распространенный сценарий выборки данных — разбиение на страницы. React Query упрощает реализацию нумерации страниц с помощью хука useInfiniteQuery, который позволяет извлекать данные фрагментами и добавлять их в кеш по мере их загрузки.

import { useInfiniteQuery } from 'react-query'

function MyComponent() {
  const { data, error, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery(
    'todos',
    ({ pageParam = 0 }) => fetch(`/api/todos?page=${pageParam}`).then(res => res.json()),
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
    }
  )

  if (error) return <div>Error fetching data</div>

  return (
    <>
      {data.pages.map(page => (
        <ul key={page.pageNumber}>
          {page.todos.map(todo => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      ))}

      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetching}>
        {isFetching ? 'Loading more...' : hasNextPage ? 'Load More' : 'Nothing more to load'}
      </button>
    </>
  )
}

В этом примере мы используем хук useInfiniteQuery для получения задач на страницах из API. Функция fetchNextPage используется для загрузки следующей страницы задач, а свойство hasNextPage используется для отключения кнопки «Загрузить еще», когда больше нет страниц для загрузки. Функция getNextPageParam используется для возврата значения nextPage из последней страницы данных, которое используется для выборки следующей страницы данных.

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

Вот официальная документация библиотеки.

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

Я уверен, что этот плейлист поможет вам более эффективно изучить React Query.

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

Это репозиторий проекта, использующий почти все функции React Query. Я выполнил упомянутые здесь инструкции по плейлисту YouTube и создал проект.

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