unread rooms query in chat notification

webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue

@@ -8,18 +8,34 @@
         placement: 'bottom-start',
       }"
     >
-      <counter-icon icon="chat-bubble" :count="1" danger />
+      <counter-icon icon="chat-bubble" :count="count" danger />
     </base-button>
   </nuxt-link>
 </template>
 
 <script>
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import { unreadRoomsQuery } from '~/graphql/Rooms'
 
 export default {
   name: 'ChatNotificationMenu',
   components: {
     CounterIcon,
   },
+  data() {
+    return {
+      count: 0,
+    }
+  },
+  apollo: {
+    UnreadRooms: {
+      query() {
+        return unreadRoomsQuery()
+      },
+      update({ UnreadRooms }) {
+        this.count = UnreadRooms
+      },
+    },
+  },
 }
 </script>

webapp/graphql/Rooms.js

@@ -27,3 +27,11 @@ export const createRoom = () => gql`
     }
   }
 `
+
+export const unreadRoomsQuery = () => {
+  return gql`
+    query {
+      UnreadRooms
+    }
+  `
+}