Example application
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 cloud10import 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 <a55 className="App-link"56 href="https://reactjs.org"57 target="_blank"58 rel="noopener noreferrer"59 >60 Learn React61 </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 changes19 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 changes24 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