React Query. Быстрый старт

Разбираем популярную библиотеку react-query - как получать и кэшировать данные, как использовать мутации и синхронизировать стейт между фронтендом и бэкендом.
Официальный сайт tanstack.com/query/latest
Код из видео github.com/michey85/rq-youtube
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@user-pi5ef7fp6f]

Михаил, планируете ли сделать набор видео по Next.Js 13 ?

[@alexanderkomanov4151]

Поддерживаю!

[@user-vm2db5cq1g]

Отличное видео, спасибо за труд Михаил!

[@mAx-qy4ji]

Добрый день Михаил, большое спасибо, очень полезное видео.

[@breadlinx]

Спасибо большое, жду с нетерпением продолжения!!!

[@severianca]

Супер, спасибо за примеры на практике

[@unknown.6914]

Спасибо за ваш труд Михаил!

[@mkonin]

И снова благодарен за интересно проведённое время... Также былоб очень приятно видеть в ветке репозитория - код из видео, в том виде, который он перед началом ролика.... Я просто смотря Ваши ролики, люблю тут же это всё сидеть и тыкать, для понимания того, о чём говорится... и когда есть какой то материал, обычно его приходится сидеть и перепечатывать..... (вариант взять из готового репозитория не канает ) там уже знаешь что будет и не интересно становится ))

[@user-bv8eq2vc5r]

Отличное видео, спасибо за труд!

[@DoSmth]

Спасибо, как раз то что нужно для учебы!

[@user-te1ut5ev8w]

благодарю за видео и крупный шрифт! глаза довольны)

[@user-mh9pe4zp6l]

Ого, только подумал об этой библиотеке, вот так тайминг! Лайк!

[@dimitirpopovich4394]

Спасибо, хорошая подача. Успехов !

[@ProgrammerFlunt]

Очень понятный и интересный видос, спасибо!

[@sergsergey4251]

Спасибо за отличные видео

[@MagicMightNew]

Очень хорошо. Спасибо большое!

[@user-pv5qw6gj2f]

Спасибо за видео было интересно!

[@Abilovv599]

Михаил вы благодарю за ролик

[@elmirweb3934]

Лучший! Летим!

[@TheKykp]

Очередное великолепие!

[@promoabys]

Классное ознакомительное видео

[@from_brest2631]

Как всегда чотко и мощно

[@awenn2015]

12:31 кайфовая штука, мне в корзине как раз пришлось эту проверку делать что бы на разных вкладках не перебивать данные на серваке, надо будет опробовать это дело

[@mykhaylolytvynov5369]

Чєл ти дуже круто все робиш! Я вважав що в 2022-2023 вже не здивувати, але ти робиш чудовий контент! Молодець! Так тримати!

[@d1mas1k2KA]

Было бы неплохо, снять видео про next js

[@victormog]

Спасибо! ... только о-о-очень кратко... 😉

[@romantereshkov7379]

Спасибо!

[@bronik04]

Ура!

[@suatyargc5738]

thankss ✌

[@cheesecheesson9842]

ура, тудушка!!!

[@studyingturtle2726]

можно пояснить с 18:15? Что значит оптимизация на уровне самого приложения? Вы сами прописали код (тогда покажите в репо, где это)) или это от Tanstack Query под копотом, и это можно настраивать?

[@abdurahmonvahobov8276]

👍👍👍

[@darkside2436]

Комментарий для продвижения видео

[@pepperonin]

Отличное видео! На 7:07 вылезает подсказка со всеми возвращаемыми значениями из хука и я. ни как не могу понять как эту подсказку вызвать! Подскажите плз!

[@user-ww3ux7rr6l]

хочу к тебе на курс)

[@rustamakhmetyanov4404]

Спасибо за разбор, вот бы с rtk такой же видос =)

[@mishanep]

Он есть на канале

[@DoSmth]

​@@mishanep Только начал погружение в тему React Query и RTK Query, насколько я понял это просто разные инструменты для взаимодействия с api, если говорить простыми словами?

[@potlovam]

@@DoSmth react query относится к tanstack, rtk query к redux toolkit

[@user-mb5og9zp4l]

​@@mishanepudemi запрет на оплату из России . Можно ли решить проблему ?

[@mishanep]

@@user-mb5og9zp4l нет. Но можно найти те же курсы на платформе Stepik. Ссылки на моем сайте.

[@user-gn1jl9sg8h]

Михаил здраствуйте, а где стартер файла ? C итоговым же тяжело будет работать

[@---Maksim---]

Запрос за данными не уходил после добавления новой тудушки из-за того, что мы уже заюзали setQueriesData, библиотека это "видит" и не делает новый запрос. Поэтому можно обойтись без инвалидации.

[@haibova_irisha]

привет , крутой видос ! не планируете ли вы снять про react query что-то более маштабное ?

[@mishanep]

Пока не планирую. Но всё может быть.

[@user-vq1xx2fw9g]

Видео клевое. Клавиатуру жалко)

[@FomichRoman]

Доброго дня, расскажите в чем отличия между rtk и react-query?

[@sumdy508]

RTK - это Redux Tool Kit, библиотека которая помогает хранить общий стейт только фронтенда, в свою очередь RQ, нужна для синхронизации бэка и фронта.

[@user-ml4ul2xk9l]

Здравствуйте Михаил. Спасибо вам за ваши видео. На русскоязычном контенте вы самый лучший из React программистов. Хотел бы узнать возможно ли добавить в db.json картинки хранящиеся в отдельной папке проекта?

[@mishanep]

Возможно. Вам понадобится указать конкретный путь до картинок. Причем не в папке scr, а в public (они туда могут и из src при сборке попасть, просто соберите приложение и посмотрите где оказались изображения).

[@MrKu39]

В чем преимущества использования данной библиотеки , если уже есть RTK-query, который отлично справляется с данным функционалом и имеет более лаконичный синтаксис? К тому же он работает из коробки RTK. За видео спасибо !

[@mishanep]

Не каждому проекту нужен redux. Потом react-query был эталоном для rtk query, когда они разрабатывали его. Сегодня react-query очень популярен и теперь доступен не только для react, но и для других фреймворков.

[@user-bi4ln9pg3i]

Спасибо это то что нужно, а что лучше rtk query или react query ?

[@mishanep]

У них есть таблица сравнений tanstack.com/query/latest/docs/react/comparison и ссылки на подобные таблицы конкурентов. Мне нравится, что rtk query имеет свою абстракцию для запросов. Но в целом react-query выглядит поудобнее. Но если на проекте уже используется Redux, то выбор будет очевидным в пользу rtk query.

[@user-bi4ln9pg3i]

@@mishanep спасибо

[@izzy7541]

@@mishanep Если на проекте используют redux, то брать rtk query будет странно. У него (rtk query) абсолютно та же мотивация что и у react-query - избавиться от стейт менеджера в пользу инвалидации данных с сервера. Я бы ни в коем случае не совмещал глобальный стейт и подобные *-query библиотеки. А по поводу что лучше, то react-query явный фаворит. Это и отсутствие зависимостей, фреймворк-агностик и проверенное годами апи. У них очень грандиозные планы по либам, пилят кучу всего полезного на чистом js, добавляя адапторы ко всем популярным фреймворкам. Использую react-query уже в 3ем проекте, всё круто

[@olegsh2888]

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

[@izzy7541]

@@olegsh2888 реакт квери умеет принимать initialData или ходить к бэку при рендере на сервере

[@olegsh2888]

Ух, Михаил, огонь!) так держать) Приятный инструмент, но вот поддержка браузерами что-то расстроила, не ожидал такой подставы…где же IE?))

[@mishanep]

IE для мазохистов)) Я думаю те, кто поддерживает его уже давно привык обмазываться полифиллами =)

[@ArtikMan1994]

Это глупо подключать для проекта реакт-квери + ртк-квери. Или нужно выбирать только одно? Потому что РТК-квери говорят больше для связки з редаксом. И если проект будет на РТК тулкит, то больше смысл добавлять РТК квери. Но многие утверждают что реакт-квери куда лучше, но он хуже будет с тулкитом. Дайте совет плз

[@mishanep]

Всё от задач зависит. Может статься, что вам одного react-query будет достаточно. Я бы с редаксом использовал их инструмент. А с react-query, когда нужен ещё и локальный стейт, брал бы zustand.

[@ArtikMan1994]

@@mishanep К такому же выводу пришел. Спасибо=)

[@NeoJohnSmit]

Михаил, как вы все помните ?

[@mishanep]

Вот записываю обучающие ролики и запоминаю :D

[@mango-milkshake]

Вопрос: что теперь делать с onError в `hooks/useTodosQuery`? Теперь это убрали из новой мажорной версии и непонятно, куда вставить toast-уведомления и где вообще обрабатывать ошибки ;(

[@stasstas206]

Миша, скажи, как это быть руским в 2023?

[@user-id4bw3tf5g]

Быть русским очень почетно

[@dmitriykarabasov1440]

Из "коробки" уже не работает - выдает "Cannot find module '@chakra-ui/react' or its corresponding type declarations". Лечится удалением и переустановкой @chakra-ui/react.🙂