React-instantsearch: Must be able to fully refresh a list which uses an InfiniteHits connector

[tstehle]

Bug: What is the current behavior?
I use an InfiniteHits connector on a FlatList, and I sometimes need to refresh that list, so I trigger a refresh with the InstantSearch refresh prop.
When I do that, it sends a new request for the content of last page that was loaded.
For example, if I have scrolled down my FlatList so that it has loaded page 0 and page 1, and I trigger a refresh, it will only refresh page 1, and page 0 will not be updated.

Bug: What is the expected behavior?
When using InfiniteHits, the expected behavior of a refresh is to fetch the first page of results, and forget about all the previous results.

What is the version you are using? Always use the latest one before opening a bug issue.
react-instantsearch 5.3.1
react-native 0.57.2
react 16.5.2

[samouss]

The refresh prop only clears the cache of the client that we use inside React InstantSearch. This cache contains the responses of the previous requests send to Algolia. It doesn't have any knowledge about the current React InstantSearch state.

The connectInfiniteHits connector keep the previous hits in memory. To force a new render of the list you have two solutions:

• unmount / remount the widget
• reset the page to 0 (with searchState & onSearchStateChange).

The first solution will fetch only the latest page where the widget used to be, we don't have a proper way to fetch the previous page with the InfiniteHits widget. The other solution will restart the list from 0 since we reset the page.

EDIT: to reset the page you have to use 1 not 0.

[tstehle]

If I understand correctly, unmounting and remounting the widget will not fully refresh the list, and the only way to do that is to reset the page to 0.

I don't see how to do it with onSearchStateChange, as this function is not triggered by me but by the InstantSearch widget.

I did try a way to modify the searchState, based on what I read here: https://community.algolia.com/react-instantsearch/guide/Custom_connectors.html
I created a custom widget which I could trigger to run refine(), and in my custom refine I set the page to 0.
But the only way I found that did not create errors was to modify the state like so:
const newSearchState = {
...searchState,
page: undefined,
queryAndPage: ['', 0],
};
It is very confusing to me that there seems to be two ways to change the page ('page' at the root of the object, and the second element of the queryAndPage array).
When I tried setting page to 0, it would actually send a -1 in the query and I would receive a 400 complaining about it.
Anyways, this partly works; the first 10 elements of the list are fetched.
However, now if I scroll down my list, no more results are fetched.

[samouss]

There is only on way to reset the page, it's with the page attribute. Here is the shape of the searchState object to better understand how to use it. To reset the page you have to set the value to 1 not 0. Here is an example that shows how to implement the refresh of the cache and the reset of the page.

The queryAndPage attribute that you linked from the documentation is only used as an example to help you create a custom connector. React InstantSearch doesn't use this attribute internally.

[tstehle]

Thanks for the example, I copied the code and it works.