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

Подписаться 53 тыс.

Просмотров 28 тыс.

50% 1

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

Наука

Опубликовано:

26 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 68

@dominskyi7857 Год назад

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

@vladimirmuratov2220 Год назад

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

@pashabezk Год назад

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

@1nightstarlight3 Год назад

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

@sh0ny Год назад

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

@hidden_from_you Год назад

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

@curillaenator Год назад

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

@vladtkachenko6822 Год назад

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

@mr.zxzxzxz3816 11 месяцев назад

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

@eurorock5912 Год назад

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

@Lazy1097 Год назад

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

@user-wz9qg9jw2v Год назад

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

@user-bl4dl9ke7b Год назад

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

@user-kn3ut1sh2o Год назад

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

@MrQuest888 Год назад

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

@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 выглядит универсальнее. А вот насколько он удобнее для запросов - это вопрос.

@user-vm2db5cq1g Год назад

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

@user-nk6ih7uh1h Год назад

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

@unknown.6914 2 месяца назад

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

@user-vz9wh8dr7g Год назад

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

@Infrantos Год назад

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

@JS_Skyline 2 месяца назад

Spasibo, kak vsegda polezno i po delu!!!

@d_r_robot Год назад

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

@voodooshtv7883 3 месяца назад

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

@alexalex4601 Год назад

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

@mishanep Год назад

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

@Ana-xi9xy Год назад

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

@aleksandrmatyka3118 Год назад

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

@darkside2436 Год назад

Nice content ☺️👍

@pavelmelnik9952 Год назад

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

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

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

@weynemeynen Год назад

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

@thehuman9604 Год назад

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

@Infinity-zf8ms 7 месяцев назад

Спасибо 🙏

@user-bx7vw8yr3g Год назад

Спасибо!

@user-kg9hu7oo3w Год назад

Респект!

@sdsd-ec8rw Год назад

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

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

🔥🔥🔥

@user-nl5jh8vi7g Год назад

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

@mishanep Год назад

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

@dmitri683 Год назад

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

@SerhiiNesterov Год назад

Спасибо

@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 Год назад

🥳

@olegmaz3969 Год назад

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

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

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

@sotickwalker6776 Год назад

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

@sotickwalker6776 Год назад

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

@jaki4695 24 дня назад

🐯

@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), что это такое? как с ним работать? как добавить, или достать, записать или вытянуть переменные из персист кеша? Заранее благодарю! Спасибо, Ростислав

@dmitriyyelovets3485 Год назад

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

@mishanep Год назад

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

@iGotton Год назад

@baileysli6235 Год назад

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