Этот пост дает вам представление о том, как начать работу с GraphQL с помощью Hasura и Angular. Я дам вам информацию о шаблонных приложениях на Angular, настроенных для использования с развернутым движком Hasura GraphQL на Heroku.
Идея этой статьи состоит в том, чтобы дать вам толчок в процессе создания приложения и представление о подходе, используемом для него. Мы не будем часто вдаваться в код, только ту часть, которая нам нужна для запуска и запуска приложения.
Давайте копаться!
Обзор
У нас есть 3 жанра шаблонов:
Привет, мир
Этот шаблон представляет собой просто приложение Angular, в котором уже настроены настройки GraphQL и заголовки. Используя этот шаблон, вы можете напрямую клонировать приложение и приступить к созданию своего приложения!
базовый
Этот шаблон построен на шаблоне hello-world и представляет основные функции мутации / запросов, а также показывает, как вы их пишете, и функции, которые их используют.
передовой
Этот шаблон построен на основе базового приложения и полностью поддерживает мутации, запросы и аутентификацию с уже установленным Auth0! Этот шаблон - идеальное приложение, чтобы вы могли начать работу и создавать новые приложения в кратчайшие сроки.
Вау! Стоп! Здесь важная информация…
Чтобы использовать эти шаблоны, необходимо выполнить некоторые важные настройки. Они здесь:
- Создайте экземпляр на Heroku. Для этого перейдите на https://hasura.io.
- Настройте переменные среды: перейдите к файлу
environments/environment.ts
и измените значения для конечной точки и других обязательных полей. В расширенном приложении вам нужно будет использовать учетные данные, предоставленные Auth0.
Котелки
Три шаблона, которые позволяют Angular взаимодействовать с движком Hasura GraphQL, можно клонировать из репозитория движка Hasura. Общие для всех трех шаблонов шаги:
- Клонируйте приложение.
cd <boilerplate-name>
и- запустите
npm install
, чтобы установить все зависимости.
Привет, мир
Шаблон hello-world - это не что иное, как простое приложение Angular с установленным модулем GraphQL и уже настроенным клиентом apollo.
Структура каталогов для приложения показана ниже.
В приложении hello world есть модуль hello, который импортирует graph-ql.module.ts
. Формирование этой структуры каталогов помогает нам инициализировать модуль GraphQL после активации модуля Hello.
Но зачем нам это делать? Модуль GraphQL инициализирует заголовки и создает клиента Apollo. Заголовки содержат токены авторизации и другую информацию. Мы хотим инициализировать этот модуль только тогда, когда установлены токены авторизации, иначе нам нужно было бы обновить приложение еще раз, чтобы установить значения для токенов в модуле. Этому шаблону следуют все шаблоны.
Модуль Hello активируется из модуля приложения.
Теперь давайте лучше познакомимся с модулем GraphQL. Этот модуль одинаков для всех трех шаблонов с некоторыми незначительными корректировками для жетонов.
Базовое приложение
Базовый шаблон приложения построен на основе шаблона Hello World. Дополнения к приложению - это запросы и изменения, написанные, чтобы дать вам примеры написания запросов и изменений.
Запросы написаны на app/shared/operations.ts
. Общий модуль импортируется в базовый модуль и содержит HTML и функции, написанные для выполнения запросов.
В приложении базовое вход обрабатывается имитатором аутентификации, который устанавливает жестко запрограммированный сеанс и позволяет вам входить в систему с любым именем пользователя и паролем.
Расширенный шаблон
Этот шаблон построен на основе шаблона Basic и добавляет в приложение функцию аутентификации.
Аутентификация через Auth0
- Перейдите на https://auth0.com и войдите в систему.
- После входа в систему создайте новое приложение и получите учетные данные для приложения.
- Откройте настройки приложения и добавьте URL-адрес обратного вызова. Для разработки: используйте URL-адрес http: // localhost: 4200, а для производства используйте URL-адрес вашего веб-сайта.
Теперь перейдите к environments/environment.prod.ts
и замените переменные среды. Теперь вы готовы использовать расширенный шаблон!
Удачного кодирования!
Обо мне
Меня зовут Сиддхант Шривастав, я учусь на бакалавриате Индийского института информационных технологий в Аллахабаде.
Я люблю творить. Я люблю писать код на Python и JS. Я люблю Открытый исходный код и участвую в проектах, которые мне интересны.