Клиент Apollo GraphQL для React-приложений

Поделиться
HTML-код
  • Опубликовано: 7 ноя 2024
  • НаукаНаука

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

  • @АлександрСкиталец-ц7р

    Интересно будет посмотреть graphql и redux toolkit в связке. А за видео большое спасибо.

    • @d_r_robot
      @d_r_robot 2 года назад

      Плюсую

    • @notaddtry
      @notaddtry 2 года назад

      Поддерживаю

    • @weynemeynen
      @weynemeynen 2 года назад +8

      ...а он, redux toolkit, там где apollo/graphql, по ходу и не нужен

    • @АлександрСкиталец-ц7р
      @АлександрСкиталец-ц7р 2 года назад +1

      @@weynemeynen у Apollo есть общий Стейт менеджер как у redux toolkit? Например тебе надо открывать модальное окно из разных компонентов. И Apollo это прежде всего это работа с запросами на примере rest только с помощью graphql и схем.

    • @CJIu3eHb
      @CJIu3eHb 2 года назад

      @@АлександрСкиталец-ц7р Еще есть вопрос сохранения данных на клиенте. Вроде есть некий "apollo-cache-persist", но что делать, если хранить нужно не только запросы, а еще что-нибудь. В этом случае redux toolkit выглядит универсальнее. А вот насколько он удобнее для запросов - это вопрос.

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

    Здравствуйте Михаил Непомнящий,
    Отличная подача, Спасибо за контент!
    Было бы здорово, если вы будите продолжать освещать данную тему по Apollo GraphQL, и к примеру объяснили темы концепции архитектуры "Apollo Client & Client-side Architecture", нюансы с кешированием, как правильно выполнять и настраивать пагинацию (особенно, когда индексы страниц могут сбиваться), и т.д. либо другие полезные темы. :)

  • @1nightstarlight3
    @1nightstarlight3 2 года назад +5

    Михаил, отличнейшая подача и материал. Очень актуально как всегда. Хотелось бы только видеть всё тоже самое, только на ts, вряд ли кто-то использует js сейчас.)

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

    Спасибо большое! Видео помогло разобраться с Apollo и GrapQL. Иду пробовать на практике!

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

    Огонь видео! Спасибо за подробное и четкое объяснение. только вот момент в конце с db.js хотелось бы разобрать подробнее

  • @dominskyi7857
    @dominskyi7857 2 года назад +1

    Велике дякую за інформацію і окрема вдячність за стартовий код на гітхабі. Просто суепр💻

  • @mr.zxzxzxz3816
    @mr.zxzxzxz3816 Год назад

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

  • @Lazy1097
    @Lazy1097 2 года назад +3

    Огромное спасибо, реально классный контент, надеюсь некс видео graphql и redux toolkit, было бы здорово

  • @alexalex4601
    @alexalex4601 2 года назад +11

    планируются ли еще видео на тему Apollo react? Например, пагинация, подписки. Тема запросов и мутаций раскрыта просто замечательно. Особенно порадовала правильная работа с кэшем. Не видел, чтобы кто-то так подробно показывал именно использование кэша в GraphQL. Так же и пагинацию, как мне кажется, нужно делать через кэш. Но подобных видео на ютубе я не встречал.

    • @mishanep
      @mishanep  2 года назад +6

      Рад что видео понравилось. Долго его готовил. Пока продолжение не планирую. Но за тематику спасибо.

  • @vladtkachenko6822
    @vladtkachenko6822 2 года назад +1

    не думал, что скажу когда-то, но лайк ещё до просмотра )

  • @curillaenator
    @curillaenator 2 года назад +2

    Спасибо! Отличнейшая подача материала! (Apollo GraphQL)

  • @СтройС-я9о
    @СтройС-я9о 2 года назад +4

    Как всегда лучший!

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

    Spasibo, kak vsegda polezno i po delu!!!

  • @ДмитроКравець-л2щ

    Спасибо больше, просто нет слов, одна благодарность!!!

  • @unknown.6914
    @unknown.6914 7 месяцев назад

    Полезный урок Михаил, спасибо.

  • @aleksandrmatyka3118
    @aleksandrmatyka3118 2 года назад +2

    Чтобы добить серию осталось только показать в связке с ts + codegen, ну и тесты)

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

    Спасибо, очень доходчиво объясняете, лайк, подписка.

  • @ОлегПетров-п4у
    @ОлегПетров-п4у 2 года назад +1

    Спасибо Михаил за полезный контент! (Apollo GraphQL)

  • @vladimirmuratov2220
    @vladimirmuratov2220 2 года назад +1

    Спасибо, Михаил. Очень доходчиво объясняете 😊

  • @eurorock5912
    @eurorock5912 2 года назад

    Михаил - спасибо! Нужная штука!) Будем посмотреть, так сказать!)

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

    Как всегда отличное видео! поддержу вопрос по поводу новых видео про подписки и пагинацию с использованием кэша, а также работу с TS. Спасибо!

  • @ЛусінеАтаджанян
    @ЛусінеАтаджанян 2 года назад +1

    Видео просто на высоте!

  • @СергейПивонос-е5з
    @СергейПивонос-е5з 2 года назад

    Спасибо за видео, хотелось бы увидеть эту тему с использованием ts типизацией.

  • @voodooshtv7883
    @voodooshtv7883 8 месяцев назад +1

    Если у вас readQuery возвращает null то прокиньте туда variables, которые вы прокидывали при изначальном запросе, например так:
    1) Получение всех публикаций пользователя
    const {
    loading,
    error,
    data: dataV,
    } = useQuery(GET_PUBLICATIONS, {
    variables: { userId },
    });
    2) Создание публикации
    const [addPublication, { data: dataT, loading: loadingT, error: errorT }] =
    useMutation(ADD_PUBLICATION, {
    update(cache: any, { data: { createPost } }: any) {
    const tes = cache.readQuery({
    query: GET_PUBLICATIONS,
    variables: { userId },
    });
    console.log(tes);
    },
    });

  • @Ana-xi9xy
    @Ana-xi9xy 2 года назад

    Жаль, два лайка поставить нельзя. Спасибо за видео!

  • @thehuman9604
    @thehuman9604 2 года назад +1

    Отлично, спасибо. Я за 2 часа разобрался с этими технологиями и уже применяю в проекте :) Хотелось бы еще уточнить, я вижу сходство некое с Редаксом. МОгу ли я частично или полностью заменить этими технологиями - Редакс?

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

    Я у вас проходила курс по ридаксу. Заюзала его до дыр и во всех технических заданиях uзала или redux или toolkit. Если бы вы еще сделали такой же классный курс с apollo клиент и сервер с разными примерами, то это было бы мега. Многие компании постепенно переходят с rest на graphql и не хватает достаточно контента

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

      Я сейчас работаю с Relay вместо Apollo. Пока над курсом не задумывался, но вижу что контента по нему совсем нет. Хотя инструмент крутой, да и поддерживается той же Meta, что и сам React разрабатывает.

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

      @@mishanep контент немного есть на англ, но для того, чтобы хорошо усвоить технологию всегда нужно попробовать разные апп. Мне дико понравился ваш старый и новый ридакс. Очень помогло все понять фундаментально.

  • @Infrantos
    @Infrantos 2 года назад

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

  • @alexandersvirzhevsky6280
    @alexandersvirzhevsky6280 11 месяцев назад

    лайк, подписка!

  • @d_r_robot
    @d_r_robot 2 года назад

    О, класс!!! Как раз по моему запросу)

  • @weynemeynen
    @weynemeynen 2 года назад

    Супер! Хотелось бы нырнуть глубже в apollo: subscriptions, testing...

  • @sdsd-ec8rw
    @sdsd-ec8rw 2 года назад

    а есть еще подписки. Было бы здорово, если бы на данном канале их разобрали. У автора хорошо получается

  • @pavelmelnik9952
    @pavelmelnik9952 2 года назад

    посмотрел вводный и Апполо, и захотелось проект переписать :)

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

    Nice content ☺️👍

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

    🔥🔥🔥

  • @ЖИЗНЬРУССКОГОИТАЙКИ

    Спасибо!

  • @Александр-и9й6ъ
    @Александр-и9й6ъ 2 года назад

    Респект!

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

    Спасибо

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

    Откуда на сервере взялся Graphiql, и каким образом сгенерировалась schema для туду? В начале же только был установлен пакет json-graphql-server и создан json файлик с данными. Т.е. этот пакет содержит в себе Graphiql? А схема сгенерена просто дефолтная? Ничего не понятно))

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

      Видео про фронтенд часть, поэтому настройки бэкенда второстепенны. Да, Graphiql идет из коробки json-graphql-server

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

    Хорошее видео. Но есть один нюанс.. Можете попробовать именно с изначальной ДБ поработать (где посты). При добавление поста - пост почему-то идет все равно в конец массива кеша + идет повторный запрос на сервер всех постов.... Был бы очень любезен если бы смогли ответить на данный вопрос почему так происходит

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

      Я разобрался - может быть кому поможет: При добавление полей - соблюдайте структуру данных которые вы получаете. То есть поле которое вы добавляете вы явно должны указать в мутации

  • @ДенисБельский-й9г
    @ДенисБельский-й9г 2 года назад

    Спасибо, как всегда интересно и полезно. Обратил внимание, что при загрузке(ожидании) показываете компонент-спиннер, а вы не реализовывали скелетон (самостоятельно или при помощи библиотеки)? Очень много где сейчас на сайтах используют. С удовольствием бы посмотрел реализацию скелетона в вашем проекте.

    • @mishanep
      @mishanep  2 года назад

      Во многих библиотеках компонентов сейчас предлагаются скелетоны. И в Material UI были и в Chakra и в Ant.Design.

  • @olegmaz3969
    @olegmaz3969 2 года назад

    But we see the fact that when updating the cache, we added a newTodo to the beginning of the array, but it still appears at the end of the cache. This can be seen if you update it again or in Apolo Client Devtools.

  • @jaki4695
    @jaki4695 5 месяцев назад

    🐯

  • @dmitri683
    @dmitri683 2 года назад

    Михаил спасибо за видео! Есть один вопрос, могу ли я использовать результат мутации в вышестоящем компоненте, как например в RTK Query с помощью флага fixed_cache_key для мутаций? Например, у меня есть компонент в котором по очереди показываются две формы, мои действия:
    - Успешно прохожу первую форму с помощью мутации
    - Хочу отследить результат мутации в родительском компоненте, чтобы отрендерить следующую форму
    - поле data от мутации не изменяется в родительском компоненте и форма не переключается

  • @lanneqdev193
    @lanneqdev193 2 года назад

    🥳

  • @abubakrjuraev1816
    @abubakrjuraev1816 11 месяцев назад

    Привет. Хотелось увидеть работу с fragments спасибо

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

    мне очень было полезно.
    Михаил, добрый день, расскажите пожалуйста подробно как работать с Аполло-Персист-Кеш!
    persistCache({
    cache,
    storage: new LocalStorageWrapper(window.localStorage),
    });
    Как добавлять и удалять элементы в локал стор, а потом через @client в кеш и вызывать это у локального qgl запроса пример.
    Но самое интересное! Аполло-Сторедж.
    storage: new LocalStorageWrapper(window.localStorage), что это такое? как с ним работать? как добавить, или достать, записать или вытянуть переменные из персист кеша?
    Заранее благодарю!
    Спасибо, Ростислав

  • @olegmaz3969
    @olegmaz3969 2 года назад

    Очень полезная информация. Если работать с Next.js и нужно делать запрос со стороны backend и со стороны frontend. Использовал обычный fetch, так как Next.js поддерживает fetch на стороне backend. А как тогда использовать Apollo так, чтобы на стороне backend и frontend делать запрос?

  • @EugeneChe-81
    @EugeneChe-81 2 года назад

    Добрый день. Михаил, а как насчёт SuperGraph? Есть опыт, которым можете поделиться? Очень ценная была бы информация!

    • @mishanep
      @mishanep  2 года назад

      Приветствую, Евгений.
      Никогда про него не слышал =)

    • @EugeneChe-81
      @EugeneChe-81 2 года назад

      @@mishanep www.apollographql.com/blog/announcement/backend/the-supergraph-a-new-way-to-think-about-graphql/

  • @dmitriyyelovets3485
    @dmitriyyelovets3485 2 года назад

    После удаления элементов, изменения в кэше в аполло дев тулз появляются только после обновления страницы. В чём причина?

    • @mishanep
      @mishanep  2 года назад +1

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

  • @iGotton
    @iGotton 2 года назад

    +

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

    Почему вы делаете кэллбек инпута на Enter?
    Просто подпишитесь на submit формы, а submit по Enter браузер делает самостоятельно.
    Походу HTML самый сложный язык для JS разработчиков :)

  • @Romul3003
    @Romul3003 4 месяца назад

    180 пример с тудушками... поднадоело. Как не зайдешь на какой-то видос посмотреть к Михаилу, обязательно тудушки. Михаил, будь немного уже пооригенальней, чтоли

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

    onKeyPress зачёркивает.
    Пишет предупреждение:
    'onKeyPress' is deprecated.ts(6385)
    index.d.ts(2431, 13): The declaration was marked as deprecated here.

  • @Infinity-zf8ms
    @Infinity-zf8ms Год назад

    Спасибо 🙏