start with chat notifications

backend/src/schema/resolvers/messages.ts

@@ -1,7 +1,19 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import Resolver from './helpers/Resolver'
+import { withFilter } from 'graphql-subscriptions'
+import { pubsub, CHAT_MESSAGE_ADDED } from '../../server'
 
 export default {
+  Subscription: {
+    chatMessageAdded: {
+      subscribe: withFilter(
+        () => pubsub.asyncIterator(CHAT_MESSAGE_ADDED),
+        (payload, variables) => {
+          return payload.chatMessageAdded.senderId !== variables.userId
+        },
+      ),
+    },
+  },
   Query: {
     Message: async (object, params, context, resolveInfo) => {
       const { roomId } = params
@@ -72,7 +84,7 @@ export default {
             distributed: false,
             seen: false
           })-[:INSIDE]->(room)
-          RETURN message { .* }
+          RETURN message { .*, room: properties(room), senderId: currentUser.id }
         `
         const createMessageTxResponse = await transaction.run(createMessageCypher, {
           currentUserId,
@@ -82,6 +94,10 @@ export default {
         const [message] = await createMessageTxResponse.records.map((record) =>
           record.get('message'),
         )
+
+        // send subscriptions
+        await pubsub.publish(CHAT_MESSAGE_ADDED, { chatMessageAdded: message })
+
         return message
       })
       try {

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,6 +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'
 const { REDIS_DOMAIN, REDIS_PORT, REDIS_PASSWORD } = CONFIG
 let prodPubsub, devPubsub
 const options = {

webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue

@@ -14,8 +14,10 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import { unreadRoomsQuery } from '~/graphql/Rooms'
+import { chatMessageAdded } from '~/graphql/Messages'
 
 export default {
   name: 'ChatNotificationMenu',
@@ -27,6 +29,11 @@ export default {
       count: 0,
     }
   },
+  computed: {
+    ...mapGetters({
+      user: 'auth/user',
+    }),
+  },
   apollo: {
     UnreadRooms: {
       query() {
@@ -35,6 +42,18 @@ export default {
       update({ UnreadRooms }) {
         this.count = UnreadRooms
       },
+      subscribeToMore: {
+        document: chatMessageAdded(),
+        variables() {
+          return {
+            userId: this.user.id,
+          }
+        },
+        updateQuery: (previousResult, { subscriptionData }) => {
+          // TODO emit chat reload
+          return { UnreadRooms: previousResult.UnreadRooms + 1}
+        },
+      },
     },
   },
 }

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -146,6 +146,7 @@ export default {
           const {
             data: { notificationAdded: newNotification },
           } = subscriptionData
+
           return {
             notifications: unionBy(
               [newNotification],

webapp/graphql/Messages.js

@@ -27,3 +27,16 @@ export const createMessageMutation = () => {
     }
   `
 }
+
+export const chatMessageAdded = () => {
+  return gql`
+    subscription chatMessageAdded($userId: ID!) {
+      chatMessageAdded(userId: $userId) {
+        id
+        room {
+          id
+        }
+      }
+    }
+  `
+}