Check response errors in runner_delete_button update callback

- Also adds test that "evict" isn't called if errors are present
- Also calls gc which is recommended in the apollo docs

app/assets/javascripts/runner/components/runner_delete_button.vue

@@ -115,36 +115,37 @@ export default {
       // should only change back if the operation fails.
       this.deleting = true;
       try {
-        const {
-          data: {
-            runnerDelete: { errors },
-          },
-        } = await this.$apollo.mutate({
+        await this.$apollo.mutate({
           mutation: runnerDeleteMutation,
           variables: {
             input: {
               id: this.runner.id,
             },
           },
-          update: (cache) => {
+          update: (cache, { data }) => {
+            const { errors } = data.runnerDelete;
+
+            if (errors?.length) {
+              this.onError(new Error(errors.join(' ')));
+              return;
+            }
+
+            this.$emit('deleted', {
+              message: sprintf(I18N_DELETED_TOAST, { name: this.runnerName }),
+            });
+
             // Remove deleted runner from the cache
             const cacheId = cache.identify(this.runner);
             cache.evict({ id: cacheId });
+            cache.gc();
           },
         });
-        if (errors && errors.length) {
-          throw new Error(errors.join(' '));
-        } else {
-          this.$emit('deleted', {
-            message: sprintf(I18N_DELETED_TOAST, { name: this.runnerName }),
-          });
-        }
       } catch (e) {
-        this.deleting = false;
         this.onError(e);
       }
     },
     onError(error) {
+      this.deleting = false;
       const { message } = error;
 
       createAlert({ message });

spec/frontend/runner/components/runner_delete_button_spec.js

@@ -29,6 +29,8 @@ jest.mock('~/runner/sentry_utils');
 
 describe('RunnerDeleteButton', () => {
   let wrapper;
+  let apolloProvider;
+  let apolloCache;
   let runnerDeleteHandler;
 
   const findBtn = () => wrapper.findComponent(GlButton);
@@ -43,13 +45,16 @@ describe('RunnerDeleteButton', () => {
     wrapper = mountFn(RunnerDeleteButton, {
       propsData: {
         runner: {
+          // We need typename so that cache.identify works
+          // eslint-disable-next-line no-underscore-dangle
+          __typename: mockRunner.__typename,
           id: mockRunner.id,
           shortSha: mockRunner.shortSha,
           ...runner,
         },
         ...propsData,
       },
-      apolloProvider: createMockApollo([[runnerDeleteMutation, runnerDeleteHandler]]),
+      apolloProvider,
       directives: {
         GlTooltip: createMockDirective(),
         GlModal: createMockDirective(),
@@ -72,6 +77,11 @@ describe('RunnerDeleteButton', () => {
         },
       });
     });
+    apolloProvider = createMockApollo([[runnerDeleteMutation, runnerDeleteHandler]]);
+    apolloCache = apolloProvider.defaultClient.cache;
+
+    jest.spyOn(apolloCache, 'evict');
+    jest.spyOn(apolloCache, 'gc');
 
     createComponent();
   });
@@ -149,6 +159,13 @@ describe('RunnerDeleteButton', () => {
       expect(deleted[0][0].message).toMatch(`#${mockRunnerId}`);
       expect(deleted[0][0].message).toMatch(`${mockRunner.shortSha}`);
     });
+
+    it('evicts runner from apollo cache', () => {
+      expect(apolloCache.evict).toHaveBeenCalledWith({
+        id: apolloCache.identify(mockRunner),
+      });
+      expect(apolloCache.gc).toHaveBeenCalled();
+    });
   });
 
   describe('When update fails', () => {
@@ -199,6 +216,11 @@ describe('RunnerDeleteButton', () => {
       it('error is shown to the user', () => {
         expect(createAlert).toHaveBeenCalledTimes(1);
       });
+
+      it('does not evict runner from apollo cache', () => {
+        expect(apolloCache.evict).not.toHaveBeenCalled();
+        expect(apolloCache.gc).not.toHaveBeenCalled();
+      });
     });
   });