Graphql
Код учебного курса “GraphQL” на YouTube-канале webDev (https://tinyurl.com/2jnvatxv)
Install / Use
/learn @YauhenKavalchuk/GraphqlREADME
GraphQL
Описание курса:
В данном видео-курсе мы с вами разберём библиотек GraphQL. GraphQL – фактически это язык запросов или синтаксис, который описывает как запрашивать данные. Он позволяет клиенту запросить лишь желаемые данные. За все отвечает именно клиент. Т.е. GraphQL можно использовать не только на серверной, но и на клиентской стороне.
GraphQL имеет три основные характеристики:
- Он позволяет клиенту точно указать, какие данные ему нужны.
- Облегчает агрегацию данных из нескольких источников.
- Использует систему типов для описания данных.
Поддержать развитие канала:
<img alt="webDev | YouTube Sponsor" src="https://img.shields.io/badge/Become a sponsor-F70000.svg?&style=for-the-badge&logo=youtube&logoColor=fff" /> <img alt="webDev | Patreon" src="https://img.shields.io/badge/Become a patron-EF6451.svg?&style=for-the-badge&logo=patreon&logoColor=fff" />
Используемые ресурсы и инструменты:
- Atom (Редактор кода)
- Create React App (Рабочее окружение)
- mLab (База данных)
- Material-UI (Интерфейс приложения)
- Apollo Client
Полезные ссылки:
Установка зависимостей:
- Для сервера:
npm i express nodemon graphql express-graphql mongoose cors --save - Для приложения (UI):
yarn add apollo-boost react-apollo graphql @material-ui/core @material-ui/icons react-swipeable-views recompose
Быстрый старт серверной части (уроки с 1 по 9):
- Клонируйте репозиторий:
git clone https://github.com/YauhenKavalchuk/graphql.git - Перейдите в папку server и установите зависимости:
npm install - Перейдите в нужную ветку соответствующую уроку:
git checkout lesson_01илиgit lesson_02и т.д. - Запустите проект:
npm run dev
Быстрый старт приложения (уроки с 10 по 16):
- Клонируйте репозиторий:
git clone https://github.com/YauhenKavalchuk/graphql.git - Перейдите в нужную ветку соответствующую уроку:
git checkout lesson_10илиgit lesson_11и т.д. - Перейдите в папку server и установите зависимости:
npm install- Запустите сервер:
npm run dev
- Запустите сервер:
- Перейдите в папку application и установите зависимости:
yarn install- Запустите проект:
yarn start
- Запустите проект:
Список уроков:
- #0 Введение (Introduction)
- #1 Установка окружения (Setup Environment)
- #2 Схема и корневой запрос (GraphQL Schema & Root Query)
- #3 Функция Resolve и тест запроса (The Resolve Function & Testing Query)
- #4 Новый тип и связь между типами (Different Type & Type Relations)
- #5 Списки (GraphQL Lists)
- #6 Мигрируем данные на mLab (Migration to mLab)
- #7 Добавляем Mongoose и обновляем Resolve (Adding Mongoose Models & Updating Resolve)
- #8 Создаём первую мутацию (Create First Mutation)
- #9 Мутации для удаления и обновления (Remove & Update Mutations)
- #10 Структура React приложения (Structure of React Application)
- #11 Объединяем Front-end и Back-end (Connecting Front-end & Back-end)
- #12 Отображаем реальные данный с БД (Display Real Data from DB)
- #13 Добавление элементов в БД (Adding Elements to DB)
- #14 Удаление элементов из БД (Removing Elements from DB)
- #15 Редактирование элементов в БД (Edit Elements in DB)
- #16 Поиск элементов в БД (Search Elements in DB)
Связаться со мной:
<img alt="webDev | YouTube" src="https://img.shields.io/badge/youtube-FF0000.svg?&style=for-the-badge&logo=Instagram&logoColor=white" /> <img alt="webDev | Instagram" src="https://img.shields.io/badge/instagram-E4405F.svg?&style=for-the-badge&logo=Instagram&logoColor=white" /> <img alt="webDev | LinkedIn" src="https://img.shields.io/badge/linkedin-0077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" /> <img alt="webDev | Twitter" src="https://img.shields.io/badge/twitter-1DA1F2.svg?&style=for-the-badge&logo=Twitter&logoColor=white" /> <img alt="webDev | VK" src="https://img.shields.io/badge/vk-4680C2.svg?&style=for-the-badge&logo=Twitter&logoColor=white" />
Related Skills
bluebubbles
341.6kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
node-connect
341.6kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
slack
341.6kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
84.6kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
