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

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

Комментарии • 79

  • @Chunl3e666
    @Chunl3e666 Год назад +96

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

  • @mkonin
    @mkonin Год назад +6

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

  • @hrustalevdev
    @hrustalevdev 2 месяца назад

    Спасибо! Очень доходчиво!!

  • @unknown.6914
    @unknown.6914 8 месяцев назад +1

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

  • @mAx-qy4ji
    @mAx-qy4ji Год назад +1

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

  • @mykhaylolytvynov5369
    @mykhaylolytvynov5369 Год назад +2

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

  • @breadlinx
    @breadlinx Год назад +1

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

  • @АнатолийГорбов-о1ь

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

  • @АлексейСтупников-д4у
    @АлексейСтупников-д4у 11 месяцев назад

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

  • @ВикторБогатырёв-у5ф

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

  • @arenda34familiya
    @arenda34familiya 6 месяцев назад

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

  • @victormog
    @victormog Год назад +2

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

  • @ГусяНоздреватая

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

  • @AleksandrNeo
    @AleksandrNeo Год назад

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

  • @MagicMightNew
    @MagicMightNew 10 месяцев назад

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

  • @dimitirpopovich4394
    @dimitirpopovich4394 Год назад

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

  • @Abilovv599
    @Abilovv599 Год назад

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

  • @sergsergey4251
    @sergsergey4251 Год назад

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

  • @d1mas1k2KA
    @d1mas1k2KA Год назад +5

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

  • @promoabys
    @promoabys Год назад

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

  • @elmirweb3934
    @elmirweb3934 Год назад

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

  • @awenn2015
    @awenn2015 Год назад

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

  • @TheKykp
    @TheKykp Год назад

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

  • @from_brest2631
    @from_brest2631 Год назад

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

  • @FomichRoman
    @FomichRoman Год назад +5

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

    • @sumdy508
      @sumdy508 Год назад

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

  • @VasiliyAlexsandrovich
    @VasiliyAlexsandrovich 3 месяца назад

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

    • @mishanep
      @mishanep  3 месяца назад

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

  • @romantereshkov7379
    @romantereshkov7379 Год назад

    Спасибо!

  • @darkside2436
    @darkside2436 Год назад

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

  • @rustamakhmetyanov4404
    @rustamakhmetyanov4404 Год назад

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

    • @mishanep
      @mishanep  Год назад

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

    • @AleksandrNeo
      @AleksandrNeo Год назад

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

    • @artpotlov
      @artpotlov Год назад +1

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

    • @СеменСеменов-щ3е
      @СеменСеменов-щ3е Год назад

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

    • @mishanep
      @mishanep  Год назад

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

  • @suatyargc5738
    @suatyargc5738 Год назад

    thankss ✌

  • @cheesecheesson9842
    @cheesecheesson9842 Год назад

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

  • @bronik04
    @bronik04 Год назад

    Ура!

  • @studyingturtle2726
    @studyingturtle2726 Год назад

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

  • @Aleksei-r4r
    @Aleksei-r4r Год назад

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

  • @olegsh2888
    @olegsh2888 Год назад

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

    • @mishanep
      @mishanep  Год назад +3

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

  • @ИззатТурсунов
    @ИззатТурсунов 9 месяцев назад

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

  • @pepperonin
    @pepperonin Год назад

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

  • @ArtikMan1994
    @ArtikMan1994 Год назад +1

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

    • @mishanep
      @mishanep  Год назад +2

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

    • @ArtikMan1994
      @ArtikMan1994 Год назад

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

  • @Евгений-х7п9с
    @Евгений-х7п9с Год назад

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

  • @abdurahmonvahobov8276
    @abdurahmonvahobov8276 Год назад

    👍👍👍

  • @haibova_irisha
    @haibova_irisha Год назад

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

    • @mishanep
      @mishanep  Год назад +1

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

  • @MrKu39
    @MrKu39 Год назад

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

    • @mishanep
      @mishanep  Год назад +6

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

  • @---Maksim---
    @---Maksim--- Год назад

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

  • @Диман-е9ш
    @Диман-е9ш Год назад

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

    • @mishanep
      @mishanep  Год назад +6

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

    • @Диман-е9ш
      @Диман-е9ш Год назад +1

      @@mishanep спасибо

    • @izzy7541
      @izzy7541 Год назад +4

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

    • @olegsh2888
      @olegsh2888 Год назад

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

    • @izzy7541
      @izzy7541 Год назад

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

  • @NeoJohnSmit
    @NeoJohnSmit Год назад

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

    • @mishanep
      @mishanep  Год назад

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

  • @mango-milkshake
    @mango-milkshake 9 месяцев назад +1

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

  • @stasstas206
    @stasstas206 Год назад +1

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

  • @severianca
    @severianca 3 месяца назад

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

  • @ProgrammerFlunt
    @ProgrammerFlunt Год назад

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

  • @dmitriykarabasov1440
    @dmitriykarabasov1440 Год назад

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