Этот пост дает вам представление о том, как начать работу с 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. Я люблю Открытый исходный код и участвую в проектах, которые мне интересны.

Вы можете подписаться на меня в LinkedIn, Twitter и GitHub.