Fix polling for notes

Previously, the `dispatch` store function wasn't passed to the
`pollSuccessCallback` helper, which was causing an error message to
appear when loading an MR. This ensures that is passed correctly along.

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/212811

app/assets/javascripts/notes/stores/actions.js

@@ -402,9 +402,8 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
 };
 
 const pollSuccessCallBack = (resp, commit, state, getters, dispatch) => {
-  if (resp.notes && resp.notes.length) {
-    updateOrCreateNotes({ commit, state, getters, dispatch }, resp.notes);
-
+  if (resp.notes?.length) {
+    dispatch('updateOrCreateNotes', resp.notes);
     dispatch('startTaskList');
   }
 
@@ -424,12 +423,12 @@ const getFetchDataParams = state => {
   return { endpoint, options };
 };
 
-export const fetchData = ({ commit, state, getters }) => {
+export const fetchData = ({ commit, state, getters, dispatch }) => {
   const { endpoint, options } = getFetchDataParams(state);
 
   axios
     .get(endpoint, options)
-    .then(({ data }) => pollSuccessCallBack(data, commit, state, getters))
+    .then(({ data }) => pollSuccessCallBack(data, commit, state, getters, dispatch))
     .catch(() => Flash(__('Something went wrong while fetching latest comments.')));
 };
 
@@ -449,7 +448,7 @@ export const poll = ({ commit, state, getters, dispatch }) => {
   if (!Visibility.hidden()) {
     eTagPoll.makeRequest();
   } else {
-    fetchData({ commit, state, getters });
+    dispatch('fetchData');
   }
 
   Visibility.change(() => {

changelogs/unreleased/212811-adding-new-task-always-shows-error-something-went-wrong-while-fetc.yml

+---
+title: Fix comment loading error in issues and merge requests
+merge_request: 36043
+author:
+type: fixed

spec/frontend/notes/stores/actions_spec.js

@@ -274,9 +274,54 @@ describe('Actions Notes Store', () => {
     });
   });
 
+  describe('fetchData', () => {
+    describe('given there are no notes', () => {
+      const lastFetchedAt = '13579';
+
+      beforeEach(() => {
+        axiosMock
+          .onGet(notesDataMock.notesPath)
+          .replyOnce(200, { notes: [], last_fetched_at: lastFetchedAt });
+      });
+
+      it('should commit SET_LAST_FETCHED_AT', () =>
+        testAction(
+          actions.fetchData,
+          undefined,
+          { notesData: notesDataMock },
+          [{ type: 'SET_LAST_FETCHED_AT', payload: lastFetchedAt }],
+          [],
+        ));
+    });
+
+    describe('given there are notes', () => {
+      const lastFetchedAt = '12358';
+
+      beforeEach(() => {
+        axiosMock
+          .onGet(notesDataMock.notesPath)
+          .replyOnce(200, { notes: discussionMock.notes, last_fetched_at: lastFetchedAt });
+      });
+
+      it('should dispatch updateOrCreateNotes, startTaskList and commit SET_LAST_FETCHED_AT', () =>
+        testAction(
+          actions.fetchData,
+          undefined,
+          { notesData: notesDataMock },
+          [{ type: 'SET_LAST_FETCHED_AT', payload: lastFetchedAt }],
+          [
+            { type: 'updateOrCreateNotes', payload: discussionMock.notes },
+            { type: 'startTaskList' },
+          ],
+        ));
+    });
+  });
+
   describe('poll', () => {
     beforeEach(done => {
-      jest.spyOn(axios, 'get');
+      axiosMock
+        .onGet(notesDataMock.notesPath)
+        .reply(200, { notes: [], last_fetched_at: '123456' }, { 'poll-interval': '1000' });
 
       store
         .dispatch('setNotesData', notesDataMock)
@@ -285,15 +330,10 @@ describe('Actions Notes Store', () => {
     });
 
     it('calls service with last fetched state', done => {
-      axiosMock
-        .onAny()
-        .reply(200, { notes: [], last_fetched_at: '123456' }, { 'poll-interval': '1000' });
-
       store
         .dispatch('poll')
         .then(() => new Promise(resolve => requestAnimationFrame(resolve)))
         .then(() => {
-          expect(axios.get).toHaveBeenCalled();
           expect(store.state.lastFetchedAt).toBe('123456');
 
           jest.advanceTimersByTime(1500);
@@ -305,8 +345,9 @@ describe('Actions Notes Store', () => {
             }),
         )
         .then(() => {
-          expect(axios.get.mock.calls.length).toBe(2);
-          expect(axios.get.mock.calls[axios.get.mock.calls.length - 1][1].headers).toEqual({
+          const expectedGetRequests = 2;
+          expect(axiosMock.history.get.length).toBe(expectedGetRequests);
+          expect(axiosMock.history.get[expectedGetRequests - 1].headers).toMatchObject({
             'X-Last-Fetched-At': '123456',
           });
         })