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