Create a cloud-enabled GraphQL API with AWS Amplify and Vue

In order to follow this post you will need a basic knowledge of GraphQL. You can learn the basics following this tutorial at graphql.org.

Introduction to AWS AppSync

AWS AppSync data-driven apps architecture overview

Setting up a new project with the Vue CLI

Creating a new GraphQL API

amplify add api
type Restaurant @model {
id: ID!
name: String!
description: String!
city: String!
}

Using your first GraphQL transform

GraphQL Transforms are implemented using custom GraphQL schema directives as defined in the GraphQL specification.

Pushing your GraphQL API to the cloud

amplify push
amplify console api

Testing your new GraphQL API

mutation createRestaurant {
createRestaurant(input: {
name: "Nobu"
description: "Great Sushi"
city: "New York"
}) {
id name description city
}
}
query listRestaurants {
listRestaurants {
items {
id
name
description
city
}
}
}
query searchRestaurants {
listRestaurants(filter: {
city: {
contains: "New York"
}
}) {
items {
id
name
description
city
}
}
}

Querying data with queries

<template>
<div v-for="restaurant of restaurants" :key="restaurant.id">
{{restaurant.name}}
</div>
</template>
<script>
import { API, graphqlOperation } from 'aws-amplify';
import { listRestaurants } from './graphql/queries';

export default {
name: 'app',
data() {
return {
restaurants: [],
}
},
created() {
this.getData();
},
methods: {
async getData() {
try {
const response = await API.graphql(graphqlOperation(listRestaurants));
this.restaurants = response.data.listRestaurants.items;
}
catch (error) {
console.log('Error loading restaurants...', error);
}
},
}
}
</script>
listRestaurants(filter: ModelRestaurantFilterInput, limit: Int, nextToken: String): ModelRestaurantConnectiontype ModelRestaurantConnection {
items: [Restaurant]
nextToken: String
}

Creating data with mutations

<template>
<div>
<form v-on:submit.prevent>
<div>
<label>Name: </label>
<input v-model='form.name' class='input' />
</div>
...
<button @click='createRestaurant' class='button'>Create</button>
</form>
</div>
</template>
<script>
import { createRestaurant } from './graphql/mutations';

export default {
name: 'app',
data() {
return {
form: { },
}
},
methods: {
async createRestaurant() {
const { name, description, city } = this.form
if (!name || !description || !city) return;

const restaurant = { name, description, city };
try {
const response = await API.graphql(graphqlOperation(createRestaurant, { input: restaurant }))
console.log('Item created!')
this.restaurants = [...this.restaurants, response.data.createRestaurant];
this.form = { name: '', description: '', city: '' };
} catch (error) {
console.log('Error creating restaurant...', error)
}
},
}
}
</script>
type Mutation {
createRestaurant(input: CreateRestaurantInput!): Restaurant
}input CreateRestaurantInput {
id: ID
name: String!
description: String!
city: String!
}

Adding real-time with subscriptions

import { onCreateRestaurant } from './graphql/subscriptions';

export default {
name: 'app',
created() {
//Subscribe to changes
API.graphql(graphqlOperation(onCreateRestaurant))
.subscribe((sourceData) => {
const newRestaurant = sourceData.value.data.onCreateRestaurant
if (newRestaurant) {
// skip our own mutations and duplicates
if (this.restaurants.some(r => r.id == newRestaurant.id)) return;
this.restaurants = [newRestaurant, ...this.restaurants];
}
});
},
}

Publishing your app via the AWS Amplify Console

git init
git remote add origin repo@repoofyourchoice.com:username/project-name.git
git add .git commit -m 'initial commit'git push origin master
AWS Amplify Console deployment steps.

Cleaning up cloud services

amplify delete

Conclusion

Thanks for reading!

My Name is Gerard Sans. I am a Developer Advocate at AWS Mobile working with AWS Amplify and AWS AppSync teams.

GraphQL is an open source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store