diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index dbfbd35b9b68a0ff0dd54f4979f3bc2d94844b07..185037208149af4025975663a57b70ca22ff2385 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -2,6 +2,11 @@ import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { stateToComponentMap as classStateMap, stateKey } from './stores/state_maps';
 
+export const FOUR_MINUTES_IN_MS = 1000 * 60 * 4;
+
+export const STATE_QUERY_POLLING_INTERVAL_DEFAULT = 5000;
+export const STATE_QUERY_POLLING_INTERVAL_BACKOFF = 2;
+
 export const SUCCESS = 'success';
 export const WARNING = 'warning';
 export const INFO = 'info';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 8867478654ace42454023e134573925f0c225e0c..bbad2c1322031b0e7521f5a9ef76d76519244b50 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -1,5 +1,5 @@
 <script>
-import { isEmpty } from 'lodash';
+import { isEmpty, clamp } from 'lodash';
 import {
   registerExtension,
   registeredExtensions,
@@ -10,7 +10,6 @@ import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_wid
 import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store';
 import { stateToComponentMap as classState } from 'ee_else_ce/vue_merge_request_widget/stores/state_maps';
 import { createAlert } from '~/alert';
-import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import notify from '~/lib/utils/notify';
 import { sprintf, s__, __ } from '~/locale';
 import Project from '~/pages/projects/project';
@@ -44,7 +43,13 @@ import UnresolvedDiscussionsState from './components/states/unresolved_discussio
 import WorkInProgressState from './components/states/work_in_progress.vue';
 import ExtensionsContainer from './components/extensions/container';
 import WidgetContainer from './components/widget/app.vue';
-import { STATE_MACHINE, stateToComponentMap } from './constants';
+import {
+  STATE_MACHINE,
+  stateToComponentMap,
+  STATE_QUERY_POLLING_INTERVAL_DEFAULT,
+  STATE_QUERY_POLLING_INTERVAL_BACKOFF,
+  FOUR_MINUTES_IN_MS,
+} from './constants';
 import eventHub from './event_hub';
 import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables';
 import getStateQuery from './queries/get_state.query.graphql';
@@ -99,6 +104,7 @@ export default {
   apollo: {
     state: {
       query: getStateQuery,
+      notifyOnNetworkStatusChange: true,
       manual: true,
       skip() {
         return !this.mr;
@@ -106,10 +112,19 @@ export default {
       variables() {
         return this.mergeRequestQueryVariables;
       },
-      result({ data: { project } }) {
-        if (project) {
-          this.mr.setGraphqlData(project);
-          this.loading = false;
+      pollInterval() {
+        return this.pollInterval;
+      },
+      result(response) {
+        if (!response.loading) {
+          this.pollInterval = this.apolloStateQueryPollingInterval;
+
+          if (response.data?.project) {
+            this.mr.setGraphqlData(response.data.project);
+            this.loading = false;
+          }
+        } else {
+          this.checkStatus(undefined, undefined, false);
         }
       },
       subscribeToMore: {
@@ -158,9 +173,27 @@ export default {
       loading: true,
       recomputeComponentName: 0,
       issuableId: false,
+      startingPollInterval: STATE_QUERY_POLLING_INTERVAL_DEFAULT,
+      pollInterval: STATE_QUERY_POLLING_INTERVAL_DEFAULT,
     };
   },
   computed: {
+    apolloStateQueryMaxPollingInterval() {
+      return this.startingPollInterval + FOUR_MINUTES_IN_MS;
+    },
+    apolloStateQueryPollingInterval() {
+      if (this.startingPollInterval < 0) {
+        return 0;
+      }
+
+      const unboundedInterval = STATE_QUERY_POLLING_INTERVAL_BACKOFF * this.pollInterval;
+
+      return clamp(
+        unboundedInterval,
+        this.startingPollInterval,
+        this.apolloStateQueryMaxPollingInterval,
+      );
+    },
     shouldRenderApprovals() {
       return this.mr.state !== 'nothingToMerge';
     },
@@ -284,7 +317,8 @@ export default {
   mounted() {
     MRWidgetService.fetchInitialData()
       .then(({ data, headers }) => {
-        this.startingPollInterval = Number(headers['POLL-INTERVAL']);
+        this.startingPollInterval =
+          Number(headers['POLL-INTERVAL']) || STATE_QUERY_POLLING_INTERVAL_DEFAULT;
         this.initWidget(data);
       })
       .catch(() =>
@@ -295,9 +329,6 @@ export default {
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
-    if (this.pollingInterval) {
-      this.pollingInterval.destroy();
-    }
 
     if (this.deploymentsInterval) {
       this.deploymentsInterval.destroy();
@@ -332,7 +363,6 @@ export default {
         this.initPostMergeDeploymentsPolling();
       }
 
-      this.initPolling();
       this.bindEventHubListeners();
       eventHub.$on('mr.discussion.updated', this.checkStatus);
 
@@ -363,8 +393,10 @@ export default {
     createService(store) {
       return new MRWidgetService(this.getServiceEndpoints(store));
     },
-    checkStatus(cb, isRebased) {
-      this.$apollo.queries.state.refetch();
+    checkStatus(cb, isRebased, refetch = true) {
+      if (refetch) {
+        this.$apollo.queries.state.refetch();
+      }
 
       return this.service
         .checkStatus()
@@ -389,17 +421,6 @@ export default {
       }
       return Promise.resolve();
     },
-    initPolling() {
-      if (this.startingPollInterval <= 0) return;
-
-      this.pollingInterval = new SmartInterval({
-        callback: this.checkStatus,
-        startingInterval: this.startingPollInterval,
-        maxInterval: this.startingPollInterval + secondsToMilliseconds(4 * 60),
-        hiddenInterval: secondsToMilliseconds(6 * 60),
-        incrementByFactorOf: 2,
-      });
-    },
     initDeploymentsPolling() {
       this.deploymentsInterval = this.deploymentsPoll(this.fetchPreMergeDeployments);
     },
@@ -476,10 +497,10 @@ export default {
       notify.notifyMe(title, message, this.mr.gitlabLogo);
     },
     resumePolling() {
-      this.pollingInterval?.resume();
+      this.$apollo.queries.state.startPolling(this.pollInterval);
     },
     stopPolling() {
-      this.pollingInterval?.stopTimer();
+      this.$apollo.queries.state.stopPolling();
     },
     bindEventHubListeners() {
       eventHub.$on('MRWidgetUpdateRequested', (cb) => {
diff --git a/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js b/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
index 171ebbe82791867efbfda7252d501caae1219a73..43ce9b77cd33a83f7729b0fcc812f410ee28a7ca 100644
--- a/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
@@ -1,5 +1,5 @@
 import { GlBadge, GlLink, GlIcon, GlButton, GlDropdown } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -21,6 +21,7 @@ import {
   registerExtension,
   registeredExtensions,
 } from '~/vue_merge_request_widget/components/extensions';
+import { STATE_QUERY_POLLING_INTERVAL_BACKOFF } from '~/vue_merge_request_widget/constants';
 import { SUCCESS } from '~/vue_merge_request_widget/components/deployment/constants';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import MrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
@@ -62,6 +63,8 @@ jest.mock('@sentry/browser', () => ({
 Vue.use(VueApollo);
 
 describe('MrWidgetOptions', () => {
+  let stateQueryHandler;
+  let queryResponse;
   let wrapper;
   let mock;
 
@@ -91,32 +94,36 @@ describe('MrWidgetOptions', () => {
     gon.features = {};
   });
 
-  const createComponent = (mrData = mockData, options = {}) => {
-    wrapper = mount(MrWidgetOptions, {
+  const createComponent = (mrData = mockData, options = {}, data = {}, fullMount = true) => {
+    const mounting = fullMount ? mount : shallowMount;
+
+    queryResponse = {
+      data: {
+        project: {
+          ...getStateQueryResponse.data.project,
+          mergeRequest: {
+            ...getStateQueryResponse.data.project.mergeRequest,
+            mergeError: mrData.mergeError || null,
+          },
+        },
+      },
+    };
+    stateQueryHandler = jest.fn().mockResolvedValue(queryResponse);
+    wrapper = mounting(MrWidgetOptions, {
       propsData: {
         mrData: { ...mrData },
       },
       data() {
-        return { loading: false };
+        return {
+          loading: false,
+          ...data,
+        };
       },
 
       ...options,
       apolloProvider: createMockApollo([
         [approvalsQuery, jest.fn().mockResolvedValue(approvedByCurrentUser)],
-        [
-          getStateQuery,
-          jest.fn().mockResolvedValue({
-            data: {
-              project: {
-                ...getStateQueryResponse.data.project,
-                mergeRequest: {
-                  ...getStateQueryResponse.data.project.mergeRequest,
-                  mergeError: mrData.mergeError || null,
-                },
-              },
-            },
-          }),
-        ],
+        [getStateQuery, stateQueryHandler],
         [readyToMergeQuery, jest.fn().mockResolvedValue(readyToMergeResponse)],
         [
           userPermissionsQuery,
@@ -354,18 +361,6 @@ describe('MrWidgetOptions', () => {
         });
       });
 
-      describe('initPolling', () => {
-        it('should call SmartInterval', () => {
-          wrapper.vm.initPolling();
-
-          expect(SmartInterval).toHaveBeenCalledWith(
-            expect.objectContaining({
-              callback: wrapper.vm.checkStatus,
-            }),
-          );
-        });
-      });
-
       describe('initDeploymentsPolling', () => {
         it('should call SmartInterval', () => {
           wrapper.vm.initDeploymentsPolling();
@@ -532,23 +527,64 @@ describe('MrWidgetOptions', () => {
         });
       });
 
-      describe('resumePolling', () => {
-        it('should call stopTimer on pollingInterval', () => {
-          jest.spyOn(wrapper.vm.pollingInterval, 'resume').mockImplementation(() => {});
+      describe('Apollo query', () => {
+        const interval = 5;
+        const data = 'foo';
+        const mockCheckStatus = jest.fn().mockResolvedValue({ data });
+        const mockSetGraphqlData = jest.fn();
+        const mockSetData = jest.fn();
 
-          wrapper.vm.resumePolling();
+        beforeEach(() => {
+          wrapper.destroy();
+
+          return createComponent(
+            mockData,
+            {},
+            {
+              pollInterval: interval,
+              startingPollInterval: interval,
+              mr: {
+                setData: mockSetData,
+                setGraphqlData: mockSetGraphqlData,
+              },
+              service: {
+                checkStatus: mockCheckStatus,
+              },
+            },
+            false,
+          );
+        });
 
-          expect(wrapper.vm.pollingInterval.resume).toHaveBeenCalled();
+        describe('normal polling behavior', () => {
+          it('responds to the GraphQL query finishing', () => {
+            expect(mockSetGraphqlData).toHaveBeenCalledWith(queryResponse.data.project);
+            expect(mockCheckStatus).toHaveBeenCalled();
+            expect(mockSetData).toHaveBeenCalledWith(data, undefined);
+            expect(stateQueryHandler).toHaveBeenCalledTimes(1);
+          });
         });
-      });
 
-      describe('stopPolling', () => {
-        it('should call stopTimer on pollingInterval', () => {
-          jest.spyOn(wrapper.vm.pollingInterval, 'stopTimer').mockImplementation(() => {});
+        describe('external event control', () => {
+          describe('enablePolling', () => {
+            it('enables the Apollo query polling using the event hub', () => {
+              eventHub.$emit('EnablePolling');
 
-          wrapper.vm.stopPolling();
+              expect(stateQueryHandler).toHaveBeenCalled();
+              jest.advanceTimersByTime(interval * STATE_QUERY_POLLING_INTERVAL_BACKOFF);
+              expect(stateQueryHandler).toHaveBeenCalledTimes(2);
+            });
+          });
 
-          expect(wrapper.vm.pollingInterval.stopTimer).toHaveBeenCalled();
+          describe('disablePolling', () => {
+            it('disables the Apollo query polling using the event hub', () => {
+              expect(stateQueryHandler).toHaveBeenCalledTimes(1);
+
+              eventHub.$emit('DisablePolling');
+              jest.advanceTimersByTime(interval * STATE_QUERY_POLLING_INTERVAL_BACKOFF);
+
+              expect(stateQueryHandler).toHaveBeenCalledTimes(1); // no additional polling after a real interval timeout
+            });
+          });
         });
       });
     });
@@ -893,11 +929,7 @@ describe('MrWidgetOptions', () => {
   });
 
   describe('mock extension', () => {
-    let pollRequest;
-
     beforeEach(() => {
-      pollRequest = jest.spyOn(Poll.prototype, 'makeRequest');
-
       registerExtension(workingExtension());
 
       createComponent();
@@ -948,10 +980,6 @@ describe('MrWidgetOptions', () => {
       expect(collapsedSection.findComponent(GlButton).exists()).toBe(true);
       expect(collapsedSection.findComponent(GlButton).text()).toBe('Full report');
     });
-
-    it('extension polling is not called if enablePolling flag is not passed', () => {
-      expect(pollRequest).toHaveBeenCalledTimes(0);
-    });
   });
 
   describe('expansion', () => {