Start subscriptions for notifications

backend/src/middleware/notifications/notificationsMiddleware.js

@@ -1,5 +1,9 @@
 import extractMentionedUsers from './mentions/extractMentionedUsers'
 import { validateNotifyUsers } from '../validation/validationMiddleware'
+import { PubSub } from 'apollo-server'
+
+const pubsub = new PubSub()
+const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
 
 const handleContentDataOfPost = async (resolve, root, args, context, resolveInfo) => {
   const idsOfUsers = extractMentionedUsers(args.content)
@@ -74,12 +78,18 @@ const notifyUsersOfMention = async (label, id, idsOfUsers, reason, context) => {
     WHEN notification.createdAt IS NULL
     THEN notification END ).createdAt = toString(datetime())
     SET notification.updatedAt = toString(datetime())
+    RETURN notification
   `
   const session = context.driver.session()
+  const writeTxResultPromise = session.writeTransaction(async transaction => {
+    const notificationTransactionResponse = await transaction.run(mentionedCypher, { id, idsOfUsers, reason })
+    return notificationTransactionResponse.records.map(record => record.get('notification').properties)
+  })
   try {
-    await session.writeTransaction(transaction => {
-      return transaction.run(mentionedCypher, { id, idsOfUsers, reason })
-    })
+    const [notification] = await writeTxResultPromise
+    return pubsub.publish(NOTIFICATION_ADDED, { notificationAdded: notification })
+  } catch (error) {
+    throw new Error(error)
   } finally {
     session.close()
   }

backend/src/schema/resolvers/notifications.js

@@ -1,4 +1,8 @@
 import log from './helpers/databaseLogger'
+import { PubSub } from 'apollo-server'
+
+const pubsub = new PubSub()
+const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
 
 const resourceTypes = ['Post', 'Comment']
 
@@ -16,6 +20,11 @@ const transformReturnType = record => {
 }
 
 export default {
+  Subscription: {
+    notificationAdded: {
+      subscribe: () => pubsub.asyncIterator([NOTIFICATION_ADDED]),
+    },
+  },
   Query: {
     notifications: async (_parent, args, context, _resolveInfo) => {
       const { user: currentUser } = context

backend/src/schema/resolvers/posts.js

@@ -7,8 +7,8 @@ import Resolver from './helpers/Resolver'
 import { filterForMutedUsers } from './helpers/filterForMutedUsers'
 import { PubSub } from 'apollo-server'
 
-const pubsub = new PubSub();
-const POST_ADDED = 'POST_ADDED';
+const pubsub = new PubSub()
+const POST_ADDED = 'POST_ADDED'
 
 
 const maintainPinnedPosts = params => {
@@ -113,7 +113,7 @@ export default {
       })
       try {
         const [post] = await writeTxResultPromise
-        pubsub.publish(POST_ADDED, { postAdded: post });
+        pubsub.publish(POST_ADDED, { postAdded: post })
         return post
       } catch (e) {
         if (e.code === 'Neo.ClientError.Schema.ConstraintValidationFailed')

backend/src/schema/types/schema.gql

@@ -1,7 +1,3 @@
-type Subscription {
-  postAdded: Post
-}
-
 type Mutation {
   # Get a JWT Token for the given Email and password
   login(email: String!, password: String!): String!

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

@@ -0,0 +1,4 @@
+type Subscription {
+  postAdded: Post
+  notificationAdded: NOTIFIED
+}

backend/src/server.js

@@ -42,7 +42,6 @@ const createServer = options => {
     schema: middleware(schema),
     subscriptions: {
       onConnect: (connectionParams, webSocket) => {
-        console.log('connectionParams', connectionParams)
         return getContext(connectionParams)
       },
     },

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -22,13 +22,13 @@
 </template>
 
 <script>
+import unionBy from 'lodash/unionBy'
 import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
-import unionBy from 'lodash/unionBy'
-
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import Dropdown from '~/components/Dropdown'
 import NotificationList from '../NotificationList/NotificationList'
+import { notificationAdded } from '~/graphql/User'
 
 export default {
   name: 'NotificationMenu',
@@ -77,11 +77,18 @@ export default {
           orderBy: 'updatedAt_desc',
         }
       },
-      pollInterval: NOTIFICATIONS_POLL_INTERVAL,
-      update({ notifications }) {
-        return unionBy(notifications, this.notifications, notification => notification.id).sort(
-          (a, b) => new Date(b.createdAt) - new Date(a.createdAt),
-        )
+      // pollInterval: NOTIFICATIONS_POLL_INTERVAL,
+      // update({ notifications }) {
+      //   return unionBy(notifications, this.notifications, notification => notification.id).sort(
+      //     (a, b) => new Date(b.createdAt) - new Date(a.createdAt),
+      //   )
+      // },
+      subscribeToMore: {
+        document: notificationAdded(),
+        updateQuery: (previousResult, { subscriptionData }) => {
+          const { data: { notificationAdded: newNotification } } = subscriptionData
+          return { notifications: [newNotification, ...previousResult.notifications] }
+        },
       },
       error(error) {
         this.$toast.error(error.message)

webapp/graphql/User.js

@@ -130,6 +130,43 @@ export const markAsReadMutation = i18n => {
   `
 }
 
+export const notificationAdded = () => {
+  return gql`
+    ${userFragment}
+    ${commentFragment}
+    ${postFragment}
+
+    subscription notifications {
+      notificationAdded {
+        id
+        read
+        reason
+        createdAt
+        from {
+          __typename
+          ... on Post {
+            ...post
+            author {
+              ...user
+            }
+          }
+          ... on Comment {
+            ...comment
+            author {
+              ...user
+            }
+            post {
+              ...post
+              author {
+                ...user
+              }
+            }
+          }
+        }
+      }
+    }
+  `
+}
 export const followUserMutation = i18n => {
   return gql`
     ${userFragment}

webapp/pages/index.vue

@@ -244,13 +244,9 @@ export default {
             }
           }
         }`,
-        // Mutate the previous result
         updateQuery: (previousResult, { subscriptionData }) => {
-          console.log('previousResult', previousResult)
-          console.log('subscriptionData', subscriptionData)
           const { data: { postAdded: newPost } } = subscriptionData
           return { Post: [newPost, ...previousResult.Post] }
-          // Here, return the new result from the previous with the new data
         },
       }
     },