Config changes to make it work with filtered search

app/assets/javascripts/jobs/components/table/graphql/cache_config.js

-import { isEqual, differenceWith } from 'lodash';
+import { isEqual } from 'lodash';
 
 export default {
   typePolicies: {
@@ -13,15 +13,28 @@ export default {
       merge(existing = {}, incoming, { args = {} }) {
         let nodes;
 
+        const areNodesEqual = isEqual(existing.nodes, incoming.nodes);
+        const statuses = Array.isArray(args.statuses) ? [...args.statuses] : args.statuses;
+        const { pageInfo } = incoming;
+
         if (Object.keys(existing).length !== 0 && isEqual(existing?.statuses, args?.statuses)) {
-          const diff = differenceWith(existing.nodes, incoming.nodes, isEqual);
-          if (existing.nodes.length === incoming.nodes.length) {
-            if (diff.length !== 0) {
-              nodes = [...existing.nodes, ...diff];
+          if (areNodesEqual) {
+            if (incoming.pageInfo.hasNextPage) {
+              nodes = [...existing.nodes, ...incoming.nodes];
             } else {
-              nodes = [...existing.nodes];
+              nodes = [...incoming.nodes];
             }
           } else {
+            if (!existing.pageInfo?.hasNextPage) {
+              nodes = [...incoming.nodes];
+
+              return {
+                nodes,
+                statuses,
+                pageInfo,
+              };
+            }
+
             nodes = [...existing.nodes, ...incoming.nodes];
           }
         } else {
@@ -30,8 +43,8 @@ export default {
 
         return {
           nodes,
-          statuses: Array.isArray(args.statuses) ? [...args.statuses] : args.statuses,
-          pageInfo: incoming.pageInfo,
+          statuses,
+          pageInfo,
         };
       },
     },

spec/frontend/jobs/components/table/graphql/cache_config_spec.js

@@ -34,9 +34,17 @@ describe('jobs/components/table/graphql/cache_config', () => {
     });
 
     it('should not add to existing cache if the incoming elements are the same', () => {
+      // simulate that this is the last page
+      const finalExistingCache = {
+        ...CIJobConnectionExistingCache,
+        pageInfo: {
+          hasNextPage: false,
+        },
+      };
+
       const res = cacheConfig.typePolicies.CiJobConnection.merge(
         CIJobConnectionExistingCache,
-        CIJobConnectionExistingCache,
+        finalExistingCache,
         {
           args: firstLoadArgs,
         },

spec/frontend/jobs/mock_data.js

@@ -1911,6 +1911,13 @@ export const CIJobConnectionIncomingCacheRunningStatus = {
 };
 
 export const CIJobConnectionExistingCache = {
+  pageInfo: {
+    __typename: 'PageInfo',
+    endCursor: 'eyJpZCI6IjIwNTEifQ',
+    hasNextPage: true,
+    hasPreviousPage: false,
+    startCursor: 'eyJpZCI6IjIxNzMifQ',
+  },
   nodes: [
     { __ref: 'CiJob:gid://gitlab/Ci::Build/2100' },
     { __ref: 'CiJob:gid://gitlab/Ci::Build/2101' },