1 files changed, 29 insertions, 31 deletions

diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index 3721f224d5e..3bf4dfc7a99 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/app/assets/javascripts/issues/show/components/description.vue
@@ -11,8 +11,7 @@ import { TYPE_ISSUE } from '~/issues/constants';
 import { __, s__, sprintf } from '~/locale';
 import { getSortableDefaultOptions, isDragging } from '~/sortable/utils';
 import TaskList from '~/task_list';
-import addHierarchyChildMutation from '~/work_items/graphql/add_hierarchy_child.mutation.graphql';
-import removeHierarchyChildMutation from '~/work_items/graphql/remove_hierarchy_child.mutation.graphql';
+import { addHierarchyChild, removeHierarchyChild } from '~/work_items/graphql/cache_utils';
 import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
 import deleteWorkItemMutation from '~/work_items/graphql/delete_work_item.mutation.graphql';
 import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
@@ -78,6 +77,11 @@ export default {
       required: false,
       default: null,
     },
+    issueIid: {
+      type: Number,
+      required: false,
+      default: null,
+    },
     isUpdating: {
       type: Boolean,
       required: false,
@@ -330,29 +334,33 @@ export default {
     async createTask({ taskTitle, taskDescription, oldDescription }) {
       try {
         const { title, description } = extractTaskTitleAndDescription(taskTitle, taskDescription);
+
         const iterationInput = {
           iterationWidget: {
             iterationId: this.issueDetails.iteration?.id ?? null,
           },
         };
-        const input = {
-          confidential: this.issueDetails.confidential,
-          description,
-          hierarchyWidget: {
-            parentId: this.issueGid,
-          },
-          ...(this.hasIterationsFeature && iterationInput),
-          milestoneWidget: {
-            milestoneId: this.issueDetails.milestone?.id ?? null,
-          },
-          projectPath: this.fullPath,
-          title,
-          workItemTypeId: this.taskWorkItemTypeId,
-        };
 
         const { data } = await this.$apollo.mutate({
           mutation: createWorkItemMutation,
-          variables: { input },
+          variables: {
+            input: {
+              confidential: this.issueDetails.confidential,
+              description,
+              hierarchyWidget: {
+                parentId: this.issueGid,
+              },
+              ...(this.hasIterationsFeature && iterationInput),
+              milestoneWidget: {
+                milestoneId: this.issueDetails.milestone?.id ?? null,
+              },
+              projectPath: this.fullPath,
+              title,
+              workItemTypeId: this.taskWorkItemTypeId,
+            },
+          },
+          update: (cache, { data: { workItemCreate } }) =>
+            addHierarchyChild(cache, this.fullPath, String(this.issueIid), workItemCreate.workItem),
         });
 
         const { workItem, errors } = data.workItemCreate;
@@ -361,11 +369,6 @@ export default {
           throw new Error(errors);
         }
 
-        await this.$apollo.mutate({
-          mutation: addHierarchyChildMutation,
-          variables: { id: this.issueGid, workItem },
-        });
-
         this.$toast.show(s__('WorkItem|Converted to task'), {
           action: {
             text: s__('WorkItem|Undo'),
@@ -386,19 +389,14 @@ export default {
         const { data } = await this.$apollo.mutate({
           mutation: deleteWorkItemMutation,
           variables: { input: { id } },
+          update: (cache) =>
+            removeHierarchyChild(cache, this.fullPath, String(this.issueIid), { id }),
         });
 
-        const { errors } = data.workItemDelete;
-
-        if (errors?.length) {
-          throw new Error(errors);
+        if (data.workItemDelete.errors?.length) {
+          throw new Error(data.workItemDelete.errors);
         }
 
-        await this.$apollo.mutate({
-          mutation: removeHierarchyChildMutation,
-          variables: { id: this.issueGid, workItem: { id } },
-        });
-
         this.$toast.show(s__('WorkItem|Task reverted'));
       } catch (error) {
         this.showAlert(I18N_WORK_ITEM_ERROR_DELETING, error);