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

Хватит разговоров, давай поработаем над кодом :)

Прежде всего, установите обновленную версию узла с https://nodejs.org/en/, затем создайте новое приложение response js и установите зависимости response-query, используя следующие команды:

npx create-response-app myapp
cd myapp
npm я реагирую-запрос или если вы используете пряжу (пряжа добавляет реагирующий-запрос)

В этом приложении мы будем использовать api звездных войн для выполнения вызовов api https://swapi.dev/.

Структура нашей программы будет выглядеть так:

Теперь напишем логику:

Мы будем переключаться между двумя страницами с помощью тернарного оператора, если showPlanet истинно, он вернет компонент Planet, иначе он вернет компонент People.

Прежде всего, я импортирую useQuery из библиотеки запросов-ответов, useQuery принимает два или более параметра, первый параметр - это ключ запроса, вы можете назвать его как хотите, затем второй параметр - это асинхронный метод, который вернет ответ от server.
useQuery возвращает данные и статус (useQuery также возвращает другие значения, но пока мы сосредоточимся на данных и статусе), status имеет три состояния: загрузка, успех и ошибка. Если данные загружаются с сервера, он вернет строку загрузки, если данные получены с сервера, он вернет строку успеха
и ответ будет сохранен в переменной данных, если сервер выдаст ошибку, тогда статус вернет ошибку.

Как вы можете видеть на этом изображении,

Если статус загружается, я возвращаю загрузку, если статус является ошибкой, я возвращаю ошибку, и если статус успешен, я отображаю данные из переменной данных.

Проделаем ту же логику в компоненте Planet, и это будет выглядеть так:

Теперь мы можем переключаться между компонентами, и вы заметите, что если данные получены, загрузка не потребуется, потому что данные кэшируются.

Надеюсь, вам понравился этот учебник, и он поможет вам, и более того, если вы хотите узнать больше о response-query, вы можете прочитать документацию. Https://react-query.tanstack.com/docs/overview.