Page updated Jan 16, 2024

Example application

Example application

import React, { useEffect } from "react"; import logo from "./logo.svg"; import "./App.css"; import { Amplify } from 'aws-amplify' import { DataStore, Predicates } from "aws-amplify/datastore"; import { Post, PostStatus } from "./models"; // Use next two lines only if syncing with the cloud import amplifyconfig from "./amplifyconfiguration"; Amplify.configure(amplifyconfig); async function onCreate() { await DataStore.save( new Post({ title: `New title ${Date.now()}`, rating: Math.floor(Math.random() * (8 - 1) + 1), status: PostStatus.ACTIVE, }) ); } async function onDeleteAll() { await DataStore.delete(Post, Predicates.ALL); } async function onQuery() { const posts = await DataStore.query(Post, (c) => c.rating.gt(4)); console.log(posts); } function App() { useEffect(() => { const subscription = DataStore.observe(Post).subscribe((msg) => { console.log(msg.model, msg.opType, msg.element); }); return () => subscription.unsubscribe(); }, []); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <div> <input type="button" value="NEW" onClick={onCreate} /> <input type="button" value="DELETE ALL" onClick={onDeleteAll} /> <input type="button" value="QUERY rating > 4" onClick={onQuery} /> </div> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;
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;
import { Component, OnInit, OnDestroy } from '@angular/core'; import { DataStore, Predicates } from "aws-amplify/datastore"; import { Post, PostStatus } from "./models"; @Component({ selector: 'app-root', template: ` <div class="app-header"> <button type="button" (click)="onCreate()">NEW</button> <button type="button" (click)="onDeleteAll()">DELETE ALL</button> <button type="button" (click)="onQuery()">QUERY rating > 4</button> </div> `}) export class AppComponent implements OnInit, OnDestroy { subscription; ngOnInit() { //Subscribe to changes this.subscription = DataStore.observe<Post>(Post).subscribe((msg) => { console.log(msg.model, msg.opType, msg.element); }); } ngOnDestroy() { if (!this.subscription) return; this.subscription.unsubscribe(); } public async loadPosts() { let posts = await DataStore.query(Post, (c) => c.rating.gt(4)); console.log(posts); } public onCreate() { DataStore.save( new Post({ title: `New title ${Date.now()}`, rating: Math.floor(Math.random() * (8 - 1) + 1), status: PostStatus.ACTIVE, }) ); } public onDeleteAll() { DataStore.delete(Post, Predicates.ALL); } }
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}
<template> <div id="app"> <div class="app-body"> <button type="button" @click="onCreate" >NEW</button> <button type="button" @click="onDeleteAll" >DELETE ALL</button> <button type="button" @click="onQuery" >QUERY rating > 4</button> </div> </div> </template> <script> import { DataStore, Predicates } from "aws-amplify/datastore"; import { Post, PostStatus } from "./models"; export default { name: "app", data() { return { subscription: undefined, }; }, created() { //Subscribe to changes this.subscription = DataStore.observe(Post).subscribe(msg => { console.log(msg.model, msg.opType, msg.element); }); }, destroyed() { if (!this.subscription) return; this.subscription.unsubscribe(); }, methods: { async onQuery() { let posts = await DataStore.query(Post, (c) => c.rating.gt(4)); console.log(posts); }, onCreate() { DataStore.save( new Post({ title: `New title ${Date.now()}`, rating: Math.floor(Math.random() * (8 - 1) + 1), status: PostStatus.ACTIVE, }) ); }, deleteAll() { DataStore.delete(Post, Predicates.ALL); } } }; </script>
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