From f64c5e9ba229524c0026bca2eecc3075705940e3 Mon Sep 17 00:00:00 2001
From: Shinji Matsumoto <smatsumoto@ciaoinc.jp>
Date: Wed, 6 May 2020 10:39:16 +0900
Subject: [PATCH] Add graphql subscription feature.

---
 src/notes/components/Notes.vue                | 20 ++++++++++-
 .../components/persist/graphqlActions.js      | 36 +++++++++++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/notes/components/Notes.vue b/src/notes/components/Notes.vue
index c23b749..53abbc2 100644
--- a/src/notes/components/Notes.vue
+++ b/src/notes/components/Notes.vue
@@ -40,7 +40,7 @@ import { JS } from 'fsts'
 
 import AmplifyStore from '../../store/store'
 
-import  { CreateTodo, ListTodos, UpdateTodo, DeleteTodo }  from './persist/graphqlActions';
+import  { CreateTodo, ListTodos, UpdateTodo, DeleteTodo, onCreateTodo, onUpdateTodo, onDeleteTodo }  from './persist/graphqlActions';
 
 import NotesTheme from '../NotesTheme'
 import Note from './Note'
@@ -67,6 +67,24 @@ export default {
   created() {
     this.logger = new this.$Amplify.Logger('NOTES_component')
     this.list();
+    this.$Amplify.API.graphql(this.$Amplify.graphqlOperation(onCreateTodo)).subscribe({
+      next: (data) => {
+        console.log(data);
+        this.list();
+      }
+    });
+    this.$Amplify.API.graphql(this.$Amplify.graphqlOperation(onUpdateTodo)).subscribe({
+      next: (data) => {
+        console.log(data);
+        this.list();
+      }
+    });
+    this.$Amplify.API.graphql(this.$Amplify.graphqlOperation(onDeleteTodo)).subscribe({
+      next: (data) => {
+        console.log(data);
+        this.list();
+      }
+    });
   },
   computed: {
     userId: function() { return AmplifyStore.state.userId }
diff --git a/src/notes/components/persist/graphqlActions.js b/src/notes/components/persist/graphqlActions.js
index 2da5dde..16cbe90 100644
--- a/src/notes/components/persist/graphqlActions.js
+++ b/src/notes/components/persist/graphqlActions.js
@@ -28,11 +28,43 @@ const DeleteTodo = `mutation DeleteTodo($id: ID!) {
     id
   }
 }
-`
+`;
+
+const onCreateTodo = /* GraphQL */ `
+  subscription OnCreateTodo {
+    onCreateTodo {
+      id
+      note
+      done
+    }
+  }
+`;
+const onUpdateTodo = /* GraphQL */ `
+  subscription OnUpdateTodo {
+    onUpdateTodo {
+      id
+      note
+      done
+    }
+  }
+`;
+const onDeleteTodo = /* GraphQL */ `
+  subscription OnDeleteTodo {
+    onDeleteTodo {
+      id
+      note
+      done
+    }
+  }
+`;
+
 
 export {
   CreateTodo,
   ListTodos,
   UpdateTodo,
-  DeleteTodo
+  DeleteTodo,
+  onCreateTodo,
+  onUpdateTodo,
+  onDeleteTodo,
 }