{"draftJsState":{"blocks":[{"data":{"image":{"id":"6091d226a5f87026b1cdb14b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c885k"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"emqvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье будут рассмотрены:","type":"unstyled","key":"ahtfv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"случаи использования React Query;","type":"unordered-list-item","key":"e52u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"простые запросы fetch с помощью пакета React Query;","type":"unordered-list-item","key":"clhmr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"поиск элементов через API по ID;","type":"unordered-list-item","key":"6ut0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"пагинация;","type":"unordered-list-item","key":"e0q42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"мутации.","type":"unordered-list-item","key":"5l2n5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Случаи использования React Query","type":"header-two","key":"9lqis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Традиционный метод fetch() отлично подходит для извлечения данных с помощью API. Однако по мере разрастания и усложнения приложения вы можете столкнуться с рядом трудностей. Например:","type":"unstyled","key":"4g6nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Кэширование. Для сохранения в кэше ответов на запросы разработчик должен разобраться с заголовками кэширования и браузерным кэшированием. В этом заключается главная сложность. В дальнейшем вам также придется уведомить React о моменте повторного извлечения данных, т. е. сообщить ему о том, что данные устарели и требуют обновления.","type":"unordered-list-item","key":"bnr6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Пагинация. А что если нужно отобразить огромные объемы данных для пользователя? В этом случае необходимо реализовать поддержку пагинации. Однако даже если это возможно, добавление такой функциональность обернется еще одной проблемой.","type":"unordered-list-item","key":"afocg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И вот тут в дело вступает пакет React Query. Эта библиотека берет заботы о кэшировании на себя, вследствие чего пропадает необходимость работать с заголовками кэширования и браузерным кэшированием, а также упрощается процесс пагинации.","type":"unstyled","key":"ec2qv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, React Query облегчает нам жизнь, устраняя многие проблемы, связанные с получением данных и управлением состоянием сервера.","type":"unstyled","key":"bdij1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь же, обсудив ее преимущества, приступаем к написанию кода!","type":"unstyled","key":"bi6v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React Query: основы","type":"header-two","key":"3tajs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном разделе статьи будут рассмотрены:","type":"unstyled","key":"apha2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"простые вызовы API;","type":"unordered-list-item","key":"eavni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"поиск по ID.","type":"unordered-list-item","key":"3jbk2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка проекта","type":"header-three","key":"7ccq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала необходимо инициализировать репозиторий. Для этого выполняем следующую команду в терминале:","type":"unstyled","key":"1mies"},{"data":{"image":{"id":"6091d3fbea434d12df6249b8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ввод команды в терминале для инициализации репозитория","type":"atomic:image","key":"7r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном проекте применяются такие сторонние библиотеки, как:","type":"unstyled","key":"58sio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React-query — для выполнения запросов fetch и post к API.","type":"unordered-list-item","key":"62ld4"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":6,"offset":0}],"inlineStyleRanges":[],"text":"Formik — для создания текстовой формы, позволяющей пользователю осуществлять поиск данных по ID.","type":"unordered-list-item","key":"1k6qi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для их установки вводим в терминал команду:","type":"unstyled","key":"3uvo6"},{"data":{"image":{"id":"6091d3fb87bf2977fc9e5bba"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ввод команды в терминале для установки пакетов","type":"atomic:image","key":"9lpg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого переходим в src/App.js и удаляем код между тегами div. В итоге файл src/App.js должен выглядеть таким образом:","type":"unstyled","key":"dd9ao"},{"data":{"image":{"id":"6091d3fbc235fb60b6258b71"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В App.js код должен выглядеть именно так","type":"atomic:image","key":"dsphp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получаем следующий результат:","type":"unstyled","key":"7l9oc"},{"data":{"image":{"id":"6091d3fbde56f009bc14c8c0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат кода","type":"atomic:image","key":"8kca2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь переходим к выполнению простых запросов fetch с помощью React Query.","type":"unstyled","key":"e6dr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение и отображение данных","type":"header-three","key":"cqqbp"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":13,"offset":125}],"inlineStyleRanges":[],"text":"На первом этапе создаем файл Passenger.js в директории src. Он отвечает за получение данных с сервера. В статье используется Fake REST API.","type":"unstyled","key":"48kg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В src/Passenger.js прописываем код:","type":"unstyled","key":"b5l2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useQuery } from \"react-query\";\n\nfunction Passengers() {\n const { isLoading, error, data, isSuccess } = useQuery(\"passengers\", () =>\n fetch(\n \"https://api.instantwebtools.net/v1/passenger?page=0&size=10\" ).then((res) => res.json())\n );\n return (\n

{isSuccess &&\n data.data.map((item) => (\n

{item.name}

{item._id}

))}\n {isLoading &&

}\n {error &&

Error occurred!

}\n

);\n}\n\nexport default Passengers;","type":"unstyled","key":"fn2tk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 1. Импортируем метод useQuery из пакета React Query, позволяющий выполнять запросы fetch.","type":"unordered-list-item","key":"bc15j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. Извлекаем поля isLoading, error, data и isSuccess из хука useQuery. Первый параметр useQuery — это ключ, применяемый для идентификации запроса.","type":"unordered-list-item","key":"4hciq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строки 5-7. Сообщаем React о намерении выполнить запрос fetch к API, после чего преобразуем полученные данные в JSON.","type":"unordered-list-item","key":"bdp3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 11. Если запрос был успешным (isSuccess является true), то отображаем данные. В нашем случае ими будут поля id и name каждого элемента.","type":"unordered-list-item","key":"88p1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строки 12–13. Если запрос продолжает загружаться или вернул ошибку (isLoading является true или error не является null), то показываем надлежащее сообщение.","type":"unordered-list-item","key":"58odt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее переходим в App.js и импортируем QueryClient, QueryClientProvider из пакета React Query , а также компонент Passengers:","type":"unstyled","key":"eejc1"},{"data":{"image":{"id":"6091d3fbb8e935293c8894c0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для App.js","type":"atomic:image","key":"e3skk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Непосредственно поверх объявления компонента App пишем следующий фрагмент кода:","type":"unstyled","key":"faevb"},{"data":{"image":{"id":"6091d3fbfe106d5922195a40"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для App.js","type":"atomic:image","key":"3sfa2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 1. Создаем экземпляр QueryClient для взаимодействия с кэшем.","type":"unordered-list-item","key":"35fd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь находим данный фрагмент кода в App.js:","type":"unstyled","key":"eu61h"},{"data":{"image":{"id":"6091d3fdfe106d5922195c93"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код, который нужно найти в App.js","type":"atomic:image","key":"f1bdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заменяем его блоком кода, указанным ниже:","type":"unstyled","key":"6mc5s"},{"data":{"image":{"id":"6091d3fda5f87026b1cfec18"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для замены","type":"atomic:image","key":"5jll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 3. QueryClientProvider служит мостом между приложением и QueryClient, иначе говоря, позволяет реализовать кэширование в приложении.","type":"unordered-list-item","key":"4mi94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. Отрисовываем компонент Passengers.","type":"unordered-list-item","key":"9phij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняем код, получая следующий результат:","type":"unstyled","key":"bclda"},{"data":{"image":{"id":"6091d3fdb8e935293c889654"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вывод кода","type":"atomic:image","key":"4lq8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видим, код работает. Простой запрос fetch успешно выполнен с помощью React Query.","type":"unstyled","key":"8aojs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В следующем разделе узнаем, как осуществлять поиск конкретных данных посредством ID.","type":"unstyled","key":"219rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В итоге App.js должен выглядеть так:","type":"unstyled","key":"psm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { QueryClient, QueryClientProvider } from \"react-query\";\nimport Passengers from \"./Passengers\";\n\nconst queryClient = new QueryClient();\nfunction App() {\n return (\n

);\n}\n\nexport default App;","type":"unstyled","key":"9u6nn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск по ID","type":"header-three","key":"5oemn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В каталоге src создаем файл PassengerID.js. Компонент PassengerID позволит пользователю искать данные пассажира всего лишь путем ввода ID.","type":"unstyled","key":"1l6j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В src/PassengerID.js начинаем с импорта библиотек:","type":"unstyled","key":"drqef"},{"data":{"image":{"id":"6091d3fda5f87026b1cfec67"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для PassengerID","type":"atomic:image","key":"9s84e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 1. Используем переменную состояния для отслеживания ID.","type":"unordered-list-item","key":"90mnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 2 помогает в выполнении запросов к API.","type":"unordered-list-item","key":"2mhfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хук useFormik содействует в создании форм.","type":"unordered-list-item","key":"1puv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее пишем код в файле PassengerID:","type":"unstyled","key":"coplh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function PassengerID() {\n const [id, setID] = useState(\"\");\n const formik = useFormik({\n initialValues: {\n _id: \"\",\n },\n onSubmit: (values) => {\n console.log(JSON.stringify(values, null, 2));\n setID(values._id);\n },\n });\n const fetchPassenger = async (id) => {\n const res = await fetch(\n `https://api.instantwebtools.net/v1/passenger/${id}` );\n return res.json();\n };\n const { data, error, isLoading } = useQuery([\"passengerID\", id], () =>\n fetchPassenger(id)\n );\n}\n\nexport default PassengerID;","type":"unstyled","key":"19iep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 2. Хук id сообщает React Query идентификатор, по которому нужно произвести запрос через API.","type":"unordered-list-item","key":"d0npa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 3. Хук useFormik помогает в создании формы. Здесь мы информируем Formik о том, что начальное значение текстового поля _id будет пустым.","type":"unordered-list-item","key":"epmaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 7. Если пользователь отправляет форму, то вызываем функцию setID для изменения переменной id на значение, введенное им в текстовое поле.","type":"unordered-list-item","key":"6t05c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 12. Объявляем функцию fetchPassenger, которая выберет пользователя в соответствии с ID, присутствующим в параметре. В итоге сырые данные будут преобразованы в JSON и затем возвращены.","type":"unordered-list-item","key":"40asb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 18. Запускаем функцию useQuery для выполнения запроса fetch к API. Обратите внимание на добавление в ключ переменной состояния id. Дело в том, что наш запрос зависит от переменной id. Таким образом мы даем указание React выполнять запрос при каждом изменении состояния id.","type":"unordered-list-item","key":"6c0h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 19. Вызываем функцию fetchPassenger и передаем параметр id.","type":"unordered-list-item","key":"fo06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данные извлечены, осталось их только отобразить.","type":"unstyled","key":"agvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В довершении всего добавляем код в PassengerID.js:","type":"unstyled","key":"986h7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (\n

Find by ID

{error &&

Error!

}\n {data && (\n

{data.name}, {data.trips}\n

)}\n {isLoading &&

}\n

);","type":"unstyled","key":"1dc4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. Создаем элемент form и в случае отправки пользователем формы инструктируем React запустить соответствующий обработчик.","type":"unordered-list-item","key":"59f31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 5. Создаем текстовое поле input с id=”_id\" и name=\"_id\". Необходимо отметить, что мы передаем это поле id и name, соответствующее свойству, которое было определено ранее в свойстве initialValues, расположенном в хуке useFormik.","type":"unordered-list-item","key":"60upa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 12. Если данные возвращаются, то отображаем поля name и trips (поездок) пассажира.","type":"unordered-list-item","key":"4ph0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь код принял свой окончательный вид. На этом этапе необходимо отрисовать компонент PassengerID в DOM.","type":"unstyled","key":"53p54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В App.js находим фрагмент кода:","type":"unstyled","key":"4d14o"},{"data":{"image":{"id":"6091d3fe4fade3788be9bd93"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код, который нужно найти в App.js","type":"atomic:image","key":"fu55l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Меняем его следующим образом:","type":"unstyled","key":"2b75v"},{"data":{"image":{"id":"6091d3fe4fade3788be9bdbf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для App.js","type":"atomic:image","key":"a8sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 5. Отрисовываем компонент PassengerID.","type":"unordered-list-item","key":"7r8m2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняем код, в результате получая:","type":"unstyled","key":"99slf"},{"data":{"image":{"id":"6091d3ffa38d215d4e37a29f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вывод кода","type":"atomic:image","key":"6slsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убеждаемся в работоспособности кода. Обратите внимание, что при каждом изменении переменной состояния id, происходит повторное извлечение данных.","type":"unstyled","key":"4shsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тема данного раздела исчерпана, и пора переходить к следующему, в котором подробно будем знакомиться с библиотекой React Query.","type":"unstyled","key":"g5bs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Напоследок покажем, как должен выглядеть PassengerID.js:","type":"unstyled","key":"b40ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useState } from \"react\";\nimport { useQuery } from \"react-query\";\nimport { useFormik } from \"formik\";\nimport Passengers from \"./Passengers\";\n\nfunction PassengerID() {\n const [id, setID] = useState(\"\");\n const formik = useFormik({\n initialValues: {\n _id: \"\",\n },\n onSubmit: (values) => {\n console.log(JSON.stringify(values, null, 2));\n setID(values._id);\n },\n });\n const fetchPassenger = async (id) => {\n const res = await fetch(\n `https://api.instantwebtools.net/v1/passenger/${id}` );\n return res.json();\n };\n const { data, error, isLoading } = useQuery([\"passengerID\", id], () =>\n fetchPassenger(id)\n );\n return (\n

Find by ID

{error &&

Error!

}\n {data && (\n

{data.name}, {data.trips}\n

)}\n {isLoading &&

}\n

);\n}\n\nexport default PassengerID;","type":"unstyled","key":"ek9g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React Query: дополнительные возможности","type":"header-two","key":"7c6o0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом разделе рассмотрим:","type":"unstyled","key":"80rko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"пагинацию;","type":"unordered-list-item","key":"f2hu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"мутации.","type":"unordered-list-item","key":"424ce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнем с пагинации.","type":"unstyled","key":"11hvp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пагинация","type":"header-three","key":"1st2i"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Fake API содержит тысячи записей. Несмотря на то, что можно отобразить их все на одной странице, лучше попрактиковаться в разбивке этого списка по нескольким. Например, поместить первые десять на одну страницу, а следующие десять — на вторую и т. д.","type":"unstyled","key":"40up2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В файле Passengers.js объявляем переменную состояния page:","type":"unstyled","key":"ffdht"},{"data":{"image":{"id":"6091d400a5f87026b1cfeeee"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для Passengers.js","type":"atomic:image","key":"f0sja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это позволит отслеживать текущую страницу.","type":"unstyled","key":"8e34l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее пишем такой фрагмент кода:","type":"unstyled","key":"ek8ht"},{"data":{"image":{"id":"6091d400a38d215d4e37a36f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для Passengers.js","type":"atomic:image","key":"3pag4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой функции мы инструктируем React извлечь записи через API с указанной страницы. В итоге возвращаются преобразованные данные JSON.","type":"unstyled","key":"2o325"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее находим следующий фрагмент кода:","type":"unstyled","key":"8a6mf"},{"data":{"image":{"id":"6091d4004461ec746cd409fb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код, который нужно найти в Passengers.js","type":"atomic:image","key":"6nqgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь меняем его таким образом:","type":"unstyled","key":"dteei"},{"data":{"image":{"id":"6091d400a38d215d4e37a3c6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для Passengers.js","type":"atomic:image","key":"61h6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 2. Сообщаем React, что запрос зависит от переменной page. При изменении состояния page выполняем запрос заново.","type":"unordered-list-item","key":"egloe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 3. Извлекаем данные пассажира с помощью переменной page в качестве параметра.","type":"unordered-list-item","key":"9hh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. keepPreviousData дает указание React сохранять старые данные при изменении ключа запроса.","type":"unordered-list-item","key":"fi08a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы почти у цели. Далее находим блок return в Passengers.js:","type":"unstyled","key":"bi350"},{"data":{"image":{"id":"6091d4004461ec746cd40a27"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код, который нужно найти в Passengers.js","type":"atomic:image","key":"16sgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем следующие строки кода сразу после открывающего тега div:","type":"unstyled","key":"bf528"},{"data":{"image":{"id":"6091d4024fade3788be9c2cd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для Passengers.js","type":"atomic:image","key":"btcoe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 3. Инструктируем React уменьшить состояние page и остановить его при достижении 0.","type":"unordered-list-item","key":"33d36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. Увеличиваем состояние page.","type":"unordered-list-item","key":"5iovr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 5. Отображаем значение page.","type":"unordered-list-item","key":"5o9me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот теперь закончили! Выполняем код, в результате получая:","type":"unstyled","key":"9md81"},{"data":{"image":{"id":"6091d402c235fb60b6259335"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вывод кода","type":"atomic:image","key":"2g3l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видим, код работает. Теперь займемся мутациями.","type":"unstyled","key":"29uob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Окончательный вариант кода Passengers.js:","type":"unstyled","key":"ka0g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useState } from \"react\";\nimport { useQuery } from \"react-query\";\n\nfunction Passengers() {\n const [page, setPage] = useState(0);\n\n const fetchPassengers = async (page) => {\n const res = await fetch(\n `https://api.instantwebtools.net/v1/passenger?page=${page}&size=10` );\n return res.json();\n };\n\n const { isLoading, error, data, isSuccess } = useQuery(\n [\"passengers\", page],\n () => fetchPassengers(page),\n { keepPreviousData: false }\n );\n return (\n

{page}

{isSuccess &&\n data.data.map((item) => (\n

{item.name}

{item._id}

))}\n {isLoading &&

}\n {error &&

Error occurred!

}\n

);\n}\n\nexport default Passengers;","type":"unstyled","key":"4dogi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мутации","type":"header-three","key":"10m9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React Query — отличная библиотека для выполнения запросов GET. Выясним, как изменять или добавлять данные на сервер.","type":"unstyled","key":"5lmja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь в дело вступают мутации, позволяющие выполнять запросы POST и PUT.","type":"unstyled","key":"50a54"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":5,"offset":20}],"inlineStyleRanges":[],"text":"Но прежде установим axios для осуществления вышеуказанных запросов к API.","type":"unstyled","key":"86knn"},{"data":{"image":{"id":"6091d40287bf2977fc9e63fc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ввод команды в терминал для установки axios","type":"atomic:image","key":"4op5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В директории src создаем файл AddPassenger.js. Начинаем с импорта модулей:","type":"unstyled","key":"4nkb9"},{"data":{"image":{"id":"6091d402a5f87026b1cff24f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для AddPassenger.js","type":"atomic:image","key":"2d6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 1. Объявляем переменные состояния для последующей их отправки к API в качестве данных.","type":"unordered-list-item","key":"bcqkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 2. Хук useMutation инструктирует React изменить данные на сервере.","type":"unordered-list-item","key":"dq968"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 3. Axios разрешает выполнить запросы POST к API.","type":"unordered-list-item","key":"9opmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4 способствует извлечению данных из формы.","type":"unordered-list-item","key":"pv3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function AddPassenger() {\n const formik = useFormik({\n initialValues: {\n name: \"\",\n trips: 0,\n airline: 1,\n },\n onSubmit: (values) => {\n console.log(JSON.stringify(values, null, 2));\n mutation.mutate({\n name: values.name,\n trips: values.trips,\n airline: values.airline,\n });\n },\n });\n}\nexport default AddPassenger;","type":"unstyled","key":"f67o8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строки 2–6. Создаем хук useFormik, имеющий 3 значения name, trips и airline.","type":"unordered-list-item","key":"f0690"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строки 8–16. При отправке пользователем формы выполняем мутацию. Отправляем значения текстовых полей в качестве данных на сервер. В дальнейшем определяем mutation.","type":"unordered-list-item","key":"7bt2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем пишем фрагмент код:","type":"unstyled","key":"7luh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const mutation = useMutation((item) =>\n axios.post(\"https://api.instantwebtools.net/v1/passenger/\", item)\n);\nif (mutation.isSuccess) console.log(mutation.data.data);","type":"unstyled","key":"an0f7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 1. Создаем экземпляр useMutation.","type":"unordered-list-item","key":"k4s8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 2. Выполняем запрос POST к API. Переменная item является телом данных, которые будут отправлены позже.","type":"unordered-list-item","key":"9jtrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. Если мутация была успешной (свойство isSuccess является true), то регистрируем возвращаемые данные в консоли.","type":"unordered-list-item","key":"9rjhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С логикой закончили, осталось отобразить форму, обеспечивая пользователю возможность ввода данных.","type":"unstyled","key":"7a5gq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем следующий код в файле AddPassenger.js:","type":"unstyled","key":"sf9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (\n

Submit form

{mutation.isLoading &&

Please wait

}\n {mutation.isSuccess &&

Success! ID: {mutation.data.data._id}

}\n

);","type":"unstyled","key":"16dvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. Запускаем обработчик отправки Formik, когда пользователь отправляет форму.","type":"unordered-list-item","key":"1o0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строки 7–15. Создаем несколько текстовых полей для name, trips и airline.","type":"unordered-list-item","key":"d65id"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 19. Если запрос загружается (свойство isLoading является true), то отображаем надлежащее сообщение.","type":"unordered-list-item","key":"15dmr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 20. В случае успешного выполнения мутации (свойство isSuccess является true) отображаем ID нового пассажира.","type":"unordered-list-item","key":"57fgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа над этим кодом завершена, осталось отобразить компонент AddPassenger в DOM.","type":"unstyled","key":"6u6fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим к src/App.js и находим блок кода:","type":"unstyled","key":"2hote"},{"data":{"image":{"id":"6091d4027ffcba2d9e4b676b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код, который нужно найти в App.js","type":"atomic:image","key":"ag9h7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Меняем его таким образом:","type":"unstyled","key":"7m9dn"},{"data":{"image":{"id":"6091d4037ffcba2d9e4b67ed"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Замена кода в App.js","type":"atomic:image","key":"98og2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строка 4. Отображаем компонент AddPassenger.","type":"unordered-list-item","key":"fvgfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняем код и получаем результат:","type":"unstyled","key":"83q71"},{"data":{"image":{"id":"6091d404de56f009bc14d292"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вывод кода","type":"atomic:image","key":"gqsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код работает. Мы получили ID пассажира. Попробуем его найти.","type":"unstyled","key":"b8mt0"},{"data":{"image":{"id":"6091d40487bf2977fc9e6667"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск по ID","type":"atomic:image","key":"7sd2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все прекрасно функционирует!","type":"unstyled","key":"fbqm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополнительные источники","type":"header-two","key":"7qvdd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Репозиторий GitHub","type":"header-three","key":"d7am0"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":21,"offset":0}],"inlineStyleRanges":[],"text":"Проект кода на GitHub.","type":"unordered-list-item","key":"794vt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"33omv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот такая неимоверно легкая в применении React Query. Нам не пришлось писать много кода для добавления поддержки пагинации или выполнения запроса POST. Неудивительно, что крупные корпорации, например Microsoft и eBay, используют для продакшена именно React Query.","type":"unstyled","key":"1d2h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если по ходу изучения статьи что-то осталось непонятным, советуем детально проанализировать код и поэкспериментировать с ним, чтобы полностью разобраться во внутренней работе библиотеки.","type":"unstyled","key":"b0u7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Благодарим за внимание!","type":"unstyled","key":"e9cug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"c0iu5"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":81,"offset":0}],"inlineStyleRanges":[],"text":"5 Методов сохранения состояния в промежутках между перезагрузками страниц в React","type":"unordered-list-item","key":"fepmt"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":43,"offset":0}],"inlineStyleRanges":[],"text":"Создаем приложение React с нуля в 2021 году","type":"unordered-list-item","key":"9vfs3"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":32,"offset":0}],"inlineStyleRanges":[],"text":"Обзор техник кэширования в React","type":"unordered-list-item","key":"b4n1f"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":8,"offset":14},{"key":10,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"5hdlk"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":12,"offset":15},{"key":12,"length":43,"offset":29}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Hussain Arif: How To Make Better Queries With React Query","type":"unstyled","key":"chejs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5nosl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"cBhO5SLaJl3XnIktx0nU"}],"entityMap":{"11":{"data":{"href":"https://medium.com/@hussainarifkl","url":"https://medium.com/@hussainarifkl"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://betterprogramming.pub/how-to-make-better-queries-with-react-query-6543d02fb711","url":"https://betterprogramming.pub/how-to-make-better-queries-with-react-query-6543d02fb711"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/12337"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://formik.org/docs/overview","url":"https://formik.org/docs/overview"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://www.instantwebtools.net/fake-rest-api","url":"https://www.instantwebtools.net/fake-rest-api"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://www.instantwebtools.net/fake-rest-api","url":"https://www.instantwebtools.net/fake-rest-api"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://www.npmjs.com/package/axios","url":"https://www.npmjs.com/package/axios"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://github.com/HussainArif12/react-query-tutorial","url":"https://github.com/HussainArif12/react-query-tutorial"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://nuancesprog.ru/p/12306/","url":"https://nuancesprog.ru/p/12306/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://nuancesprog.ru/p/12200/","url":"https://nuancesprog.ru/p/12200/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/11916/","url":"https://nuancesprog.ru/p/11916/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}