GraphQL API using AWS AppSync and AWS Amplify

In this blog I will explain how using AWS AppSync and AWS Amplify you can faster your application development by letting you create a flexible API to securely access and combine data from the data sources of Amazon DynamoDB and help in deploying them in AWS.

The example scenario: We need to develop a web app to store and fetch data from DynamoDB . In an traditional architecture we need the following components.

With AppSync architecture the components required :

GraphQL API sample reference architecture

Using the above architecture , we will see how to create AppSync API using GraphQL to connect to a Amazon DynamoDB to write and read data . Later we will use AWS Amplify to develop a sample react APP to create an entry to Dynamo DB table and deploy the app in AWS using AWS Amplify.

The key components used part of this sample:

GraphQL: GraphQL is a query language for APIs and a runtime for application programming interfaces (APIs) that priorities giving clients exactly the data they request.API developers use GraphQL to create a schema to describe all the possible data that clients can query through that service.

Schema : define the list of types and operations that define the data that a GraphQL API can provide , that define how the data will be queried.

Type defined the type of data such as integer , string

A Sample schema for a type called Catalog :

type Catalog {
 id: ID!
 name: String!
 description: String
}

Resolver : The API developer attaches each field in a schema to a function called a resolver. During execution, the resolver is called to produce the value.

AWS AppSync: AWS AppSync is a fully managed GraphQL API layer from AWS . This allows developers to build GraphQL APIs without much of the usual work; it handles the parsing and resolution of requests as well as connecting to other AWS services like AWS Lambda, Amazon Dynamo DB and RDS , and HTTP APIs to gather backend data for the API.It gives an HTTPS endpoint

Resolver: this is a transformation written in velocity template language ( VTL) for matching the output of the schema

Create an AppSync API :

We will create an AppSync API to create new entry in the Amazon Dynamo DB and fetch item from the DB , the following steps we will follow to create the API.

Create the DynamoDB table : We will create a Dynamo DB table called Catalog with id as partition key.

AWS IAM role : Dynamo DB IAM role for read and write to the Dynamo DB , this role will be attached to the AppSync API. Amazon CloudWatch log role to log the details from the AppSync API

Create an APP Sync API from the console named CatalogAPI

Create a Schema

Create a Data source

Connectivity to the DynamoDB : we will use Velocity Template Language(VTL) to translate GraphQL requests from clients into a request to the Catalog DB. Then it reverses the process to translate the data source response back into a GraphQL response.

In the above example the resolver takes the input variable in the context , the key value is set by an autoid and the attributeValues will be selected from the input json document

Similarly we can set the queries resolver as shown below

To test this API , we can write queries in the console to test this , I have shown two queries which can be executed from AppSync console of Queries option , you can see from the queries we have executed a mutation which has an input values defined by the schema and the return value on the right hand side

In the below sample , the fetch query executed with the id and this return the item.

AWS Amplify:AWS Amplify is a full-suite platform developed to aid web and mobile developers in building full-stack and scalable applications operated by AWS. Using it, developers can rapidly setup, test, launch, and scale production ready applications with minimal time spent focusing on the details.We will deploy a React App using AWS Amplify and call the AWS AppSync API from the App.

As a prerequisite we need to install AWS Amplify CLI , the below command can be used for the same.

npm install -g @aws-amplify/cli

create a sample react application called catalog , you can use the below command to create an application :

npx create-react-app catalog

Navigate to the Project root folder of catalog and run the below command:

amplify init

This will ask you the configuration details of AWS configuration , region etc which will be used for deployment of the application:

Add the codegen category of the project :

amplify add codegen - apiId <<AWSAppSyncapiid>>

This will automatically generate GraphQL documents (queries, mutations, and subscriptions) and generate for the project .

For demo purpose we will call the mutation query on opening the application .

the following code can be tested from the App.js

import { Amplify } from 'aws-amplify';
import amplifyConfig from './aws-exports';
import { API, graphqlOperation } from 'aws-amplify';
import { createItem } from './/graphql/mutations';
Amplify.configure(amplifyConfig);
const item = {
 name: 'book 2',
  description: 'Book category is Non-fiction'
}
const update = await API.graphql(
            graphqlOperation(
                createItem,
                {
                    input: item,
                },
            ),
        )
        .then((res) => res)
        .catch((error) => console.log('error, creating user', error));
console.log('update', update);

Hosting the App and publish this

amplify hosting add 
amplify publish

This update the resources in cloudformation , pushes API , CDN , build the react app and publishes static content to S3 . The output will gives the cloudfront output and that can be tested to see the entry in the backend table.

Conclusion: AWS AppSync simplifies application development by helping to create flexible API to securely access data from AWS , with AWS Amplify it increases the speed and agility of the development and deployment of the application.