GraphQL приобрел популярность в последние годы благодаря простоте и гибкости, которую он предлагает при разработке клиентских приложений. Приложения, созданные с помощью API-интерфейсов GraphQL, легко разрабатывать и поддерживать. В этом сообщении блога мы создадим приложение todo с использованием VueJS и Hasura-GraphQL-Engine. Hasura предоставляет graphql в реальном времени для баз данных postgres. Мы подробно рассмотрим, как использовать каждый компонент и создавать на его основе приложение.

Что такое Hasura-GraphQL-Engine?

Hasura-graphql-engine предоставляет graphql в реальном времени для ваших баз данных postgres. Это позволяет разрабатывать отличные приложения, не беспокоясь о серверной части. Чтобы увидеть все возможности, которые предоставляет hasura, перейдите по ссылке this. Движок Hasura graphql также предоставляет вам графический интерфейс, в котором вы можете запускать запросы graphql и редактировать таблицы базы данных.

Прежде чем мы начнем с нашего приложения vue, нам нужно настроить механизм hasura graphql, который предоставит нам конечную точку graphql api.

Настройка Hasura-GraphQL-Engine

Настройка движка Hasura graphql очень проста и предлагает различные методы настройки консоли hasura. Вы можете настроить hasura с помощью docker, kubernetes и heroku. Я рекомендую настроить Hasura с помощью Heroku, поскольку он предлагает развертывание в один клик. Чтобы настроить Hasura с помощью Heroku, перейдите по ссылке эта. Чтобы увидеть другие способы развертывания, перейдите по ссылке this.

Шаблоны приложений ToDo

Ссылка на скачивание шаблона

Эти шаблоны приложений были разработаны для ускорения процесса разработки с использованием Vue и Hasura. Сюда входят три типа шаблонов, которые приведены ниже:

  • Hello-World: Он содержит базовую конфигурацию, необходимую для простой установки приложения, которое будет подключаться к движку Hasura Graphql с помощью клиента apollo. В этом шаблоне нет конфигурации базы данных.
  • Базовый: помимо конфигурации hello-world, это приложение содержит примеры запросов, подписок и мутаций для запросов Graphql, которые мы можем сделать для движка Hasura. Это приложение демонстрирует эти запросы с помощью приложения To-Do.
  • Дополнительно: помимо того, что мы сделали в приложении Basic, это приложение содержит настройку Auth0, необходимую для авторизации пользователей.

Настройка шаблона

Настроить шаблон очень просто. Все, что вам нужно сделать, это просто клонировать шаблон, установить все зависимости и запустить приложение. Вот ссылка на все шаблоны. Ниже приведены подробные шаги по запуску каждого из шаблонов.

Привет, мир

Он содержит базовую конфигурацию, необходимую для запуска приложения vue с использованием hasura в качестве бэкэнда. Он содержит базовую настройку для клиента vue-apollo. Чтобы запустить это приложение, перейдите в каталог hello-world и настройте переменные среды, используемые в main.js. Перейдите в config / dev.env.js и поместите туда свои переменные среды. После размещения переменных среды запустите npm install из корневого каталога, а затем выполните npm run dev, чтобы запустить приложение в режиме разработки. Теперь вы можете начать добавлять свои файлы и запросы graphql для своего приложения.

Чтобы узнать больше о структуре приложения, обратитесь к README приложения.

Базовый

Помимо базовой настройки, которую мы достигли в шаблоне Hello-World, в этом приложении мы разрабатываем приложение для выполнения, которое использует запросы, подписки и изменения graphql. Убедитесь, что у вас запущена консоль hasura, и добавьте таблицы в консоль hasura. Полная информация о таблицах базы данных и хасурах дана в этом разделе README. После настройки консоли hasura настройте переменные среды, как мы это делали в приложении hello-world. Мы можем использовать npm install для установки зависимостей и npm run dev для запуска приложения. Запросы, подписка и изменения, используемые в этом приложении, помещаются в файл src / graphql.js.

Функциональные возможности в этом приложении:

  • Пользователь вводит свое имя. Если существует пользователь с таким же именем, он предлагает пользователю войти в систему, в противном случае пользователю предоставляется возможность регистрации.
  • После входа в систему пользователь может добавлять свои задачи и отмечать их как прочитанные.
  • Пользователи могут удалить свои задачи полностью.

Чтобы узнать больше о структуре приложения, обратитесь к README приложения.

Передовой

Этот шаблон был построен на основе шаблона основного приложения и использует auth0 для аутентификации. Настройте auth0, следуя этому руководству. Убедитесь, что у вас запущена консоль hasura, и добавьте таблицы в консоль hasura. Полная информация о таблицах базы данных и хасурах дана в этом разделе README. После настройки консоли hasura настройте переменные среды, как мы это делали в приложении hello-world. Здесь вам также необходимо настроить переменные auth0 в файле Auth / auth0-variables.js. Инструкции по установке этого файла были упомянуты здесь в readme. Затем мы можем использовать npm install для установки зависимостей и npm run dev для запуска приложения.

Функциональные возможности в этом приложении:

  • Авторизация / Регистрация с использованием auth0.
  • Добавление задач и отметка их как выполненных.
  • Удаление выполненных задач.

Чтобы узнать больше о структуре приложения, обратитесь к README приложения.

Если вы найдете эти шаблоны полезными, не забудьте пометить репозиторий.

Исправление проблем

Если у вас возникнут какие-либо проблемы, вы можете поднять вопрос на GitHub или связаться с нами напрямую.

Обо мне

Меня зовут Прадип Гангвар, я студент бакалавриата по информационным технологиям в Индийском институте информационных технологий, Аллахабад.

Я люблю вносить свой вклад в проекты с открытым исходным кодом. Мне нравится разрабатывать вещи с помощью Python и JavaScript.

Если вы хотите узнать обо мне больше, вы можете подписаться на меня на GitHub, LinkedIn и Twitter. : D