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

Apollo GraphQL позволяет гибко работать с сетевыми запросами и выступает в роли самостоятельного стейт менеджера. В рамках видео мы разберем его использование с React, хотя Apollo может быть использован с любым frontend-приложением, в том числе и с ванильным.
Тайм-коды:
00:00 Об Apollo GraphQL
01:26 Тестовый graphql сервер
03:05 Зависимости
04:40 Apollo Client и Provider
07:38 GraphiQL Playground
09:00 gql и useQuery
13:53 Apollo DevTools
15:35 Повторное использование данных
17:40 useMutation
24:20 Рефетч данных после мутации
25:47 Обновление кэша
29:21 Мутации изменения и удаления
37:10 Альтернативное обновление кэша
41:07 Обзор проекта
Стартовый проект: github.com/michey85/apollo-qq...
Итоговый код: github.com/michey85/apollo-qq...
#graphql #apollo
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@user-tj8yn5tl2h]

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

[@d_r_robot]

Плюсую

[@notaddtry]

Поддерживаю

[@weynemeynen]

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

[@user-tj8yn5tl2h]

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

[@CJIu3eHb]

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

[@hidden_from_you]

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

[@1nightstarlight3]

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

[@sh0ny]

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

[@vladimirmuratov2220]

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

[@pashabezk]

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

[@dominskyi7857]

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

[@mr.zxzxzxz3816]

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

[@user-vm2db5cq1g]

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

[@Lazy1097]

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

[@vladtkachenko6822]

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

[@curillaenator]

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

[@user-bl4dl9ke7b]

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

[@user-vz9wh8dr7g]

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

[@eurorock5912]

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

[@MrQuest888]

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

[@alexalex4601]

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

[@mishanep]

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

[@Infrantos]

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

[@user-wz9qg9jw2v]

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

[@user-nk6ih7uh1h]

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

[@unknown.6914]

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

[@JS_Skyline]

Spasibo, kak vsegda polezno i po delu!!!

[@user-kn3ut1sh2o]

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

[@d_r_robot]

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

[@aleksandrmatyka3118]

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

[@user-bx7vw8yr3g]

Спасибо!

[@voodooshtv7883]

Если у вас 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); }, });

[@thehuman9604]

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

[@dmitri683]

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

[@Infinity-zf8ms]

Спасибо 🙏

[@darkside2436]

Nice content ☺️👍

[@user-kg9hu7oo3w]

Респект!

[@weynemeynen]

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

[@Ana-xi9xy]

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

[@pavelmelnik9952]

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

[@user-nl5jh8vi7g]

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

[@mishanep]

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

[@alexandersvirzhevsky6280]

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

[@SerhiiNesterov]

Спасибо

[@maxovsanyuk1033]

🔥🔥🔥

[@sdsd-ec8rw]

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

[@olegmaz3969]

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

[@evgeniyacherevko6633]

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

[@mishanep]

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

[@evgeniyacherevko6633]

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

[@olegmaz3969]

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.

[@lanneqdev193]

🥳

[@abubakrjuraev1816]

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

[@sotickwalker6776]

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

[@sotickwalker6776]

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

[@localhost666]

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

[@mishanep]

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

[@user-fc4iv9xv1j]

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

[@mishanep]

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

[@user-fc4iv9xv1j]

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

[@deriirostyslav2335]

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

[@jaki4695]

🐯

[@dmitriyyelovets3485]

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

[@mishanep]

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

[@iGotton]

+

[@baileysli6235]

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

[@Romul3003]

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