Vue.js and AWS AppSync, part one

This is the initial effort of building a Vue.js web application that consumes the Invest Guru AWS AppSync-hosted GraphQL API that was created in previous posts in this series.

Introduction

This is the fourth of a series of posts describing my experimentation with Vue.js, AWS AppSync and Lambda. A public GitHub repository exists with this experiment so others can learn from my efforts. For this post, I will be describing the code that resides on the v2 tag, so feel free to checkout to this point in time: git checkout v2. Links to the other posts in this series are listed below:

This article is assuming that you have deployed the GraphQL API that was built up in the first three blog posts to AWS. I’ll be using that GraphQL API in this post.

Why Vue.js?

I really like Vue.js! There, I said it. It fits me better than React, though I really like React also. I like how Vue.js is designed, and packaging default routing (Vue Routing) and state management (Vuex) into the core framework is a smart decision by the Vue community. I’ll be extolling the virtues of Vue.js in subsequent posts, so you’ve been warned!

Creating the Vue.js application

Creating a new web application is pretty simple these days with the aid of Vue CLI.

Scaffolding a new app with Vue CLI

  1. Install the Vue CLI globally: npm install -g @vue/cli
  2. Create the Vue web application: vue create invest-guru-prototype1-vue. You will be prompted to answer a few questions about the application that you are trying to create. I went with Babel, Router, Vuex, CSS Pre-processors, Linter, Jest unit testing and Cypress end-to-end testing. I am using history mode for the router, Sass/SCSS (with node-sass) for a CSS pre-processor, and the Prettier linter/formatter. Finally I am managing the configuration for Babel, PostCSS, and ESLint in dedicated config files.
  3. Change directory to the new web application directory: cd invest-guru-prototype1-vue
  4. Start the web application locally: yarn serve
  5. Ensure the web app renders by visiting http://localhost:8080/. You should see the default view that was scaffolded by the Vue CLI.

Adding GraphQL and AppSync dependencies

We have the skeleton of a Vue.js application up and running, so it’s time to turn our attention to integrating the AppSync GraphQL API into this application. I started with this documentation to get up and running with the integration of GraphQL and AWS AppSync. It turns out that the AppSync node module, aws-appsync, is based on Apollo Client 2.0, so we can use VueApollo to easily integrate the AppSync GraphQL API into the Vue.js application that I am building. Add the necessary npm dependencies for AppSync and GraphQL:

yarn add aws-appsync vue-apollo graphql-tag

Configure our environment variables

Create the .env file in the project root directory. Paste the following into the file:

Create the .env.local file in the project root directory. Paste the above contents into the file and then supply values for the region, AppSync endpoint URL and API key. You can find those values from the output of yarn deploy-dev in the Serverless project (one directory up from this web app directory). This environment variables file should not be version controlled.

Configure AppSync and VueApollo

Create the appsync.js source file in the root src directory of the Vue.js web app project. Add the following code to this newappsync.js source file. Notice that I am not using the aws-export.js file from the documentation link above. I am going to take advantage of the excellent environment variables support in Vue CLI and use that instead. Much easier to control secrets for multiple environments with the environment variables support in Vue CLI.

Update main.js

Add the following code to main.js source file in thesrc directory. This change injects the ApolloProvider into the root Vue component so all child Vue components have access to the Apollo Client.

Create the first GraphQL query

Create the graphql directory in thesrc directory. Now create the src/graphql/SimpleMovingAverageAnalyticQuery.js source file and paste the following into it:

Edit the Home.vue component

Edit the src/views/Home.vue source file to match the following source listing. You can learn more about the apollo option and its properties here.

Testing the connection between Vue.js and AWS AppSync

(Re)start your Vue CLI dev server using yarn serve. Navigate to http://localhost:8080/. Bring up the dev tools in your web browser and look in the Network tab. You should see a fetch call to POST /graphql and it should return a 200 HTTP status code. In the request payload, you should see the following.

Viewing the POST /graphql invocation in Chrome Dev Tools

You can see that POST request sends the GraphQL query as a JSON payload (this is being done by AWS AppSync client). A JSON payload is returned in the response. We can see the JSON response from the Preview tab.

The Preview tab for the POST /graphql invocation in Chrome Dev Tools

Conclusion

The first AppSync-backed GraphQL query is up and running in our Vue.js app. I’m not using the data yet, but the next blog post charts the data using Chart.js and vue-chartjs.