Amplify Datastore - JS

This is the sample code to illustrate the AWS News Blog post : Amplify Datastore - Simplify Development of Offline Apps with GraphQL

Prerequisite:

Install Amplify CLI

npm i -g @aws-amplify/cli

Create a new react app

npx create-react-app amplify-datastore --use-npm

cd amplify-datastore

Add DataStore to your app

Add support for datastore, it creates the API for you (there is no need to type amplify add api after this)

npx amplify-app

Add our GraphQL schema

echo "enum PostStatus {
  ACTIVE
  INACTIVE
}

type Post @model {
  id: ID!
  title: String!
  comments: [Comment] @connection(name: \"PostComments\")
  rating: Int!
  status: PostStatus!
}
type Comment @model {
  id: ID!
  content: String
  post: Post @connection(name: \"PostComments\")
}" > amplify/backend/api/amplifyDatasource/schema.graphql

Add dependencies

npm i @aws-amplify/core @aws-amplify/datastore 

Run modelgen

Model-Gen generates code to implement language specific model classes.

npm run amplify-modelgen

At this stage, you can already use the app in standalone mode. No AWS Account is required.

Create the cloud-based backend

npm run amplify-push

Implement & Start the App

# download a simple react app
curl -o src/App.js https://raw.githubusercontent.com/sebsto/amplify-datastore-js-e2e/master/src/App.js

# start the app 
npm run start

Cleanup

At the end of your test, you can delete the backend infrastructure

amplify delete

You might need to manually delete two Amazon S3 buckets created. In the AWS Console, search for the two buckets having datastore part of their name.