Руководство по использованию React Query в ваших проектах

В этой статье мы узнаем следующее:

  • Когда использовать React Query
  • Простые fetch запросы с пакетом React Query
  • Поиск элементов из API по идентификатору
  • Пагинация
  • Мутации

Когда использовать React Query

Традиционный метод fetch() отлично подходит для извлечения данных из API, но вы можете столкнуться с некоторыми трудностями, если ваше приложение разрастется и станет более сложным. Например,

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

Здесь на помощь приходит пакет React Query. Эта библиотека выполняет кеширование за вас. Нет необходимости работать с заголовками кеша и кешированием браузера. Кроме того, это также упрощает разбиение на страницы.

Подводя итог, React Query снимает множество головных болей, устраняя многие трудности, связанные с получением данных и управлением состоянием сервера.

Теперь, когда мы поговорили о его преимуществах, пора писать код!

React Query: основы

В этой части статьи мы узнаем:

  • Простые вызовы API
  • Поиск по идентификатору

Настройка проекта

Нам нужно инициализировать репозиторий. Для этого выполните следующую команду терминала:

В этом проекте мы будем использовать следующие внешние библиотеки:

  • response-query: он будет использоваться для выполнения запросов на выборку и публикацию в API.
  • Formik: будет использоваться для создания текстовой формы, которая позволит пользователю искать данные по идентификатору.

Для этого напишите следующую команду терминала:

Когда это будет сделано, перейдите к src/App.js и удалите код между тегами div. В итоге файл src/App.js должен выглядеть так:

Должен быть результат:

Теперь перейдем к выполнению простых запросов на выборку с помощью React Query.

Получение и отображение данных

В качестве первого шага создайте файл с именем Passenger.js в вашем src каталоге. Этот файл будет отвечать за выборку данных с сервера. В этой статье мы будем использовать Fake REST API.

В src/Passenger.js напишите следующий код:

  • Строка 1: Импортируйте метод useQuery из пакета response-query. Это позволит нам выполнять запросы на выборку.
  • Строка 4: Извлеките поля isLoading, error, data и isSuccess из ловушки useQuery. Первый параметр useQuery - это ключ. Это используется для идентификации запроса.
  • Строки 5–7: Сообщите React, что мы выполним fetch запрос к API, а затем преобразуем эти необработанные данные в JSON.
  • Строка 11: Если запрос был успешным (isSuccess = true), отобразите данные. Здесь мы отобразим поля id и name каждого элемента.
  • Строки 12–13: если запрос все еще загружается или возвращает ошибку (isLoading равно true или error не null), выведите соответствующее сообщение.

Затем перейдите к App.js и импортируйте QueryClient и QueryClientProvider из пакета response-query и компонента Passengers, например:

Затем, прямо над объявлением компонента App, напишите следующий фрагмент кода:

  • Строка 1: Создайте экземпляр QueryClient. Это используется для взаимодействия с кешем.

Теперь найдите следующий фрагмент кода в App.js:

Замените это следующим блоком кода:

  • Строка 3: QueryClientProvider действует как мост между нашим приложением и QueryClient. Другими словами, это позволяет нам реализовать кеширование в нашем приложении.
  • Строка 4: Визуализируйте компонент Passengers.

Запустите код. Это будет результат:

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

В следующем разделе мы узнаем, как искать определенные данные по идентификатору.

В итоге App.js должно выглядеть так:

Поиск по ID

В папке src создайте файл с именем PassengerID.js. Компонент PassengerID позволит пользователю искать данные о пассажирах, просто вводя идентификатор.

В src/PassengerID.js начните с импорта следующих библиотек:

  • Строка 1: мы будем использовать переменную состояния для отслеживания идентификатора.
  • Строка 2: Это поможет нам делать запросы к API.
  • Строка 3: Хук useFormik поможет нам в создании форм.

Затем напишите следующий код в вашем PassengerID файле:

  • Строка 2: Хук id сообщит React Query идентификатор, который необходимо запросить из нашего API.
  • Строка 3: Хук useFormik поможет нам создать форму. Здесь мы информируем Formik, что начальное значение текстового поля _id будет пустым.
  • Строка 7: Если пользователь отправляет форму, вызовите функцию setID, чтобы изменить переменную id на значение, введенное пользователем в текстовое поле.
  • Строка 12: объявить функцию fetchPassenger. Он будет загружен для пользователя в соответствии с идентификатором, который будет присутствовать в параметре. В конце концов, необработанные данные будут преобразованы в JSON, а затем возвращены.
  • Строка 18: Запустите функцию useQuery, чтобы выполнить fetch запрос к API.
    Кроме того, обратите внимание, что мы добавили к ключу переменную состояния id. Это потому, что наш запрос зависит от переменной id. По сути, это указывает React запускать запрос каждый раз при изменении состояния id. Чтобы узнать об этом подробнее, см. Это руководство.
  • Строка 19: вызвать функцию fetchPassenger и передать параметр id.

Теперь мы извлекли данные. Осталось только вывести его на экран.

Наконец, добавьте следующий код в PassengerID.js:

  • Строка 4: создайте элемент form и сообщите React, что если пользователь отправит форму, запустите обработчик отправки Formik.
  • Строка 5: Создайте текстовое поле input с id и name из _id.
    Важно отметить, что мы передаем поля id и name, которые соответствуют свойству, которое мы определили ранее в свойстве initialValues, расположенном внутри ловушки useFormik.
  • Строка 12: Если возвращены данные, отобразить поля пассажира name и trips.

Этот код теперь готов. Теперь нам нужно отобразить компонент PassengerID в DOM.

В App.js найдите следующий фрагмент кода:

Измените это так:

  • Строка 5: Визуализируйте компонент PassengerID.

Запустите код. Это будет результат:

Вуаля! Наш код работает. Кроме того, обратите внимание, что каждый раз, когда переменная состояния id изменялась, данные выбирались повторно.

На этом мы закончили с этим разделом. В следующем разделе мы углубимся в библиотеку response-query.

В конце концов, вот как должен выглядеть PassengerID.js:

React Query: дополнительные темы

В этой части статьи мы узнаем о

  • Пагинация
  • Мутации

Давайте сначала узнаем о разбиении на страницы.

Пагинация

Наш Fake API содержит тысячи записей. Хотя можно отобразить их все на своей странице, лучше отображать список на страницах. Например, отобразите первые десять записей на первой странице, затем следующие десять записей на второй и так далее и так далее.

В вашем Passengers.js файле объявите переменную состояния с именем page следующим образом:

Это позволит отслеживать, на какой странице мы находимся.

Затем напишите следующий фрагмент кода:

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

Затем найдите следующий фрагмент кода:

Теперь измените это так:

  • Строка 2: Сообщите React, что наш запрос зависит от переменной page. Если состояние page изменится, запустите запрос еще раз.
  • Строка 3: Получить данные о пассажирах с переменной page в качестве параметра.
  • Строка 4: keepPreviousData указывает React сохранять старые данные при изменении ключа запроса.

Мы почти закончили. Затем найдите свой return блок в Passengers.js:

Добавьте следующие строки кода сразу после открывающего тега div:

  • Строка 3: Скажите React уменьшить состояние page и остановиться, если оно достигнет нуля.
  • Строка 4: Увеличьте состояние page.
  • Строка 5: отображение значения page.

Готово! Запустите код. Должен быть результат:

Большой! Наш код работает. А теперь займемся мутациями.

В итоге Passengers.js должен выглядеть так:

Мутации

React Query - отличная библиотека для выполнения GET запросов, но как нам изменить или добавить данные на наш сервер?

Вот тут-то и появляются мутации. Это позволяет вам делать запросы POST и PUT.

Перед тем, как начать, мы должны сначала установить axios. Это позволит нам делать POST запросов к API.

В каталоге src создайте файл с именем AddPassenger.js. В качестве первого шага импортируйте следующие модули:

  • Строка 1: мы будем объявлять переменные состояния, которые позже будут отправлены в API в виде данных.
  • Строка 2: Хук useMutation сообщает React об изменении данных на сервере.
  • Строка 3: Axios позволит вам делать POST запросов к API.
  • Строка 4: Это помогает нам извлекать данные из формы.
  • Строки 2–6: Создайте крючок useFormik. Он будет иметь три значения: name, trips и airline.
  • Строки 8–16: когда пользователь отправляет форму, выполняет мутацию. Отправьте значения текстовых полей как данные на сервер. Мы определим mutation позже.

Затем напишите следующий фрагмент кода:

  • Строка 1: Создайте экземпляр useMutation.
  • Строка 2: Выполните POST запрос к API. Здесь переменная item - это тело данных, которые мы отправим позже.
  • Строка 4: Если мутация прошла успешно (свойство isSuccess равно true), выведите возвращенные данные из консоли.

Теперь мы закончили с нашей логикой. Осталось только отобразить форму, чтобы пользователь мог ввести некоторые данные.

Напишите следующий код в свой AddPassenger.js файл:

  • Строка 4: Запуск обработчика отправки Formik, когда пользователь отправляет форму.
  • Строки 7–15: Создайте несколько текстовых полей для имени, поездок и авиакомпании.
  • Строка 19: Если запрос загружается (свойство isLoading равно true), покажите соответствующее сообщение.
  • Строка 20: Если мутация прошла успешно (свойство isSuccess - true), покажите идентификатор нового пассажира.

Теперь мы закончили с этим кодом. Последний шаг - отобразить наш AddPassenger компонент в DOM.

Перейдите к src/App.js и найдите следующий блок кода:

Измените это так:

  • Строка 4: отображение компонента AddPassenger.

Запустите код. Это будет результат:

Большой! Наш код работает. Мы получили удостоверение личности нашего пассажира. Давай попробуем его найти.

Все работает как положено!

Другие источники

Репозиторий GitHub

Дальнейшее обучение

Заключение

React Query было очень просто использовать. Нам не нужно было писать тонны кода для добавления поддержки разбивки на страницы или выполнения POST запросов. Неудивительно, что такие крупные корпорации, как Microsoft и eBay, используют React Query для производства.

Если при чтении этой статьи у вас возникла какая-то путаница, я рекомендую вам разобрать и поиграть с кодом, чтобы вы могли полностью понять внутреннюю работу этой библиотеки.

Спасибо, что дожили до конца!