В этой статье вы познакомились с одним из очень немногих учебных пособий, найденных в Интернете, по настройке приложения списка задач с движком Hasura GraphQL и Angular 6.
На этой заметке давайте погрузимся в то, что к чему. Руководство. Мы ответим на следующие вопросы:
- Что на самом деле такое GraphQL?
- Что такое Hasura и для чего предназначен механизм Hasura's GraphQL?
- Как мы можем начать работу с основными функциями в Angular 6?
- Как добавить аутентификацию с Auth0 и делать запросы для конкретных пользователей?
Давайте нырнем прямо сейчас!
Что такое GraphQL?
TL’DR: GraphQL - это синтаксис, описывающий, как запрашивать данные и что получить взамен.
GraphQL - это язык запросов и обработки данных с открытым исходным кодом, а также среда выполнения для выполнения запросов с существующими данными. Он предназначен для создания клиентских приложений, предоставляя интуитивно понятный и гибкий синтаксис и систему для описания требований к данным и взаимодействия. Он был разработан Facebook в 2012 году.
С GraphQL у нас есть только одна конечная точка API. В отличие от фреймворков REST требовалось определить несколько конечных точек API для различных операций взаимодействия с базой данных. GraphQL позволяет писать прямые запросы, в которых упоминается, что вы действительно хотите добавить и что действительно хотите взамен.
При чем тут Hasura и ее движок GraphQL?
Механизм GraphQL Хасуры
Hasura GraphQL Engine - это чрезвычайно легкий и высокопроизводительный продукт, который предоставляет вам API-интерфейсы GraphQL в реальном времени для базы данных Postgres. Его можно использовать для быстрого создания новых приложений на Postgres или для ускорения перехода на GraphQL для существующих приложений на Postgres.
Он поставляется с пользовательским интерфейсом, который позволяет создавать и просматривать таблицы в своей базе данных и выполнять запросы GraphQL с помощью встроенный интерфейс GraphiQL.
Давай займемся кодированием!
Настройка вашего ПК.
Чтобы настроить Angular для Hasura на вашем ПК, откройте терминал и выполните следующие команды.
# Installing Angular CLI globally.
$ npm install -g @angular/cli
# Make a new Angular application.
$ ng new hasura-todo-app --routing
$ cd hasura-todo-app
# Starting Angular server at port 4200.
$ ng serveТеперь вы настроили приложение Angular, которое будет взаимодействовать с вашим Hasura Engine. Вы можете просмотреть его на https: // localhost: 4200. Это будет выглядеть так, как показано ниже.
Теперь нам нужно настроить клиент Apollo.
Клиент Apollo разработан, чтобы помочь вам быстро создать пользовательский интерфейс, который извлекает данные с помощью GraphQL, он работает с каждой реализацией сервера GraphQL для любого языка. Чтобы установить Apollo, выполните следующее.
# Install GraphQL and Apollo Client. $ npm install apollo-angular apollo-angular-link-http apollo-client apollo-cache-inmemory graphql-tag graphql
Настройка Hasura Engine на бесплатном уровне Heroku.
Теперь нам нужно настроить Hasura's Engine на Heroku для взаимодействия с нашим приложением списка задач Angular. Перейдите по этой ссылке, чтобы посетить Heroku и настроить свое приложение. Ваше приложение будет развернуто в https://<your-app-name>.herokuapp.com. Процесс должен выглядеть, как показано ниже:
В настоящее время ваша конечная точка API доступна для всех, но мы этого не хотим. Поэтому мы добавим в Heroku переменную конфигурации для аутентификации конечной точки. Помните, что эта переменная будет отправляться в Heroku при каждом вызове Hasura Engine. Имя переменной будет HASURA_GRAPHQL_ACCESS_KEY.. Ниже приведен пример:
После настройки параметров Heroku перейдите к развернутому приложению, чтобы создать таблицу. Для этого:
- Щелкните вкладку таблицы и введите имя таблицы.
- Введите имена полей как
id,is_completed,userиtext. - Установите для поля the
is_completedзначение по умолчанию false. - Установите первичный ключ как поле
id.
Теперь перейдите на вкладку разрешений, чтобы установить разрешения для пользователя. Добавьте поле user и отредактируйте разрешения для данных методов.
- Для вставки щелкните
With Custom Checkи добавьте следующие значения.
- Для выбора щелкните
With same checks as insert. - Для обновления щелкните
With same checks asи выберите только полеis_completed. - Для удаления нажмите
With same checks asи выберите все.
Настройка Auth0 в приложении Angular 6.
Перейдите на https://auth0.com, чтобы настроить приложение, которое будет входить в систему с вашим приложением Angular.
- Создайте новое приложение на Auth0.
- Введите имя, выберите
Single Page Applicationи нажмите кнопку создания. - Выберите учебник для приложения Angular2 + и следуйте инструкциям.
- В URL обратного вызова не забудьте указать
http://localhost:4200, так как нам нужно перенаправить после входа в систему.
Настройка клиента Apollo для взаимодействия с Hasura Engine.
До сих пор мы можем войти в наше приложение angular, и все токены и другая информация хранятся в нашем локальном хранилище angular. Теперь нам нужен только клиент Apollo, который будет взаимодействовать с Хасурой.
Для лучшей организации давайте создадим модуль с использованием ng g m GraphQl и импортируем в AppModule следующим образом:
Давайте продолжим и создадим несколько компонентов, которые будут обрабатывать все запросы. Вот как
ng g c list/addItem: этот компонент будет использоваться для добавления элементов в список.ng g c list/viewItems: этот компонент будет использоваться для просмотра элементов и выполнения операций со списком.
Наш GraphQL Module будет выглядеть так:
Мы будем определять запросы и мутации для получения данных и выполнения над ними операций. Давайте создадим для него query.ts файл. Схемы для различных запросов и мутаций можно найти в Справочном руководстве по мутациям API.
Мы будем выполнять четыре вида операций:
- Получить запрос:
Этот запрос получит все строки в таблице todo_list и только столбцы id, text иis_completed из таблицы
- Вставить мутацию:
Эта мутация будет использоваться для вставки объекта в таблицу. Возвращаем id, text, is_completed иuser.
- Обновить мутацию:
Эта мутация обновления обновит поле is_completed до нового значения при совпадении wherequery.
- Удалить мутацию:
Этот запрос на удаление удалит строку, для которой соответствует where запрос. и верните id удаленной строки.
Разработка интерфейса и соответствующих компонентов
Вот как будет выглядеть add-item.component.ts:
В этом файле мы определяем someString variable, который будет использоваться для привязки значения поля ввода к самому себе и в дальнейшем будет использоваться для отправки текста в базу данных.
Мы объявляем экземпляр Apollo как apollo, который будет использоваться для отправки мутации Query.AddMutation в двигатель Хасуры.
Кроме того, здесь мы получаем текст из переменной this.someString и пользователя из локального хранилища, которое сохраняется во время входа в систему.
После успешного выполнения запроса мы просто перезагружаем страницу, чтобы очистить значения по умолчанию.
Теперь перейдем к файлу view-item.component.ts, в котором мы реализовали другие три метода. Вот как это выглядит:
Здесь мы объявили todoItems переменную типа Observable<Array<any>>, которая будет использоваться для хранения списка элементов, который мы получаем при запросе. Переменная noItemInList здесь используется для переключения отображаемого текста, если для пользователя нет элемента.
Нам нужно сделать запрос Get Query, как только страница загрузится.
Здесь мы реализовали методы обновления и удаления.
После удаления мы очищаем локальную переменную элемента.
Для HTML нам нужно поступить так же, как здесь:
Вот и все! Теперь запустите ng serve, чтобы запустить сервер на порту 4200, и посетите http: // localhost: 4200, чтобы открыть ваше приложение.
Возможные ошибки:
При запуске этого приложения вы можете заметить, что сразу после входа в систему вам необходимо обновить страницу, чтобы приложение работало правильно. Причина этого заключается в том, что сразу после обратного вызова модули инициализируются, и во время инициализации, когда он пытается получить переменную localStorage, например access_token и user_id, он терпит неудачу, потому что к тому времени переменные не были установлены в локальном хранилище . Чтобы исправить это, можно просто перезагрузить страницу после установки переменных. Это приведет к повторной инициализации переменных, и ваше приложение будет работать нормально.
Чтобы ознакомиться с полным исходным кодом и вязанками в приложении, посетите:
Для живой рабочей версии посетите:
Удачного кодирования !!
Обо мне
Меня зовут Сиддхант Шривастав, я учусь на бакалавриате в Институте информационных технологий Индии в Аллахабаде.
Я люблю творить. Я люблю писать код на Python и JS. Я люблю Открытый исходный код и участвую в проектах, которые мне интересны. Основатель проекта Cythesize.
