Тёмный

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

Михаил Непомнящий
Подписаться 52 тыс.
Просмотров 44 тыс.
50% 1

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

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

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 65   
@enot84js
@enot84js 10 дней назад
Спасибо Вам огромное за хорошо подготовленный материал и понятное объяснение! Успехов!
@stern2936
@stern2936 2 года назад
один из лучших учителей что я видел, объясняет максимально доходчиво и разжевано
@SergiyAntonyuk_PhD
@SergiyAntonyuk_PhD 11 месяцев назад
Видио Михаила - отличный обучающий материал. Пересматриваю некоторые из них, когда что-то нужно освежить в памяти. Огромное спасибо автору за труд.
@d_r_robot
@d_r_robot 2 года назад
Так не хватало этого! Спасибо!!! Было бы очень хорошо, если бы это было ещё и про React js.
@user-fc4iv9xv1j
@user-fc4iv9xv1j 2 года назад
Я очень надеюсь на серию видео по графу. Буквально вчера решил таки освоить тему. Михаил очень доходчиво всё рассказывает.
@aksenovkirill5191
@aksenovkirill5191 2 года назад
Михаил! Вы очень крутой Преподаватель!спасибо за ваши труды! Я уже джун, нашедший первую работу, но ознакомившись с вашим каналом и курсами - принял решение купить ваши курсы по нативному js, react и redux!
@alexstepanchhuk683
@alexstepanchhuk683 Год назад
Это очень круто! Объяснено всё супер-доходчиво и без лишней воды. Особенно круто, что начали с простого использования, а не как все с построения своего graphql сервера.
@Sylar7773
@Sylar7773 2 года назад
Мне нереально помогли Ваши уроки, ОГРОМНОЕ спасибо
@user-on5pe6ol1y
@user-on5pe6ol1y 2 года назад
Согласен ) видео по createAsyncThunk меня просто спасло! Качать гения! Теперь смотрю все видосики для общего развития)
@alexeizuzin
@alexeizuzin Год назад
Спасибо что показываете только что надо, отбрасывая лишнее. Некоторые авторы уроков: "Сегодня мы изучим тег button. Вначале установим докер..."
@user-kn3ut1sh2o
@user-kn3ut1sh2o Год назад
Спасибо Михаил, доступно и понятно! (GraphQL для фронтенд разработчиков)
@NetrodgeN
@NetrodgeN 2 года назад
Лайк не глядя, спасибо за контент
@vladimir5434
@vladimir5434 9 месяцев назад
Обьяснение как всегда - на высоте! Михаил, ты отличный учитель, у тебя определенно в этом талант!)
@yaropolkvass6131
@yaropolkvass6131 11 месяцев назад
Огромное спасибо за материал! Невероятно просто и понятно) И отдельное спасибо за код из ролика!!! Лайк + подписка
@mishashmidt0
@mishashmidt0 2 года назад
Огонь, спасибо большое !!!
@BlueCell
@BlueCell Год назад
Очень недооценённый канал по количеству подписчиков и просмотров. Огромное спасибо!
@vladimirmuratov2220
@vladimirmuratov2220 Год назад
Михаил, спасибо. Вы как всегда на высоте!!! 😊 Просьба: не могли бы вы осветить тему "алгоритмы и структуры данных". Это очень часто спрашивают на собеседовании
@from_brest2631
@from_brest2631 2 года назад
Круто, как обычно 👍
@unknown.6914
@unknown.6914 2 месяца назад
Спасибо за урок Михаил
@RBBoxing
@RBBoxing Год назад
Благодарю Михаил GraphQL стал понятнее для меня
@user-vl5hi1ub4e
@user-vl5hi1ub4e 4 месяца назад
Отличное видео, спасибо🥰
@turbofilmes
@turbofilmes 2 года назад
Я ждал этого🤤
@user-gm7tj8wh9n
@user-gm7tj8wh9n 9 месяцев назад
Спасибо, классное видео)
@alexeyberezin5011
@alexeyberezin5011 2 года назад
Хотелось бы еще увидеть видео GraphQL для бэкенд разработчиков
@user-tj8yn5tl2h
@user-tj8yn5tl2h Год назад
Спасибо за урок был очень познавательный. Хорошо если был бы урок на нативном js. С использованием подписок (subscribe) в graphql.
@user-tz6ug2eo8j
@user-tz6ug2eo8j 2 месяца назад
Спасибо огромное
@sergei_sergeevu4
@sergei_sergeevu4 2 года назад
Спасибо вам за видео. Если у вас будет возможность снять видео про работу с React + Apollo, круто было бы если вы показали как работать с кешем.
@user-tj8yn5tl2h
@user-tj8yn5tl2h 2 года назад
Всё просто. Интереснее было бы посмотреть rtk вместе с graphql
@vladyslavkravchenko5955
@vladyslavkravchenko5955 Год назад
огромное спасибо
@SerhiiNesterov
@SerhiiNesterov Год назад
Спасибо
@alsua1297
@alsua1297 4 месяца назад
спасибо
@iGotton
@iGotton Год назад
Осталось убедить бекендера, чтобы он это все описал на серве. Делать этого конечно же он не будет..
@dmitry2095
@dmitry2095 Год назад
Видео понравилось. Но как реализуются сложные запросы, проверка и защита данных, милдверы?
@kinafermur
@kinafermur Год назад
Было бы интересно посмотреть как создается чат, с комнатами, снимите пожалуйста такой контент
@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?
@surok143
@surok143 Год назад
Сортировку попробовал, так и не понял почему у меня не сортируется. Потом увидел что у Вас тоже на видео не сортируется, наверно у API какая-то проблема. А так видео шикарное, спасибо.
@nikolaifedorov685
@nikolaifedorov685 11 месяцев назад
Всё проще - у api нет проблем, автор в примере не задал поле по которому нужно сортировать! Например вот так: "sort": { "field": "title", "order": "ASC" }
@vladimirrezvanov8276
@vladimirrezvanov8276 2 года назад
А будет видео по react query?
@mishanep
@mishanep 2 года назад
Со временем думаю и по нему будет
@ITentrepreneur
@ITentrepreneur Год назад
Слишком мелкий шрифт, со зрением -1 испытывал трудности при ознакомлении
@muborizDev
@muborizDev 5 месяцев назад
я одно не понял, откуда тут готовые методы появились (схемы или как их там, updateTodo, createTodo )? Эти схемы не бекенде создаются или на фронте ?
@mishanep
@mishanep 5 месяцев назад
На бэкенде. На фронте мы используем GraphQL сервис.
@samurai5410
@samurai5410 Год назад
Добрый день, Михаил! Немного не по теме видео вопрос, но т.к. оно сейчас самое актуальное, задам здесь Искал у вас на канале, но так и не нашёл видео по веб сокетам, не планируете ли вы выпустить видео по ним?
@mishanep
@mishanep Год назад
Приветствую! В ближайших планах не было. Но столько людей про сокеты спрашивает, что видать не отвертеться)))
@weynemeynen
@weynemeynen 2 года назад
Почему в этот раз todos не на любимом React? Это для следующего видео!
@many_men
@many_men Год назад
Добрый день! Такой вопрос: я джуниор фронтенд разработчик. Мне дали задание сделать фильтрацию данных. Получается на бэке они подняли это и мне надо сделать так чтоб при клике или вводе в инпут данных приходили данные совподающие с тем что ввел пользователь. И реализовать это все с помощью query. А вопрос в том уровень ли это джуниора? Потому что у меня даже идеи нет как это сделать
@mishanep
@mishanep Год назад
В graphql playground должна быть схема доступных действий над данными, включая фильтрацию, если она есть. Вам нужно сначала в плейграунде добиться желаемого результата, потом можно смело на фронтенде внедрять полученный query. Касаемо уровня задания для разработчика - здесь в каждой компании свои требования. Если на проекте используется GraphQL, вероятно, от разработчиков любого уровня будут ожидать соответствующие знания или же рвение к их изучению. Задавайте вопросы коллегам, не стесняйтесь.
@awenn2015
@awenn2015 Год назад
Тяжеловато на запросы смотреть с мелким шрифтом, по итогу просто слушаешь потому что ничего не видно))
@user-ge2qk4cm1j
@user-ge2qk4cm1j Год назад
+
@vvg1077
@vvg1077 Год назад
Apollo next?
@galandec2000
@galandec2000 Год назад
чуть поправлю, а то кого на собесе так завалит ваше определение - "что такое GraphQL,". нет, GraphQL вообще ни какого отношения к SQL даже близко не имеет! GraphQL - это стандарт по которому вы можете выстраивать свое общение между приложениями. это скорее замена RestAPI, даже не замена, ибо и это будет не совсем верно. Это дополнение к RestAPI которое расширяет возможности Rest. реализация на разных языках, это не GraphQL, это уже решение которое реализовали по, условно, стандарту GraphQL. вот так более близко к правде. GraphQL, это пример того как можно было бы реализовать общение между приложениями, а не язык запросов и тд..)) его изобрели ибо были проблемы с мобильным приложением, приходило слишком много данных и надо было как-то их ограничить, убрать лишнее. вот тогда и придумали стандарт GraphQL который помог расширить стандартное RestAPI и сужать данные там где оно надо. с уважением!
@nikolaifedorov685
@nikolaifedorov685 11 месяцев назад
Это не единственный косяк автора. Он ещё не понял, что для сортировки, нужно указывать поле по которому хочет получить сортировку - и решил, что в api реализована сортировка по умолчанию.
@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), а клиентская за конкретные запросы с уточнением, что именно требуется получить для последующей логики в браузере.
Далее
Я ВЫЖИЛ ПОСЛЕ УКУСА ЗМЕИ!
22:56
Просмотров 1,1 млн
Это база
00:16
Просмотров 120 тыс.
Redux не нужен. GraphQL и Apollo Client.
27:48
Все о GraphQL за 30 минут
35:26
Просмотров 63 тыс.
React With GraphQL (Apollo Client) Crash Course
1:06:28