AppSync Demo
This example application demonstrates how to create a GraphQL endpoint with AWS AppSync that maps to your backend AWS services, like DynamoDB, and uses AWS Amplify in the client to securly interact with the services.
The client application is using React for views, Redux for state management, and Twitter Bootstrap for styles.
Getting Started
This example is based on the sample schema provided by AWS when creating an AppSync GraphQL API in the console. But it also shows how to define and provision the entire stack with AWS CloudFormation.
Create a GraphQL API using sample schema
AppSync has an option to use a sample schema when creating a GraphQL API. It provides a data model of Events and Comments, and includes type defintions, queries, mutations, subscriptions, data sources (DynamoDB tables), and resolvers.
- Browse to AppSync in your AWS console
- Click on “Create API”
- Choose a name for your API and select the option “Sample schema”
- Press “Create”
Note: This will deploy an API, provision DynamoDB tables, and create IAM roles on your behalf.
Run Client App Locally
The client app is a Javascript application that uses NPM and Webpack, so it is easy to install dependencies and start a local server.
- Edit config.json and enter the GraphQL endpoint URL and API key from the previous step
- Use npm to install dependencies and start the server
npm install
npm start
- Connect to your app at localhost:8080
Provision Your Own GraphQL API with CloudFormation
Use aws-cli to provision the infrastructure via CloudFormation:
aws cloudformation package \
--template-file './infrastructure/master.yml' \
--s3-bucket $TEMPLATE_BUCKET_NAME \
--output-template-file 'master-template-output.yml'
aws cloudformation deploy \
--template-file './master-template-output.yml' \
--capabilities 'CAPABILITY_IAM' \
--stack-name $STACK_NAME
Deploy the Client App
- Edit config.json and enter the GraphQL endpoint URL and API key, if you haven't done so already
- Use npm to build, and aws-cli to sync to S3
npm run build
aws s3 sync './dist' "s3://$SITE_BUCKET_NAME/" --acl 'public-read'
Resources
- Introducing the AWS Amplify GraphQL Client
- Deploy an AWS AppSync GraphQL API with CloudFormation
- How developers can authenticate and authorize users with AWS AppSync
More
Check out the users branch for a demonstration of authentication and authorization using AWS Cognito.