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

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

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

[@d_r_robot]

Плюсую

[@notaddtry]

Поддерживаю

[@weynemeynen]

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

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

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

[@CJIu3eHb]

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

[@pashabezk]

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

[@dominskyi7857]

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

[@sh0ny]

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

[@hidden_from_you]

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

[@mr.zxzxzxz3816]

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

[@1nightstarlight3]

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

[@Lazy1097]

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

[@aleksandrmatyka3118]

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

[@JS_Skyline]

Spasibo, kak vsegda polezno i po delu!!!

[@vladtkachenko6822]

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

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

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

[@curillaenator]

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

[@MrQuest888]

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

[@vladimirmuratov2220]

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

[@unknown.6914]

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

[@СтройС-я9о]

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

[@alexalex4601]

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

[@mishanep]

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

[@eurorock5912]

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

[@СергейПивонос-е5з]

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

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

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

[@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); }, });

[@ОлегПетров-п4у]

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

[@ЛусінеАтаджанян]

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

[@evgeniyacherevko6633]

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

[@mishanep]

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

[@evgeniyacherevko6633]

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

[@Infrantos]

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

[@sdsd-ec8rw]

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

[@weynemeynen]

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

[@darkside2436]

Nice content ☺️👍

[@Ana-xi9xy]

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

[@d_r_robot]

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

[@pavelmelnik9952]

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

[@thehuman9604]

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

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

Спасибо!

[@alexandersvirzhevsky6280]

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

[@SerhiiNesterov]

Спасибо

[@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.

[@abubakrjuraev1816]

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

[@localhost666]

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

[@mishanep]

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

[@maxovsanyuk1033]

🔥🔥🔥

[@sotickwalker6776]

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

[@sotickwalker6776]

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

[@deriirostyslav2335]

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

[@Александр-и9й6ъ]

Респект!

[@ДенисБельский-й9г]

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

[@mishanep]

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

[@dmitri683]

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

[@olegmaz3969]

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

[@jaki4695]

🐯

[@lanneqdev193]

🥳

[@EugeneChe-81]

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

[@mishanep]

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

[@EugeneChe-81]

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

[@dmitriyyelovets3485]

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

[@mishanep]

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

[@baileysli6235]

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

[@iGotton]

+

[@Romul3003]

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

[@leandrmiklashevich297]

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

[@Infinity-zf8ms]

Спасибо 🙏