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