Tutorial: Getting started with AWS AppSync [Hands On]


Written by - Mahnoor Malik
Reviewed by - Deepak Prasad

In this tutorial, you will learn about AWS AppSync. First, let's have a quick overview of AWS AppSync.

 

AWS AppSync Overview

  • AppSync is a managed service that uses GraphQL to make it easy for applications to get exactly the data they need.
  • You can build scalable applications with AppSync, including those requiring real-time updates, on a range of data sources such as NoSQL data stores, relational databases, HTTP APIs, and your custom data sources with AWS Lambda.
  • AppSync provides local data access for mobile and web apps when devices go offline, and data synchronization with customizable conflict resolution, when they are back online.
  • AWS AppSync lets you do rapid prototyping and development with GraphQL and makes it easy for applications to request data from the cloud. Using GraphQL you can iterate quickly during the prototyping and development process by specifying the data requirements of the application with simple code statements.
  • AWS AppSync lets you build real-time, collaborative mobile and web apps with shared data that is updated in real-time. For that, you just have to use GraphQL statements in your application code to specify which portions of your application data should be updated in real-time. Then, only the data needed is fetched which results in reducing message traffic and improving application performance and battery life.
  •  AWS AppSync supports seamless offline operation where application data is not only available offline, but users can add and update data locally as well. This lets you cache important data locally for offline use, and then synchronize with remote resources when the device reconnects.
  • You can set fine-grained permissions on GraphQL operations using Amazon AppSync by integrating it with Amazon Cognito and AWS Identity and Access Management to keep users and app data secure.

Now let's create an AWS AppSync API.

 

Create AWS AppSync API

  • First, log in to your AWS account and type AppSync in the Services search bar.
  • Then click on Create API.

Getting started with AWS AppSync

 

Start from a sample project

  • AWS AppSync provides you with multiple ways to create a GraphQL API.
  • You can customize your API by either creating your API with a wizard or building from scratch. You can also create an API by importing an existing DynamoDB table as a DataSource.
  • You can also start from a sample project that includes an Event App, Chat App, Tasks App, and Blog App.
  • Select Event App in which you will learn to build a basic AWS AppSync app for creating calendar events with user comments. Click on Start.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Create resources

  • Provide API name.
  • Note that each template will automatically deploy an API and provision IAM roles and DynamoDB tables on your behalf.
  • Click on Create.
  • Now let's have a look at the sample app.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Integrate with your app

  • The following screen tells about schema and Query editor.
  • It also shows the steps that are needed to integrate AppSync to your iOS, Android, JavaScript, TypeScript, or Flow application.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Schema

  • When creating an AppSync API, the first step is to design your schema using the GraphQL schema definition language (SDL). Note that GraphQL has three top-level operations: Query, Mutation, and Subscription.
  • A schema is made up of object, input, interface, union, enum, and scalar data types that are organized as a graph. Schema is used to define the shape of your API.
  • From the left pane, click on Schema to have a look at the default Schema of the sample app.
  • The Event App sample schema enables you to create an application where you can create events. Users of the application can also comment on the events. This app is a sample app that tells how to use GraphQL operations where the state is persisted in Amazon DynamoDB.
  • If you look at the schema, you have Comment type, CommentConnection type, Event type, EventConnection type, Mutation type, Query type, Subscription type each with different fields.
  • Resolvers are used to define the functionality of your API.  It is a function that transforms the GraphQL request to a format that your data source understands which is the DynamoDB table for the sample app. Resolvers have request and response templates that define the transformation and execution logic and have access to a context object.
  • Here you have resolvers for Event.comments, Mutation.createEvent, Mutation.deleteEvent, Mutation.commentOnEvent, Query.getEvent, and Query.listEvents.
  • In the top right, you can view the Create Resources button. It can be used to quickly create an Amazon DynamoDB table from a type in your schema. The new table is also automatically wired up with queries and mutations for common operations.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Data Sources

  • From the left pane, click on Data Sources.
  • Here you can see the DynamoDB tables that AppSync has created for you named AppSyncCommentTable and AppSyncEventTable.
  • Currently, they are empty, look into them after using the API.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Functions

  • From the left pane, click on Functions.
  • Currently, you do not have any functions in this API.
  • A function defines a single operation that you can use across pipeline resolvers.
  • They can be used to perform redundant logic throughout the GraphQL Proxy.
  • They have a request and a response mapping template, a data source name, and version.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Queries

  • From the left pane, click on Queries.
  • Here you can write, validate, and test GraphQL queries.

Tutorial: Getting started with AWS AppSync [Hands On]

 

  • Click the play button and select CreateEvent.
  • You can change the name, when, where and description while creating the event.
  • Now you can see the event created in the DynamoDB table for events.

Tutorial: Getting started with AWS AppSync [Hands On]

 

  • Click on the play button and select listEvents.
  • Here you can see the events created that include My First Event and My New Event.

Tutorial: Getting started with AWS AppSync [Hands On]

 

API Cache

  • From the left pane, click on Caching.
  • Here three options are available.
  • Choose None, if you don't need server-side caching. In this case, data sources will be called directly by resolvers.
  • Choose Full request caching, if you want that all requests from the same user should be cached and API calls should return responses from the cache.
  • Choose Per-resolver caching, if you want that only API calls requesting data from a specific operation or field defined in a resolver should return responses from the cache.
  • Note that for the above two cases you will have to define Instance type, Cache time to live (TTL), and Cache encryption-related configurations.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Settings

  • From the left pane, click on Settings.
  • Here you can configure your API and change authorization strategies.
  • You can view the API Details that include API URL, API ID, and API Key.
  • You can change your API name.
  • You can change your Authorization mode from API Key to AWS IAM, OpenID Connect, Amazon Cognito User Pool, and AWS Lambda.
  • You can also enable logging, Web application firewall, and X-Ray service for your API.
  • You can even create tags to group and filter your GraphQL APIs.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Monitoring

  • From the left pane, click on Monitoring.
  • Here you can monitor the performance of your GraphQL API related to Errors, Total requests, Latency, and Caching.
  • Note that AppSync integrates with Amazon CloudWatch to help you trace, monitor, and debug your GraphQL APIs.

Tutorial: Getting started with AWS AppSync [Hands On]

 

Conclusion

With this, we have come to the end of our tutorial. In this tutorial, we learned about AppSync API and did a quick tour of the sample event app that demonstrates how to use GraphQL operations where the state is persisted in Amazon DynamoDB.

Stay tuned for some more informative tutorials coming ahead. Feel free to leave any feedback in the comments section.

Happy learning!

 

References

What is AWS AppSync?

 

Views: 0

Mahnoor Malik

She is a Computer and Information Systems Engineer with a master's degree in Computer Networks and Systems Security. She excels in backend development, specializing in Java with the Spring Boot framework, and is proficient in other languages such as C, C++, and Python. You can reach out to us on Facebook page.

Categories AWS

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment