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.
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.
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
- Install the Vue CLI globally:
npm install -g @vue/cli
- 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.
- Change directory to the new web application directory:
- Start the web application locally:
- 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
.env file in the project root directory. Paste the following into the file:
.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
appsync.js source file in the root
src directory of the Vue.js web app project. Add the following code to this new
appsync.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.
Add the following code to
main.js source file in the
src 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
graphql directory in the
src directory. Now create the
src/graphql/SimpleMovingAverageAnalyticQuery.js source file and paste the following into it:
Edit the Home.vue component
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.
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 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.