implement chatMessageAdded subscription

backend/src/schema/resolvers/messages.ts

@@ -1,9 +1,21 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import Resolver from './helpers/Resolver'
 import RoomResolver from './rooms'
-import { pubsub, ROOM_COUNT_UPDATED } from '../../server'
+import { pubsub, ROOM_COUNT_UPDATED, CHAT_MESSAGE_ADDED } from '../../server'
+import { withFilter } from 'graphql-subscriptions'
 
 export default {
+  Subscription: {
+    chatMessageAdded: {
+      subscribe: withFilter(
+        () => pubsub.asyncIterator(CHAT_MESSAGE_ADDED),
+        (payload, variables) => {
+          console.log('chatMessageAdded', payload, variables)
+          return true // payload.user.id === variables.userId
+        },
+      ),
+    },
+  },
   Query: {
     Message: async (object, params, context, resolveInfo) => {
       const { roomId } = params
@@ -91,6 +103,10 @@ export default {
 
         // send subscriptions
         await pubsub.publish(ROOM_COUNT_UPDATED, { roomCountUpdated, user: message.otherUser })
+        await pubsub.publish(CHAT_MESSAGE_ADDED, {
+          chatMessageAdded: message,
+          user: message.otherUser,
+        })
 
         return message
       })

backend/src/schema/types/type/Message.gql

@@ -45,3 +45,7 @@ type Query {
     orderBy: [_MessageOrdering]
   ): [Message]
 }
+
+type Subscription {
+  chatMessageAdded(userId: ID!): Message
+}

backend/src/server.ts

@@ -14,7 +14,7 @@ import bodyParser from 'body-parser'
 import { graphqlUploadExpress } from 'graphql-upload'
 
 export const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
-// export const CHAT_MESSAGE_ADDED = 'CHAT_MESSAGE_ADDED'
+export const CHAT_MESSAGE_ADDED = 'CHAT_MESSAGE_ADDED'
 export const ROOM_COUNT_UPDATED = 'ROOM_COUNT_UPDATED'
 const { REDIS_DOMAIN, REDIS_PORT, REDIS_PASSWORD } = CONFIG
 let prodPubsub, devPubsub

webapp/components/Chat/Chat.vue

@@ -61,7 +61,7 @@
 
 <script>
 import { roomQuery, createRoom } from '~/graphql/Rooms'
-import { messageQuery, createMessageMutation } from '~/graphql/Messages'
+import { messageQuery, createMessageMutation, chatMessageAdded } from '~/graphql/Messages'
 import chatStyle from '~/constants/chat.js'
 import { mapGetters } from 'vuex'
 
@@ -182,6 +182,22 @@ export default {
     } else {
       this.fetchRooms()
     }
+
+    // Subscriptions
+    const observer = this.$apollo.subscribe({
+      query: chatMessageAdded(),
+      variables: {
+        userId: this.currentUser.id,
+      },
+    })
+
+    observer.subscribe({
+      next: this.chatMessageAdded,
+      error (error) {
+        console.error(error)
+      },
+    })
+
   },
   computed: {
     ...mapGetters({
@@ -269,6 +285,17 @@ export default {
       }
     },
 
+    async chatMessageAdded({data}){
+      console.log(data)
+      if(data.chatMessageAdded.room.id === this.selectedRoom?.id){
+        this.fetchMessages({ room: this.selectedRoom}, { refetch: true})
+      } else {
+        // TODO this might be optimized selectively (first page vs rest)
+        this.rooms = []
+        this.fetchRooms()
+      }
+    },
+
     async sendMessage(message) {
       try {
         await this.$apollo.mutate({

webapp/graphql/Messages.js

@@ -33,3 +33,29 @@ export const createMessageMutation = () => {
     }
   `
 }
+
+export const chatMessageAdded = () => {
+  return gql`
+    subscription chatMessageAdded($userId: ID!) {
+      chatMessageAdded(userId: $userId){
+        #_id
+        id
+        # indexId
+        content
+        senderId
+        #author {
+        #  id
+        #}
+        #username
+        #avatar
+        #date
+        room {
+          id
+        }
+        saved
+        distributed
+        seen
+      }
+    }
+  `
+}