React-instantsearch: connectInfiniteHits has undefined hits when updating state

[Haroenv]

(copied from https://github.com/algolia/instantsearch.js/issues/2663 by @udewilde)

Hi,

I have implemented connectInfiniteHits react-infinite-scroller, and all is working almost perfectly.
But whenever the state of the React Component is modified (not related to the infiniteHits), the connector is re-rendered with value undefined for the hits prop, which breaks the page.

Inside the connectInfinitHits connector :
It looks like refine is firing whenever the state of the component changes, leading to the issue.
this.previousPage and hits are undefined, so following logic loop is ignored, and this._allResults is undefined as well.

if (page === 0) { 
  this._allResults = hits; 
} else if (page > this.previousPage) { 
  this._allResults = [].concat(_toConsumableArray(this._allResults), _toConsumableArray(hits)); 
} else if (page < this.previousPage) { 
  this._allResults = hits; 
}

Am I doing something wrong?

[samouss]

Hi @udewilde, I don't manage to reproduce the error. Could you share with us a little reproduction of what you are trying to do? It will be a lot easier to dig the issue. We provide template in order to avoid you the boilerplate part. You can find it on CodeSandbox. Thanks!

[udewilde]

Sure, sorry for this.
Here is the JSFiddle
The equivalent of clicking the button throws

Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

and if repeating the click:

ReactReconciler.js:60 Uncaught (in promise) 
TypeError: Cannot read Uncaught (in promise) 
TypeError: Cannot read property 'getHostNode' of null

[samouss]

The jsFilddle don't work but I made a small example in CodeSandox from it. I saw that in your fiddle you are calling the connector on each render. You should avoid to do that and create the NeverEndingResult component outside of your App component. Check the example, now when you click on the button it should not trigger any error.

[udewilde]

Ok you make it look too simple now!
Thanks a lot, this was the issue.

[samouss]

You're welcome! I will close this issue, feel free to reopen it if needed 😉

[oyeanuj]

@Haroenv @samouss I came here with a similar error though I am not sure if it is the same root cause. As I go from a search page of one type of object, to another type of object, the infiniteHits breaks.

It is hard to reproduce in a CodeSandbox publicly but here is the code that will help elucidate the structure:

// Each SearchResults page (navigated via nav component below)

<PageContainer>
  <Nav />
  <InstantSearch>
    <Configure />  //<-------- From Algolia
    <SearchResultsGrid />
  </InstantSearch>
</PageContainer>

// Depending on the url, the configure properties will change

And the SearchResultsPage looks like this:

@withRouter
@connectInfiniteHits
@connectStateResults
@connect(gridSelector)
export default class SearchResultsGrid extends Component {
  ...
}

I get the following error:

On investigating further, I noticed the following things:

1. On navigation, even though new SearchResultsGrid component is being created, notice how initially the hits are undefined and hasMore is true. This is even before the query is seen to be made on the console. Should hits ever be undefined and shouldn't hasMore be false until results are fetched?

1. I also noticed in the searchState prop from connectStateResult that the page number and the configure filter prop hadn't reset on the page throwing the error. On a subsequent re-render the configure prop first gets dropped and then changes but the page number doesn't change. You can see that in the screenshot below.

My guess is what I noticed above in (2) is leading to the errors but I am not sure what might be the reason for that behavior in the first place? Thoughts?

[Haroenv]

Thanks for that writeup, I think we might need to set a default value, because #405 is related to this.

Let's reopen and investigate. If you find the time to make a minimal reproduction, it would be very helpful

[oyeanuj]

@Haroenv thanks for the quick response! I did a little more debugging and noticed that if I a passed a key to InstantSearch component that would make it re-render everytime Configure props changed, then things work well.

So, it seems like there is some weirdness with Configure where the change in props to Configure don't propagate well to InstantSearch or the actual search and hence the stale page and configure.filter props above in the screenshots.

I'll also try to recreate the above in a CodeSandbox.

[samouss]

@oyeanuj We released a version with a fix on the connectInfiniteHits connector. It might solve your issue. The fix has been released on the version v5.0.1.

[samouss]

I'm closing this issue, since we released a fix that should solve the issue. If you still have it please open a new one. Thanks!