Set up Amplify DataStore

DataStore with Amplify

Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.

Goal

To setup and configure your application with Amplify DataStore and use it to persist data locally on a device.

Prerequisites

• Install Amplify CLI version 12.5.1 or later by running:

npm install -g @aws-amplify/cli

curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd

Setup local development environment

To get started, first create a new React app with vite using the following commands:

npm create vite@latest
✔ Project name: amplify-datastore
✔ Select a framework: › React
✔ Select a variant: › JavaScript

cd amplify-datastore

To use Amplify, you must first initialize it for use in your project. If you haven't already done so, run this command:

amplify init

The base structure for a DataStore app is created by adding a new GraphQL API to your app.

# For new APIs
amplify add api

# For existing APIs
amplify update api

The CLI will prompt you to configure your API. Select GraphQL as the API type and reply to the questions as shown below. Conflict detection is required when using DataStore to sync data with the cloud.

? Please select from one of the below mentioned services:
    `GraphQL`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Name`
? Provide API name:
    `BlogAppApi`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Authorization modes: API key (default, expiration time: 7 days from now)`
? Choose the default authorization type for the API
    `API key`
? Enter a description for the API key:
    `BlogAPIKey`
? After how many days from now the API key should expire (1-365):
    `365`
? Configure additional auth types?
    `No`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Conflict detection (required for DataStore): Disabled`
? Enable conflict detection?
    `Yes`
? Select the default resolution strategy
    `Auto Merge`
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
    `Continue`
? Choose a schema template
    `Single object with fields (e.g., “Todo” with ID, name, description)`

Next, install the Amplify library dependencies in your project by running:

npm install aws-amplify

Idiomatic persistence

DataStore relies on platform standard data structures to represent the data schema in an idiomatic way. The persistence language is composed by data types that satisfies the Model interface and operations defined by common verbs such as save, query and delete.

Data schema

The first step to create an app backed by a persistent datastore is to define a schema. DataStore uses GraphQL schema files as the definition of the application data model. The schema contains data types and relationships that represent the app's functionality.

Sample schema

For the next steps, let's start with a schema for a small blog application. Currently, it has only a single model. New types and constructs will be added to this base schema as more concepts are presented.

Open the schema.graphql file located by default at amplify/backend/{api_name}/ and define a model Post as follows.

type Post @model {
  id: ID!
  title: String!
  status: PostStatus!
  rating: Int
  content: String
}

enum PostStatus {
  ACTIVE
  INACTIVE
}

Now you will to convert the platform-agnostic schema.graphql into platform-specific data structures. DataStore relies on code generation to guarantee schemas are correctly converted to platform code.

Like the initial setup, models can be generated either using the IDE integration or Amplify CLI directly.

Code generation: Platform integration

When using npx amplify-app, an npm script named amplify-modelgen should be added to your package.json. You can generate model code with the following command.

npm run amplify-modelgen

The following files will be generated.

src/
|_ models/
   |_ index.d.ts
   |_ index.js
   |_ schema.d.ts
   |_ schema.js

Code generation: Amplify CLI

Models can also be generated using the Amplify CLI directly.

In your terminal, make sure you are in your project/root folder and execute the codegen command:

amplify codegen models

You can find the generated files at amplify/generated/models/.

Initialize Amplify DataStore

When the aws-amplify/datastore dependency is added to the project, the plugin is automatically initialized when you start using it.

Persistence operations

Now the application is ready to execute persistence operations. The data will be persisted to a local database, enabling offline-first use cases by default.

Even though a GraphQL API is already added to your project, the cloud synchronization will only be enabled when the API plugin is initialized and the backend provisioned. See the Next steps for more info.

Writing to the database

To write to the database, create an instance of the Post model and save it.

try {
  const post = await DataStore.save(
    new Post({
      title: 'My First Post'
    })
  );
  console.log('Post saved successfully!', post);
} catch (error) {
  console.log('Error saving post', error);
}

Reading from the database

To read from the database, the simplest approach is to query for all records of a given model type.

try {
  const posts = await DataStore.query(Post);
  console.log('Posts retrieved successfully!', JSON.stringify(posts, null, 2));
} catch (error) {
  console.log('Error retrieving posts', error);
}

Next steps

Congratulations! You’ve created and retrieved data from the local database. Check out the following links to see other Amplify DataStore use cases and advanced concepts:

• Write data
• Query data
• Model associations
• Cloud synchronization
• Clear local data