Example application

1import React, { useEffect } from "react";
2import logo from "./logo.svg";
3import "./App.css";
4
5import { Amplify } from 'aws-amplify'
6import { DataStore, Predicates } from "aws-amplify/datastore";
7import { Post, PostStatus } from "./models";
8
9// Use next two lines only if syncing with the cloud
10import amplifyconfig from "./amplifyconfiguration";
11Amplify.configure(amplifyconfig);
12
13async function onCreate() {
14  await DataStore.save(
15    new Post({
16      title: `New title ${Date.now()}`,
17      rating: Math.floor(Math.random() * (8 - 1) + 1),
18      status: PostStatus.ACTIVE,
19    })
20  );
21}
22
23async function onDeleteAll() {
24  await DataStore.delete(Post, Predicates.ALL);
25}
26
27async function onQuery() {
28  const posts = await DataStore.query(Post, (c) => c.rating.gt(4));
29
30  console.log(posts);
31}
32
33function App() {
34  useEffect(() => {
35    const subscription = DataStore.observe(Post).subscribe((msg) => {
36      console.log(msg.model, msg.opType, msg.element);
37    });
38
39    return () => subscription.unsubscribe();
40  }, []);
41
42  return (
43    <div className="App">
44      <header className="App-header">
45        <img src={logo} className="App-logo" alt="logo" />
46        <div>
47          <input type="button" value="NEW" onClick={onCreate} />
48          <input type="button" value="DELETE ALL" onClick={onDeleteAll} />
49          <input type="button" value="QUERY rating > 4" onClick={onQuery} />
50        </div>
51        <p>
52          Edit <code>src/App.js</code> and save to reload.
53        </p>
54        <a
55          className="App-link"
56          href="https://reactjs.org"
57          target="_blank"
58          rel="noopener noreferrer"
59        >
60          Learn React
61        </a>
62      </header>
63    </div>
64  );
65}
66
67export default App;

1import { Component, OnInit, OnDestroy } from '@angular/core';
2import { DataStore, Predicates } from "aws-amplify/datastore";
3import { Post, PostStatus } from "./models";
4
5@Component({
6  selector: 'app-root',
7  template: `
8    <div class="app-header">
9      <button type="button" (click)="onCreate()">NEW</button>
10      <button type="button" (click)="onDeleteAll()">DELETE ALL</button>
11      <button type="button" (click)="onQuery()">QUERY rating > 4</button>
12    </div>
13`})
14export class AppComponent implements OnInit, OnDestroy {
15  subscription;
16
17  ngOnInit() {
18    //Subscribe to changes
19    this.subscription = DataStore.observe<Post>(Post).subscribe((msg) => {
20      console.log(msg.model, msg.opType, msg.element);
21    });
22  }
23
24  ngOnDestroy() {
25    if (!this.subscription) return;
26    this.subscription.unsubscribe();
27  }
28
29  public async loadPosts() {
30    let posts = await DataStore.query(Post, (c) => c.rating.gt(4));
31    console.log(posts);
32  }
33  
34  public onCreate() {
35    DataStore.save(
36      new Post({
37        title: `New title ${Date.now()}`,
38        rating: Math.floor(Math.random() * (8 - 1) + 1),
39        status: PostStatus.ACTIVE,
40      })
41    );
42  }
43
44  public onDeleteAll() {
45    DataStore.delete(Post, Predicates.ALL);
46  }
47}

1<template>
2  <div id="app">
3    <div class="app-body">
4      <button type="button" @click="onCreate" >NEW</button>
5      <button type="button" @click="onDeleteAll" >DELETE ALL</button>
6      <button type="button" @click="onQuery" >QUERY rating > 4</button>
7    </div>
8  </div>
9</template>
10
11<script>
12import { DataStore, Predicates } from "aws-amplify/datastore";
13import { Post, PostStatus } from "./models";
14
15export default {
16  name: "app",
17  data() {
18    return {
19      subscription: undefined,
20    };
21  },
22  created() {
23    //Subscribe to changes
24    this.subscription = DataStore.observe(Post).subscribe(msg => {
25      console.log(msg.model, msg.opType, msg.element);
26    });
27  },
28  destroyed() {
29    if (!this.subscription) return;
30    this.subscription.unsubscribe();
31  },
32  methods: {
33    async onQuery() {
34      let posts = await DataStore.query(Post, (c) => c.rating.gt(4));
35      console.log(posts);
36    },
37    onCreate() {
38      DataStore.save(
39        new Post({
40          title: `New title ${Date.now()}`,
41          rating: Math.floor(Math.random() * (8 - 1) + 1),
42          status: PostStatus.ACTIVE,
43        })
44      );
45    },
46    deleteAll() {
47      DataStore.delete(Post, Predicates.ALL);
48    }
49  }
50};
51</script>

API Reference

For the complete API documentation for DataStore, visit our API Reference

How it works

Customize primary keys