fix(infiniteHits): fix stale hits issue (#3021)

* fix(infiniteHits): fix stale hits issue

* Revert "fix(infiniteHits): fix stale hits issue"

This reverts commit 1c429c6.

* fix(infiniteHits): fix stale hits issue

* return an empty array when there is no results

* clean up the flow

* Apply suggestions from code review

Co-authored-by: Haroen Viaene <hello@haroen.me>

Co-authored-by: Haroen Viaene <hello@haroen.me>

Author: Eunjae Lee

packages/react-instantsearch-core/src/connectors/__tests__/connectInfiniteHits.js

@@ -318,14 +318,14 @@ describe('connectInfiniteHits', () => {
         'theQueryID_1',
         'theQueryID_1',
         // page 2
-        'theQueryID_2',
-        'theQueryID_2',
-        'theQueryID_2',
-        'theQueryID_2',
-        'theQueryID_2',
-        'theQueryID_2',
-        'theQueryID_2',
-        'theQueryID_2',
+        'theQueryID_2_',
+        'theQueryID_2_',
+        'theQueryID_2_',
+        'theQueryID_2_',
+        'theQueryID_2_',
+        'theQueryID_2_',
+        'theQueryID_2_',
+        'theQueryID_2_',
       ]);
       expect(res3.hasMore).toBe(true);
     });
@@ -498,17 +498,6 @@ describe('connectInfiniteHits', () => {
       expect(instance.refine).toHaveBeenLastCalledWith(event, 1);
     });
 
-    it('adds 1 to page when calling refine', () => {
-      const props = { contextValue };
-      const state0 = {};
-
-      const state1 = connect.refine.call({}, props, state0);
-      expect(state1).toEqual({ page: 2 });
-
-      const state2 = connect.refine.call({}, props, state1);
-      expect(state2).toEqual({ page: 3 });
-    });
-
     it('set page to the corresponding index', () => {
       const props = { contextValue };
       const state0 = {};
@@ -520,14 +509,6 @@ describe('connectInfiniteHits', () => {
       expect(state1).toEqual({ page: 6 });
     });
 
-    it('automatically converts String state to Number', () => {
-      const props = { contextValue };
-      const state0 = { page: '0' };
-
-      const state1 = connect.refine.call({}, props, state0);
-      expect(state1).toEqual({ page: 1 });
-    });
-
     it('expect to always return an array of hits', () => {
       const props = { contextValue };
       const searchState = {};
@@ -561,7 +542,7 @@ describe('connectInfiniteHits', () => {
       expect(actual).toEqual(expectation);
     });
 
-    it('read from given cache', () => {
+    it('does not read from given cache when results is empty', () => {
       const cache = {
         read: jest.fn(),
         write: jest.fn(),
@@ -570,6 +551,25 @@ describe('connectInfiniteHits', () => {
       const searchState = {};
       const searchResults = {};
       connect.getProvidedProps.call({}, props, searchState, searchResults);
+      expect(cache.read).toHaveBeenCalledTimes(0);
+    });
+
+    it('read from given cache', () => {
+      const cache = {
+        read: jest.fn(),
+        write: jest.fn(),
+      };
+      const props = { cache, contextValue };
+      const searchState = {};
+      const searchResults = {
+        results: {
+          hits: [{}, {}, {}],
+          hitsPerPage: 3,
+          page: 1,
+          nbPages: 3,
+        },
+      };
+      connect.getProvidedProps.call({}, props, searchState, searchResults);
       expect(cache.read).toHaveBeenCalledTimes(1);
     });
 
@@ -579,7 +579,14 @@ describe('connectInfiniteHits', () => {
         write: jest.fn(),
       };
       const searchState = {};
-      const searchResults = {};
+      const searchResults = {
+        results: {
+          hits: [{}, {}, {}],
+          hitsPerPage: 3,
+          page: 1,
+          nbPages: 3,
+        },
+      };
       const instance = {};
       connect.getProvidedProps.call(
         instance,

packages/react-instantsearch-core/src/connectors/connectInfiniteHits.js

@@ -78,14 +78,9 @@ export default createConnector({
       multiIndexContext: props.indexContextValue,
     });
 
-    this._prevState = this._prevState || {};
-
-    this._cache = props.cache ? props.cache : this._cache || getInMemoryCache();
-    let cachedHits = this._cache.read({ state: searchState }) || {};
-
     if (!results) {
       return {
-        hits: extractHitsFromCachedHits(cachedHits),
+        hits: [],
         hasPrevious: false,
         hasMore: false,
         refine: () => {},
@@ -94,29 +89,20 @@ export default createConnector({
       };
     }
 
-    const {
-      page,
-      hits,
-      hitsPerPage,
-      nbPages,
-      _state: { page: p, ...currentState } = {},
-    } = results;
+    const { page, hits, hitsPerPage, nbPages, _state: state } = results;
+
+    this._cache = props.cache ? props.cache : this._cache || getInMemoryCache();
+    const cachedHits = this._cache.read({ state }) || {};
 
     const hitsWithPositions = addAbsolutePositions(hits, hitsPerPage, page);
     const hitsWithPositionsAndQueryID = addQueryID(
       hitsWithPositions,
       results.queryID
     );
 
-    if (!isEqual(currentState, this._prevState)) {
-      cachedHits = this._cache.read({ state: searchState }) || {};
-    }
-    if (cachedHits[page] === undefined) {
-      cachedHits[page] = hitsWithPositionsAndQueryID;
-      this._cache.write({ state: searchState, hits: cachedHits });
-    }
+    cachedHits[page] = hitsWithPositionsAndQueryID;
+    this._cache.write({ state, hits: cachedHits });
 
-    this._prevState = currentState;
     /*
       Math.min() and Math.max() returns Infinity or -Infinity when no argument is given.
       But there is always something in this point because of `cachedHits[page]`.
@@ -150,22 +136,6 @@ export default createConnector({
   },
 
   refine(props, searchState, event, index) {
-    this._cache = props.cache ? props.cache : this._cache || getInMemoryCache();
-    const cachedHits = this._cache.read({ state: searchState }) || {};
-    const pages = Object.keys(cachedHits).map(Number);
-    const lastReceivedPage =
-      pages.length === 0 ? undefined : Math.max(...pages);
-    // If there is no key in `this._cachedHits`,
-    // then `lastReceivedPage` should be `undefined`.
-    if (index === undefined && lastReceivedPage !== undefined) {
-      index = lastReceivedPage + 1;
-    } else if (index === undefined) {
-      index = getCurrentRefinement(props, searchState, {
-        ais: props.contextValue,
-        multiIndexContext: props.indexContextValue,
-      });
-    }
-
     const id = getId();
     const nextValue = { [id]: index + 1 };
     const resetPage = false;