This project will be using the vue-apollo and aws-appsync packages.

I am not a Vue developer. I’ve tried it when I’ve had the time to be learning something new, and I’ve really loved it so far, but really I specialize in React & React Native.

I was looking for some documentation about how to get up and running with AppSync & Vue & I realized there was none, so I decided to write a blog post to show others how it’s done!

If you haven’t already used it, AppSync is a service that allows you to quickly configure and deploy scalable serverless GraphQL APIs that also have features such as subscriptions (real time data) & multiple data sources among other things.

In this post, we’ll walk through wiring up a new AppSync API, attaching it to, and using it in a Vue application.

The application we will be building will need to demonstrate basic create, read, update, and delete operations.

Creating the API

The AppSync API will need to have the ability to create, read, update, and delete a list of items.

To create a new API, go to the AWS AppSync dashboard and create a new API.

Give the API the following schema:

type Task {

id: ID!

name: String!

completed: Boolean!

} type Query {

fetchTask(id: ID): Task

}

Click save, then click create resources.

Once you’ve created your resources around the above schema, download your AWS AppSync.json file, we will need it to configure the client. You can download it by scrolling to the bottom of the main page in your API and clicking on Download next to “2. Download the AWS AppSync.js config file”:

Save this file, we will need it once we have created our Vue app.

Creating the client

Next, we will use the Vue cli to create a new application using the vue router:

vue init webpack vue-graphql

Here are the exact options I chose:

Next, we need to change into the directory and install the dependencies we will need:

yarn add aws-appsync vue-apollo graphql-tag

Now, move the AppSync.js file you downloaded from the AppSync dashboard, and save it in the src directory of your project.

Next, we need to initialize the AppSync client. In src/main.js , update the entrypoint to the following:

// main.js

import Vue from 'vue'

import App from './App'

import router from './router' import AWSAppSyncClient from "aws-appsync"

import VueApollo from 'vue-apollo'

import appSyncConfig from './AppSync' const client = new AWSAppSyncClient({

url: appSyncConfig.graphqlEndpoint,

region: appSyncConfig.region,

auth: {

type: appSyncConfig.authenticationType,

apiKey: appSyncConfig.apiKey,

}

},{

defaultOptions: {

watchQuery: {

fetchPolicy: 'cache-and-network',

}

}

}) const appsyncProvider = new VueApollo({

defaultClient: client

}) Vue.config.productionTip = false

Vue.use(VueApollo) new Vue({

el: '#app',

router,

components: { App },

provide: appsyncProvider.provide(),

template: '<App/>'

})

Finally, we need to change our App.vue recognize that we do not want to render until the client has been rehydrated from local storage.

Because the AppSync client stores our data locally, making it available offline, we need to be sure the data is available to the application when it loads. To do this, we can wait for a promise called apollo.provider.defaultClient.hydrated , waiting for it to be fulfilled, before rendering our app. We provide a v-if statement that will show and hide the main entrypoint of our app depending on if the client is hydrated:

// App.js

<template>

<div id="app" v-if="hydrated">

<router-view/>

</div>

</template> <script>

export default {

name: 'App',

data: () => ({ hydrated: false }),

async mounted() {

await this.$apollo.provider.defaultClient.hydrated();

this.hydrated = true;

}

}

</script>

Once this is set up, run npm run dev and you should be ready to move to the next step!

Creating queries & mutations

Now that we have the base app up and running and our GraphQL backend ready to go, the next logical step may be to go ahead and begin writing the GraphQL queries that will correlate with our AppSync schema.

In the src directory, let’s go ahead and create a mutations and queries folder:

cd src

mkdir queries mutations

Next, let’s go ahead and create the following queries:

ListTasks.js

// queries/ListTasks.js import gql from 'graphql-tag'

export default gql`

query listTasks {

listTasks {

items {

id

name

completed

}

}

}

`

And the following mutations:

AddTask.js UpdateTask.js DeleteTask.js