Это начальная попытка создания веб-приложения Vue.js, которое использует GraphQL API Invest Guru AWS AppSync, который был создан в предыдущих статьях этой серии.

Введение

Это четвертый из серии сообщений, описывающих мои эксперименты с Vue.js, AWS AppSync и Lambda. Публичный репозиторий GitHub существует с этим экспериментом, чтобы другие могли учиться на моих усилиях. В этом посте я опишу код, который находится в теге v2, поэтому не стесняйтесь оформлять заказ до этого момента: git checkout v2. Ссылки на другие сообщения этой серии перечислены ниже:

  • "Первая часть"
  • "Часть вторая"
  • "Часть третья"
  • Часть четвертая (эта статья)

В этой статье предполагается, что вы развернули GraphQL API, который был создан в первых трех сообщениях блога в AWS. В этом посте я буду использовать этот GraphQL API.

Почему именно Vue.js?

Мне очень нравится Vue.js! Я сказал это. Он подходит мне лучше, чем React, хотя мне тоже очень нравится React. Мне нравится, как разработан Vue.js, и упаковка маршрутизации по умолчанию (Vue Routing) и управления состоянием (Vuex) в основной фреймворк - это разумное решение сообщества Vue. Я буду восхвалять достоинства Vue.js в следующих статьях, поэтому вас предупредили!

Создание приложения Vue.js

В наши дни создать новое веб-приложение с помощью Vue CLI довольно просто.

Создание нового приложения с помощью Vue CLI

  1. Установите Vue CLI глобально: npm install -g @vue/cli
  2. Создайте веб-приложение Vue: vue create invest-guru-prototype1-vue. Вам будет предложено ответить на несколько вопросов о приложении, которое вы пытаетесь создать. Я выбрал Babel, Router, Vuex, препроцессоры CSS, Linter, модульное тестирование Jest и сквозное тестирование Cypress. Я использую режим истории для маршрутизатора, Sass / SCSS (с node-sass) для препроцессора CSS и линтер / форматтер Prettier. Наконец, я управляю конфигурацией Babel, PostCSS и ESLint в специальных файлах конфигурации.
  3. Измените каталог на новый каталог веб-приложения: cd invest-guru-prototype1-vue
  4. Запустите веб-приложение локально: yarn serve
  5. Убедитесь, что веб-приложение отображается, посетив http: // localhost: 8080 /. Вы должны увидеть представление по умолчанию, созданное Vue CLI.

Добавление зависимостей GraphQL и AppSync

У нас есть скелет приложения Vue.js, так что пора обратить наше внимание на интеграцию AppSync GraphQL API в это приложение. Я начал с этой документации, чтобы начать работу с интеграцией GraphQL и AWS AppSync. Оказывается, модуль узла AppSync, aws-appsync, основан на Apollo Client 2.0, поэтому мы можем использовать VueApollo для простой интеграции AppSync GraphQL API в приложение Vue.js, которое я создаю. Добавьте необходимые зависимости npm для AppSync и GraphQL:

yarn add aws-appsync vue-apollo graphql-tag

Настроить переменные среды

Создайте файл .env в корневом каталоге проекта. Вставьте в файл следующее:

Создайте файл .env.local в корневом каталоге проекта. Вставьте приведенное выше содержимое в файл, а затем укажите значения для региона, URL-адреса конечной точки AppSync и ключа API. Эти значения можно найти в выводе yarn deploy-dev в бессерверном проекте (на один каталог выше этого каталога веб-приложения). Этот файл переменных среды не должен контролироваться по версиям.

Настроить AppSync и VueApollo

Создайте appsync.js исходный файл в корневом src каталоге проекта веб-приложения Vue.js. Добавьте следующий код в этот исходный файл newappsync.js. Обратите внимание, что я не использую файл aws-export.js из приведенной выше ссылки на документацию. Я собираюсь воспользоваться отличной поддержкой переменных среды в Vue CLI и использовать ее вместо этого. Намного проще контролировать секреты для нескольких сред благодаря поддержке переменных среды в Vue CLI.

Обновите main.js

Добавьте следующий код в main.js исходный файл в каталогеsrc. Это изменение вводит ApolloProvider в корневой компонент Vue, поэтому все дочерние компоненты Vue имеют доступ к Apollo Client.

Создайте первый запрос GraphQL

Создайте каталог graphql в каталогеsrc. Теперь создайте src/graphql/SimpleMovingAverageAnalyticQuery.js исходный файл и вставьте в него следующее:

Отредактируйте компонент Home.vue

Отредактируйте исходный файл src/views/Home.vue, чтобы он соответствовал приведенному ниже списку источников. Подробнее о параметре apollo и его свойствах можно узнать здесь.

Тестирование связи между Vue.js и AWS AppSync

(Повторно) запустите сервер разработки Vue CLI, используя yarn serve. Перейдите к http://localhost:8080/. Откройте инструменты разработчика в своем веб-браузере и посмотрите вкладку «Сеть». Вы должны увидеть вызов POST /graphql, который должен вернуть код состояния HTTP 200. В полезных данных запроса вы должны увидеть следующее.

Вы можете видеть, что запрос POST отправляет запрос GraphQL как полезную нагрузку JSON (это делает клиент AWS AppSync). В ответе возвращается полезная нагрузка JSON. Мы можем увидеть ответ JSON на вкладке предварительного просмотра.

Вывод

Первый запрос GraphQL с поддержкой AppSync запущен и выполняется в нашем приложении Vue.js. Я пока не использую данные, но в следующей записи блога данные представлены в диаграмме с использованием Chart.js и vue-chartjs.