1 files changed, 24 insertions, 19 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
index 2387fe64b8f..78d12ac113b 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue
@@ -1,6 +1,5 @@
 <script>
-import produce from 'immer';
-import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issues/constants';
 import { assigneesQueries } from '~/sidebar/constants';
 
@@ -17,10 +16,6 @@ export default {
       type: String,
       required: true,
     },
-    issuableId: {
-      type: Number,
-      required: true,
-    },
     queryVariables: {
       type: Object,
       required: true,
@@ -30,6 +25,9 @@ export default {
     issuableClass() {
       return Object.keys(IssuableType).find((key) => IssuableType[key] === this.issuableType);
     },
+    issuableId() {
+      return this.issuable?.id;
+    },
   },
   apollo: {
     issuable: {
@@ -48,29 +46,36 @@ export default {
         },
         variables() {
           return {
-            issuableId: convertToGraphQLId(this.issuableClass, this.issuableId),
+            issuableId: this.issuableId,
           };
         },
-        updateQuery(prev, { subscriptionData }) {
-          if (prev && subscriptionData?.data?.issuableAssigneesUpdated) {
-            const data = produce(prev, (draftData) => {
-              draftData.workspace.issuable.assignees.nodes =
-                subscriptionData.data.issuableAssigneesUpdated.assignees.nodes;
-            });
+        skip() {
+          return !this.issuableId;
+        },
+        updateQuery(
+          _,
+          {
+            subscriptionData: {
+              data: { issuableAssigneesUpdated },
+            },
+          },
+        ) {
+          if (issuableAssigneesUpdated) {
+            const {
+              id,
+              assignees: { nodes },
+            } = issuableAssigneesUpdated;
             if (this.mediator) {
-              this.handleFetchResult(data);
+              this.handleFetchResult(nodes);
             }
-            return data;
+            this.$emit('assigneesUpdated', { id, assignees: nodes });
           }
-          return prev;
         },
       },
     },
   },
   methods: {
-    handleFetchResult(data) {
-      const { nodes } = data.workspace.issuable.assignees;
-
+    handleFetchResult(nodes) {
       const assignees = nodes.map((n) => ({
         ...n,
         avatar_url: n.avatarUrl,