GraphQL для фронтенд разработчиков

  Рет қаралды 44,909

Михаил Непомнящий

Михаил Непомнящий

Күн бұрын

GraphQL представляет собой современный способ взаимодействия фронтенда с бэкендом, уменьшающий количество запросов к серверу и делая ответ более конкретным - JSON содержит только те данные, которые необходимо.
Код из видео: codesandbox.io/s/graphql-clie...
00:00 Введение
00:37 Что такое GraphQL
06:16 GraphQL playground
20:25 Демо приложения
21:28 fetch запрос за GraphQL
24:10 Query запрос на получение данных
26:07 Mutation на добавление данных
29:36 Query c поиском
31:14 Mutation на изменение и удаление
34:40 Итоги
#graphql
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 66
@enot84js
@enot84js 23 күн бұрын
Спасибо Вам огромное за хорошо подготовленный материал и понятное объяснение! Успехов!
@stern2936
@stern2936 2 жыл бұрын
один из лучших учителей что я видел, объясняет максимально доходчиво и разжевано
@alexeizuzin
@alexeizuzin Жыл бұрын
Спасибо что показываете только что надо, отбрасывая лишнее. Некоторые авторы уроков: "Сегодня мы изучим тег button. Вначале установим докер..."
@d_r_robot
@d_r_robot 2 жыл бұрын
Так не хватало этого! Спасибо!!! Было бы очень хорошо, если бы это было ещё и про React js.
@SergiyAntonyuk_PhD
@SergiyAntonyuk_PhD Жыл бұрын
Видио Михаила - отличный обучающий материал. Пересматриваю некоторые из них, когда что-то нужно освежить в памяти. Огромное спасибо автору за труд.
@zeevnadiv8778
@zeevnadiv8778 11 күн бұрын
благодарю тебя, дружище!
@alexstepanchhuk683
@alexstepanchhuk683 Жыл бұрын
Это очень круто! Объяснено всё супер-доходчиво и без лишней воды. Особенно круто, что начали с простого использования, а не как все с построения своего graphql сервера.
@aksenovkirill5191
@aksenovkirill5191 2 жыл бұрын
Михаил! Вы очень крутой Преподаватель!спасибо за ваши труды! Я уже джун, нашедший первую работу, но ознакомившись с вашим каналом и курсами - принял решение купить ваши курсы по нативному js, react и redux!
@Sylar7773
@Sylar7773 2 жыл бұрын
Мне нереально помогли Ваши уроки, ОГРОМНОЕ спасибо
@user-on5pe6ol1y
@user-on5pe6ol1y 2 жыл бұрын
Согласен ) видео по createAsyncThunk меня просто спасло! Качать гения! Теперь смотрю все видосики для общего развития)
@user-kn3ut1sh2o
@user-kn3ut1sh2o 2 жыл бұрын
Спасибо Михаил, доступно и понятно! (GraphQL для фронтенд разработчиков)
@user-fc4iv9xv1j
@user-fc4iv9xv1j 2 жыл бұрын
Я очень надеюсь на серию видео по графу. Буквально вчера решил таки освоить тему. Михаил очень доходчиво всё рассказывает.
@NetrodgeN
@NetrodgeN 2 жыл бұрын
Лайк не глядя, спасибо за контент
@TigerUnderMoon
@TigerUnderMoon 2 жыл бұрын
Огонь, спасибо большое !!!
@yaropolkvass6131
@yaropolkvass6131 11 ай бұрын
Огромное спасибо за материал! Невероятно просто и понятно) И отдельное спасибо за код из ролика!!! Лайк + подписка
@from_brest2631
@from_brest2631 2 жыл бұрын
Круто, как обычно 👍
@vladimir5434
@vladimir5434 9 ай бұрын
Обьяснение как всегда - на высоте! Михаил, ты отличный учитель, у тебя определенно в этом талант!)
@BlueCell
@BlueCell Жыл бұрын
Очень недооценённый канал по количеству подписчиков и просмотров. Огромное спасибо!
@unknown.6914
@unknown.6914 2 ай бұрын
Спасибо за урок Михаил
@vladimirmuratov2220
@vladimirmuratov2220 2 жыл бұрын
Михаил, спасибо. Вы как всегда на высоте!!! 😊 Просьба: не могли бы вы осветить тему "алгоритмы и структуры данных". Это очень часто спрашивают на собеседовании
@user-vl5hi1ub4e
@user-vl5hi1ub4e 4 ай бұрын
Отличное видео, спасибо🥰
@turbofilmes
@turbofilmes 2 жыл бұрын
Я ждал этого🤤
@RBBoxing
@RBBoxing Жыл бұрын
Благодарю Михаил GraphQL стал понятнее для меня
@user-gm7tj8wh9n
@user-gm7tj8wh9n 9 ай бұрын
Спасибо, классное видео)
@alexeyberezin5011
@alexeyberezin5011 2 жыл бұрын
Хотелось бы еще увидеть видео GraphQL для бэкенд разработчиков
@user-tz6ug2eo8j
@user-tz6ug2eo8j 3 ай бұрын
Спасибо огромное
@user-tj8yn5tl2h
@user-tj8yn5tl2h 2 жыл бұрын
Спасибо за урок был очень познавательный. Хорошо если был бы урок на нативном js. С использованием подписок (subscribe) в graphql.
@vladyslavkravchenko5955
@vladyslavkravchenko5955 Жыл бұрын
огромное спасибо
@SerhiiNesterov
@SerhiiNesterov Жыл бұрын
Спасибо
@sergei_sergeevu4
@sergei_sergeevu4 2 жыл бұрын
Спасибо вам за видео. Если у вас будет возможность снять видео про работу с React + Apollo, круто было бы если вы показали как работать с кешем.
@user-tj8yn5tl2h
@user-tj8yn5tl2h 2 жыл бұрын
Всё просто. Интереснее было бы посмотреть rtk вместе с graphql
@alsua1297
@alsua1297 5 ай бұрын
спасибо
@iGotton
@iGotton 2 жыл бұрын
Осталось убедить бекендера, чтобы он это все описал на серве. Делать этого конечно же он не будет..
@kinafermur
@kinafermur 2 жыл бұрын
Было бы интересно посмотреть как создается чат, с комнатами, снимите пожалуйста такой контент
@dmitry2095
@dmitry2095 Жыл бұрын
Видео понравилось. Но как реализуются сложные запросы, проверка и защита данных, милдверы?
@awenn2015
@awenn2015 Жыл бұрын
Тяжеловато на запросы смотреть с мелким шрифтом, по итогу просто слушаешь потому что ничего не видно))
@victormog
@victormog 2 жыл бұрын
Огромное спасибо! P.S. может подскажите, чем MongoDB сервис можно заменить сегодня для разработчика (хотя бы для тестирования)?
@mishanep
@mishanep 2 жыл бұрын
Не изучал эту тему. В моем случае вопрос о замене монги не стоит. В зависимости от задач можно попробовать поиграться с тем что firebase предлагает, либо aws dynamoDB.
@victormog
@victormog 2 жыл бұрын
@@mishanep Видимо, Вы не поняли - я о замене сервисов, заблокировавших доступ к своим ресурсам. Я понимаю, что Вам сейчас не актуально, но может ещё кто подскажет...
@mishanep
@mishanep 2 жыл бұрын
@@victormog и я о том же) я даже не знаю какие сервисы сейчас заблокированы.
@victormog
@victormog 2 жыл бұрын
@@mishanep ☹️
@emilgerz
@emilgerz 7 ай бұрын
Урок супер. Не совсем понимаю прикол с переменными, зачем они нужны когда есть интерполяция в js?
@ITentrepreneur
@ITentrepreneur Жыл бұрын
Слишком мелкий шрифт, со зрением -1 испытывал трудности при ознакомлении
@surok143
@surok143 Жыл бұрын
Сортировку попробовал, так и не понял почему у меня не сортируется. Потом увидел что у Вас тоже на видео не сортируется, наверно у API какая-то проблема. А так видео шикарное, спасибо.
@nikolaifedorov685
@nikolaifedorov685 Жыл бұрын
Всё проще - у api нет проблем, автор в примере не задал поле по которому нужно сортировать! Например вот так: "sort": { "field": "title", "order": "ASC" }
@weynemeynen
@weynemeynen 2 жыл бұрын
Почему в этот раз todos не на любимом React? Это для следующего видео!
@vladimirrezvanov8276
@vladimirrezvanov8276 2 жыл бұрын
А будет видео по react query?
@mishanep
@mishanep 2 жыл бұрын
Со временем думаю и по нему будет
@muborizDev
@muborizDev 5 ай бұрын
я одно не понял, откуда тут готовые методы появились (схемы или как их там, updateTodo, createTodo )? Эти схемы не бекенде создаются или на фронте ?
@mishanep
@mishanep 5 ай бұрын
На бэкенде. На фронте мы используем GraphQL сервис.
@user-ge2qk4cm1j
@user-ge2qk4cm1j Жыл бұрын
+
@galandec2000
@galandec2000 Жыл бұрын
чуть поправлю, а то кого на собесе так завалит ваше определение - "что такое GraphQL,". нет, GraphQL вообще ни какого отношения к SQL даже близко не имеет! GraphQL - это стандарт по которому вы можете выстраивать свое общение между приложениями. это скорее замена RestAPI, даже не замена, ибо и это будет не совсем верно. Это дополнение к RestAPI которое расширяет возможности Rest. реализация на разных языках, это не GraphQL, это уже решение которое реализовали по, условно, стандарту GraphQL. вот так более близко к правде. GraphQL, это пример того как можно было бы реализовать общение между приложениями, а не язык запросов и тд..)) его изобрели ибо были проблемы с мобильным приложением, приходило слишком много данных и надо было как-то их ограничить, убрать лишнее. вот тогда и придумали стандарт GraphQL который помог расширить стандартное RestAPI и сужать данные там где оно надо. с уважением!
@nikolaifedorov685
@nikolaifedorov685 Жыл бұрын
Это не единственный косяк автора. Он ещё не понял, что для сортировки, нужно указывать поле по которому хочет получить сортировку - и решил, что в api реализована сортировка по умолчанию.
@samurai5410
@samurai5410 2 жыл бұрын
Добрый день, Михаил! Немного не по теме видео вопрос, но т.к. оно сейчас самое актуальное, задам здесь Искал у вас на канале, но так и не нашёл видео по веб сокетам, не планируете ли вы выпустить видео по ним?
@mishanep
@mishanep 2 жыл бұрын
Приветствую! В ближайших планах не было. Но столько людей про сокеты спрашивает, что видать не отвертеться)))
@vvg1077
@vvg1077 2 жыл бұрын
Apollo next?
@many_men
@many_men Жыл бұрын
Добрый день! Такой вопрос: я джуниор фронтенд разработчик. Мне дали задание сделать фильтрацию данных. Получается на бэке они подняли это и мне надо сделать так чтоб при клике или вводе в инпут данных приходили данные совподающие с тем что ввел пользователь. И реализовать это все с помощью query. А вопрос в том уровень ли это джуниора? Потому что у меня даже идеи нет как это сделать
@mishanep
@mishanep Жыл бұрын
В graphql playground должна быть схема доступных действий над данными, включая фильтрацию, если она есть. Вам нужно сначала в плейграунде добиться желаемого результата, потом можно смело на фронтенде внедрять полученный query. Касаемо уровня задания для разработчика - здесь в каждой компании свои требования. Если на проекте используется GraphQL, вероятно, от разработчиков любого уровня будут ожидать соответствующие знания или же рвение к их изучению. Задавайте вопросы коллегам, не стесняйтесь.
@techno7761
@techno7761 Ай бұрын
Братан, ты что, колхозник? Ну какое на хрен "АПИ"?
@kirillguryanov4925
@kirillguryanov4925 10 ай бұрын
в следующий раз покрупнее бы код сделать хорошо было
@user-wc9kq3mi4o
@user-wc9kq3mi4o 9 ай бұрын
А что есть GraphQL для серверной разработки?
@mishanep
@mishanep 9 ай бұрын
Есть серверная часть, когда надо писать резолверы. По сути, промежуточная между базой данных и фронтендом. Хотя нередко эту работу тоже делают фронты =)
@user-wc9kq3mi4o
@user-wc9kq3mi4o 9 ай бұрын
@@mishanep Спасибо за оперативный ответ! Скажите пожалуйста, я немного запутался. 1) Есть библиотека Apollo. Как я понял, именно она подразделяется на клиентскую и серверную часть. Можете кратко, в двух словах расписать, за что отвечает клиентская, а за что серверная. 2) Если использовать Apollo, значит ли это что не нужно развёртывать сервер на nodejs или на express? 3) На чём создаются API? Можно их создавать на node, express. А можно ли на Apollo 4) Не совсем понятно зачем создавать API если используешь GraphQL. Он же может напрямую работать с файлом json, который будет лежать на сервере... Очень прошу разъяснить!
@mishanep
@mishanep 9 ай бұрын
Ох. Здесь всё может быть как очень просто, так и чертовски запутанно. Например, если у вас есть сайт на WordPress и вы хотите использовать его как бэкенд, и написать свой фронтенд на Реакте, то серверный GraphQL решится путем установки плагина (к слову, Apollo - не единственный вариант, и это фреймворк, в простых случаях можно и без него). А могут быть сложные кейсы, как в моем случае))) У нас есть бэкенд, который по API отдает данные, а есть прослойка на NodeJS, которая, грубо говоря, трансформирует REST API в Graphql. Собственно, сервер обыкновенно требуется, это не обязательно NodeJS. Express при этом не обязателен. Серверная часть отвечает за подготовку данных (получать она их может как напрямую через базу данных, так и через посредников, вроде REST API), а клиентская за конкретные запросы с уточнением, что именно требуется получить для последующей логики в браузере.
Клиент Apollo GraphQL для React-приложений
44:11
Михаил Непомнящий
Рет қаралды 27 М.
Redux не нужен. GraphQL и Apollo Client.
27:48
knowcity
Рет қаралды 51 М.
Osman Kalyoncu Sonu Üzücü Saddest Videos Dream Engine 170 #shorts
00:27
Was ist im Eis versteckt? 🧊 Coole Winter-Gadgets von Amazon
00:37
SMOL German
Рет қаралды 25 МЛН
Каха ограбил банк
01:00
К-Media
Рет қаралды 10 МЛН
small vs big hoop #tiktok
00:12
Анастасия Тарасова
Рет қаралды 26 МЛН
Загрузка файлов с фронтенда
18:49
Михаил Непомнящий
Рет қаралды 49 М.
Все о GraphQL за 30 минут
35:26
Веб-разработка - DevMagazine
Рет қаралды 63 М.
Чем заменить Axios в 2023-м
17:12
Михаил Непомнящий
Рет қаралды 33 М.
Первые шаги в GraphQL API для тестировщиков
43:18
SQA ANALYST TECHWRITER DAYS
Рет қаралды 557
Чем и зачем заменить Postman в 2024-м
13:21
Михаил Непомнящий
Рет қаралды 30 М.
Osman Kalyoncu Sonu Üzücü Saddest Videos Dream Engine 170 #shorts
00:27