fix(infiniteHits): fix cache not using proper state (#6671)

shaejaz · web-flow · commit ec495e0c79a2 · 2025-07-16T11:20:10.000+01:00
diff --git a/packages/instantsearch.js/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts b/packages/instantsearch.js/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts
@@ -316,6 +316,46 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
     ).toHaveBeenCalledWith(expect.objectContaining({ page: 3 }));
   });
 
+  it('goes to previous page correctly when state is mismatched', () => {
+    const renderFn = jest.fn();
+    const makeWidget = connectInfiniteHits(renderFn);
+    const widget = makeWidget({});
+
+    const helper = algoliasearchHelper(createSearchClient(), '', {
+      page: 4,
+    });
+    helper.overrideStateWithoutTriggeringChangeEvent = jest.fn(() => helper);
+    helper.searchWithoutTriggeringOnStateChange = jest.fn();
+
+    // we add a query to the parent helper to simulate multi-index where
+    // the parent has a query and the infinite hits index does not
+    const parentHelper = algoliasearchHelper(createSearchClient(), '', {
+      page: 4,
+      query: 'test',
+    });
+
+    widget.init(
+      createInitOptions({
+        state: parentHelper.state,
+        helper,
+      })
+    );
+
+    const { showMore, showPrevious } = widget.getWidgetRenderState(
+      createRenderOptions({
+        state: parentHelper.state,
+        helper,
+      })
+    );
+    showMore();
+    expect(helper.state.page).toBe(5);
+
+    showPrevious();
+    expect(
+      helper.overrideStateWithoutTriggeringChangeEvent
+    ).toHaveBeenCalledWith(expect.objectContaining({ page: 3 }));
+  });
+
   it('Provides the hits and flush hists cache on query changes', () => {
     const renderFn = jest.fn();
     const makeWidget = connectInfiniteHits(renderFn);
diff --git a/packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts b/packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts
@@ -261,32 +261,31 @@ export default (function connectInfiniteHits<
     };
 
     const getShowPrevious =
-      (helper: Helper): (() => void) =>
+      (
+        helper: Helper,
+        getCachedHits: () => InfiniteHitsCachedHits<THit>
+      ): (() => void) =>
       () => {
+        const cachedHits = getCachedHits();
         // Using the helper's `overrideStateWithoutTriggeringChangeEvent` method
         // avoid updating the browser URL when the user displays the previous page.
         helper
           .overrideStateWithoutTriggeringChangeEvent({
             ...helper.state,
-            page:
-              getFirstReceivedPage(
-                helper.state,
-                cache.read({ state: normalizeState(helper.state) }) || {}
-              ) - 1,
+            page: getFirstReceivedPage(helper.state, cachedHits) - 1,
           })
           .searchWithoutTriggeringOnStateChange();
       };
 
     const getShowMore =
-      (helper: Helper): (() => void) =>
+      (
+        helper: Helper,
+        getCachedHits: () => InfiniteHitsCachedHits<THit>
+      ): (() => void) =>
       () => {
+        const cachedHits = getCachedHits();
         helper
-          .setPage(
-            getLastReceivedPage(
-              helper.state,
-              cache.read({ state: normalizeState(helper.state) }) || {}
-            ) + 1
-          )
+          .setPage(getLastReceivedPage(helper.state, cachedHits) + 1)
           .search();
       };
 
@@ -337,6 +336,11 @@ export default (function connectInfiniteHits<
         state: existingState,
         instantSearchInstance,
       }) {
+        const getCacheHits = () => {
+          const state = parent.getPreviousState() || existingState;
+          return cache.read({ state: normalizeState(state) }) || {};
+        };
+
         let isFirstPage: boolean;
         let currentPageHits: Array<Hit<THit>> = [];
         /**
@@ -346,13 +350,13 @@ export default (function connectInfiniteHits<
          */
         const state = parent.getPreviousState() || existingState;
 
-        const cachedHits = cache.read({ state: normalizeState(state) }) || {};
+        const cachedHits = getCacheHits();
 
         const banner = results?.renderingContent?.widgets?.banners?.[0];
 
         if (!showPrevious) {
-          showPrevious = getShowPrevious(helper);
-          showMore = getShowMore(helper);
+          showPrevious = () => getShowPrevious(helper, getCacheHits)();
+          showMore = () => getShowMore(helper, getCacheHits)();
         }
 
         if (!sendEvent) {
