GraphQL для фронтенд разработчиков
HTML-код
- Опубликовано: 4 июн 2024
- 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
один из лучших учителей что я видел, объясняет максимально доходчиво и разжевано
Я очень надеюсь на серию видео по графу. Буквально вчера решил таки освоить тему. Михаил очень доходчиво всё рассказывает.
Видио Михаила - отличный обучающий материал.
Пересматриваю некоторые из них, когда что-то нужно освежить в памяти.
Огромное спасибо автору за труд.
Так не хватало этого! Спасибо!!!
Было бы очень хорошо, если бы это было ещё и про React js.
Мне нереально помогли Ваши уроки, ОГРОМНОЕ спасибо
Согласен ) видео по createAsyncThunk меня просто спасло! Качать гения! Теперь смотрю все видосики для общего развития)
Спасибо Михаил, доступно и понятно! (GraphQL для фронтенд разработчиков)
Это очень круто! Объяснено всё супер-доходчиво и без лишней воды. Особенно круто, что начали с простого использования, а не как все с построения своего graphql сервера.
Михаил! Вы очень крутой Преподаватель!спасибо за ваши труды! Я уже джун, нашедший первую работу, но ознакомившись с вашим каналом и курсами - принял решение купить ваши курсы по нативному js, react и redux!
Лайк не глядя, спасибо за контент
Спасибо что показываете только что надо, отбрасывая лишнее. Некоторые авторы уроков: "Сегодня мы изучим тег button. Вначале установим докер..."
Обьяснение как всегда - на высоте! Михаил, ты отличный учитель, у тебя определенно в этом талант!)
Огонь, спасибо большое !!!
Очень недооценённый канал по количеству подписчиков и просмотров. Огромное спасибо!
Огромное спасибо за материал! Невероятно просто и понятно) И отдельное спасибо за код из ролика!!! Лайк + подписка
Спасибо за урок Михаил
Круто, как обычно 👍
Благодарю Михаил GraphQL стал понятнее для меня
Михаил, спасибо. Вы как всегда на высоте!!! 😊
Просьба: не могли бы вы осветить тему "алгоритмы и структуры данных". Это очень часто спрашивают на собеседовании
Отличное видео, спасибо🥰
Я ждал этого🤤
Спасибо, классное видео)
Хотелось бы еще увидеть видео GraphQL для бэкенд разработчиков
Спасибо за урок был очень познавательный. Хорошо если был бы урок на нативном js. С использованием подписок (subscribe) в graphql.
Спасибо огромное
огромное спасибо
Спасибо вам за видео. Если у вас будет возможность снять видео про работу с React + Apollo, круто было бы если вы показали как работать с кешем.
Всё просто. Интереснее было бы посмотреть rtk вместе с graphql
Спасибо
спасибо
Видео понравилось. Но как реализуются сложные запросы, проверка и защита данных, милдверы?
Огромное спасибо!
P.S. может подскажите, чем MongoDB сервис можно заменить сегодня для разработчика (хотя бы для тестирования)?
Не изучал эту тему. В моем случае вопрос о замене монги не стоит. В зависимости от задач можно попробовать поиграться с тем что firebase предлагает, либо aws dynamoDB.
@@mishanep
Видимо, Вы не поняли - я о замене сервисов, заблокировавших доступ к своим ресурсам.
Я понимаю, что Вам сейчас не актуально, но может ещё кто подскажет...
@@victormog и я о том же) я даже не знаю какие сервисы сейчас заблокированы.
@@mishanep
☹️
Было бы интересно посмотреть как создается чат, с комнатами, снимите пожалуйста такой контент
я одно не понял, откуда тут готовые методы появились (схемы или как их там, updateTodo, createTodo )? Эти схемы не бекенде создаются или на фронте ?
На бэкенде. На фронте мы используем GraphQL сервис.
А будет видео по react query?
Со временем думаю и по нему будет
Урок супер. Не совсем понимаю прикол с переменными, зачем они нужны когда есть интерполяция в js?
Осталось убедить бекендера, чтобы он это все описал на серве. Делать этого конечно же он не будет..
Сортировку попробовал, так и не понял почему у меня не сортируется. Потом увидел что у Вас тоже на видео не сортируется, наверно у API какая-то проблема.
А так видео шикарное, спасибо.
Всё проще - у api нет проблем, автор в примере не задал поле по которому нужно сортировать!
Например вот так:
"sort": {
"field": "title",
"order": "ASC"
}
Добрый день, Михаил! Немного не по теме видео вопрос, но т.к. оно сейчас самое актуальное, задам здесь
Искал у вас на канале, но так и не нашёл видео по веб сокетам, не планируете ли вы выпустить видео по ним?
Приветствую!
В ближайших планах не было. Но столько людей про сокеты спрашивает, что видать не отвертеться)))
Добрый день! Такой вопрос: я джуниор фронтенд разработчик. Мне дали задание сделать фильтрацию данных. Получается на бэке они подняли это и мне надо сделать так чтоб при клике или вводе в инпут данных приходили данные совподающие с тем что ввел пользователь. И реализовать это все с помощью query. А вопрос в том уровень ли это джуниора?
Потому что у меня даже идеи нет как это сделать
В graphql playground должна быть схема доступных действий над данными, включая фильтрацию, если она есть. Вам нужно сначала в плейграунде добиться желаемого результата, потом можно смело на фронтенде внедрять полученный query. Касаемо уровня задания для разработчика - здесь в каждой компании свои требования. Если на проекте используется GraphQL, вероятно, от разработчиков любого уровня будут ожидать соответствующие знания или же рвение к их изучению. Задавайте вопросы коллегам, не стесняйтесь.
Слишком мелкий шрифт, со зрением -1 испытывал трудности при ознакомлении
Почему в этот раз todos не на любимом React? Это для следующего видео!
Тяжеловато на запросы смотреть с мелким шрифтом, по итогу просто слушаешь потому что ничего не видно))
чуть поправлю, а то кого на собесе так завалит ваше определение - "что такое GraphQL,". нет, GraphQL вообще ни какого отношения к SQL даже близко не имеет! GraphQL - это стандарт по которому вы можете выстраивать свое общение между приложениями. это скорее замена RestAPI, даже не замена, ибо и это будет не совсем верно. Это дополнение к RestAPI которое расширяет возможности Rest. реализация на разных языках, это не GraphQL, это уже решение которое реализовали по, условно, стандарту GraphQL. вот так более близко к правде. GraphQL, это пример того как можно было бы реализовать общение между приложениями, а не язык запросов и тд..)) его изобрели ибо были проблемы с мобильным приложением, приходило слишком много данных и надо было как-то их ограничить, убрать лишнее. вот тогда и придумали стандарт GraphQL который помог расширить стандартное RestAPI и сужать данные там где оно надо.
с уважением!
Это не единственный косяк автора. Он ещё не понял, что для сортировки, нужно указывать поле по которому хочет получить сортировку - и решил, что в api реализована сортировка по умолчанию.
+
Apollo next?
Братан, ты что, колхозник?
Ну какое на хрен "АПИ"?
А что есть GraphQL для серверной разработки?
Есть серверная часть, когда надо писать резолверы. По сути, промежуточная между базой данных и фронтендом. Хотя нередко эту работу тоже делают фронты =)
@@mishanep Спасибо за оперативный ответ! Скажите пожалуйста, я немного запутался.
1) Есть библиотека Apollo. Как я понял, именно она подразделяется на клиентскую и серверную часть. Можете кратко, в двух словах расписать, за что отвечает клиентская, а за что серверная.
2) Если использовать Apollo, значит ли это что не нужно развёртывать сервер на nodejs или на express?
3) На чём создаются API? Можно их создавать на node, express. А можно ли на Apollo
4) Не совсем понятно зачем создавать API если используешь GraphQL. Он же может напрямую работать с файлом json, который будет лежать на сервере...
Очень прошу разъяснить!
Ох. Здесь всё может быть как очень просто, так и чертовски запутанно.
Например, если у вас есть сайт на WordPress и вы хотите использовать его как бэкенд, и написать свой фронтенд на Реакте, то серверный GraphQL решится путем установки плагина (к слову, Apollo - не единственный вариант, и это фреймворк, в простых случаях можно и без него).
А могут быть сложные кейсы, как в моем случае))) У нас есть бэкенд, который по API отдает данные, а есть прослойка на NodeJS, которая, грубо говоря, трансформирует REST API в Graphql. Собственно, сервер обыкновенно требуется, это не обязательно NodeJS. Express при этом не обязателен.
Серверная часть отвечает за подготовку данных (получать она их может как напрямую через базу данных, так и через посредников, вроде REST API), а клиентская за конкретные запросы с уточнением, что именно требуется получить для последующей логики в браузере.
в следующий раз покрупнее бы код сделать хорошо было