Разработанный Facebook в 2012 году GraphQL - это язык для очень быстрого и простого управления и запроса данных для клиентской части вашего приложения.
Благодаря очень простому синтаксису и растущей популярности, используемым ведущими разработчиками и крупными компаниями, такими как Github, Coursera, Pinterest, GraphQL уже стал реальностью во многих проектах, в том числе в моей работе.
В этой статье мы увидим, как эти технологии работают вместе на практике. Вы можете проверить образец проекта в этом репо. Просто не забудьте добавить конечную точку и настроить squema!
Обработка данных с помощью GraphQL
Запросы GraphQL просты для понимания, но сначала вам нужно получить Тип.
Типы - это то, как GraphQL определяет данные, ваш сценарий и определение.
В этом примере у нас есть тип Project, у которого есть строка Name, строка Tagline и несколько U kisers!
Запросите ваши данные, отправив запросы на сервер GraphQL.
И радуйтесь вашему ответу :)
{
"project": {
"tagline": "A query language for APIs"
}
}
Graphcool
Graphcool - это фреймворк и платформа с открытым исходным кодом для создания BaaS, разработки бессерверных веб-сервисов GraphQL. Мы узнаем это при практической разработке этого небольшого проекта.
Клиент Apollo
Apollo Client - мощный клиент для выполнения запросов с помощью GraphQL, также с открытым исходным кодом, он идеально подходит для Angular, но также работает с другими технологиями, такими как Vue, Meteor и Ember.
На изображении выше показана схема из нашего приложения. Мы импортируем Apollo в наш проект с помощью NPM и будем использовать его для отправки запросов для нашей конечной точки Graphcool.
Руки вперед, давайте сделаем все это.
Вы должны иметь
1. Установка Angular, создание проекта и добавление зависимостей
Давайте установим Angular CLI v6.2.2, откроем терминал и запустим эти команды.
$ npm install -g @angular/[email protected]
После установки мы можем проверить версию Angular CLI, запустив $ ng -v в вашем терминале, если эти команды возвращают экран, подобный приведенному ниже, мы можем запустить наш Angular Project.
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.2.2
Node: 10.1.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.8.2
@angular-devkit/core 0.8.2
@angular-devkit/schematics 0.8.2
@schematics/angular 0.8.2
@schematics/update 0.8.2
rxjs 6.2.2
typescript 2.9.2
Создайте проект, пропустить тесты - это необязательный флаг.
$ ng new apollo-graphql --skip-tests
После создания проекта добавьте зависимости. Мы узнаем больше о каждом при реализации.
$ npm i --save apollo-angular-link-http apollo-angular apollo-cache-inmemory apollo-client graphql ghraphql-tag
Теперь наш проект готов к работе.
2. Создание squema в Graphcool и получение конечной точки.
Зайдите в Graphcool Console и создайте свою учетную запись. После входа в систему Graphcool создаст образец проекта, платформа очень понятна, поэтому не стесняйтесь исследовать.
В примере проекта перейдите в меню squema, мы получим что-то вроде этого:
type File @model { contentType: String! createdAt: DateTime! id: ID! @isUnique name: String! secret: String! @isUnique size: Int! updatedAt: DateTime! url: String! @isUnique } type User @model { createdAt: DateTime! id: ID! @isUnique name: String! updatedAt: DateTime! }
В примере проекта перейдите в нижний левый угол страницы и щелкните «конечная точка», эта ссылка будет использоваться для настройки клиента Apollo.
3. Настройте ApolloClient на Angular и начните отправлять запросы и мутации.
Для настройки клиента Apollo и получения запросов на чтение и отправку необходим только один файл, поэтому возьмите конечную точку из предыдущего шага и создайте в своем src / приложении файл с именем apollo-config.module.ts.
Этот класс инициализирует Apollo и HttpLink для работы с протоколом HTTP. Импортируя его класс в модуль Angular, мы уже можем отправлять запросы. Я не буду вводить подробности построчно в этой статье.
Как я уже сказал, после создания конфигурации Apollo мы можем отправлять запросы, поэтому перейдите на свой app.component.ts.
И это все. В этом примере Apollo создаст возвращаемый наблюдаемый объект с возвратом Graphcool. Я рекомендую вам вернуться в консоль Graphcool и посмотреть созданные элементы.
Спасибо !
Если вам понравилась эта статья, подписывайтесь на меня на github и хлопайте в ладоши. Если возникнут какие-либо сомнения или проблемы, отправьте мне электронное письмо, и я буду очень рад ответить и помочь.
