Skip to content
Amplify Datastore React Demo
JavaScript HTML CSS
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix issue that prevented the list of items to show at page load time Jan 14, 2020
.gitignore amplify instructions Nov 27, 2019 typo Dec 3, 2019
package-lock.json amplify instructions Nov 27, 2019
package.json amplify instructions Nov 27, 2019

Amplify Datastore - JS

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


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 {

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

# start the app 
npm run start


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.

You can’t perform that action at this time.