instantsearch: Refresh does not request pages in infinite hits again
Describe the bug 🐛
When updating the refresh
token, infinite hits will not react to the refetch.
To Reproduce 🔍
Steps to reproduce the behavior:
- go to the example
- trigger next page
- refresh
- see no changes in the infinite hits, even if the index would have changed
The example’s index can be changed to an index you control where you make changes to make the effect clearer.
Expected behavior 💭
Infinite hits reacts to refresh, either by:
- clearing the cache completely and restarting on the current page
- clearing the cache and the state and restarting on page 0
Likely we should go for option 2, unless there’s a showPrevious.
Additional context
Add any other context about the problem here.
When refresh happens, we need to make sure the infinite hits internal cache is also invalidated.
On React Native, where the list component itself is stateful, we can not rely on the “key” hack, because it rerenders with an empty state when we simply clear the cache. What could be an option is:
- clear cache
- redo current search
- save in cache
- rerender
The problem is that you can’t do that as a user reasonably, since you don’t have access to the helper state.
A possible solution is:
In the function refresh
in InstantSearchManager, emit an event to all widgets. Then in InfiniteHits, listen to that event, and clear the internal cache as we expect.
Another potential solution is to return a promise from the search
which happens in refresh. This should allow people to rerender the InfiniteHits component manually.
Relevant pieces of code:
Relevant issues:
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 3
- Comments: 61 (22 by maintainers)
Yes, the connector will accept the cache prop as well @meck93. You can check that by using a custom cache which has some logging 😃
You can control the internal cache of InfiniteHits now.
And later, you can call
cache.clear()
right before you refresh.The internal cache of InfiniteHits should be cleared when refreshing. But, until it’s properly fixed, that can be another workaround.
Just dropping in to say I’ve encountered the same issue.
Hi all,
I was just wondering whether there was any update to this? I’m still having a little trouble “rolling my own” infinite hits using the API. My setup requires the ability to search, show no duplicated results, have infinite scroll etc. Everything with the ConnectInfiniteHits works except the problem stated above.
Thanks in advance, Alex
@alexpchin
do you have a working react native example with connectInfiniteHits that loads newly created items on refresh?
I have also encountered this issue. I use the pull to refresh of Flatlist with a callback which sets the refresh to true and remounts the
<InfiniteHits>
. The first time I pull it doesn’t show an updated list but the second time I pull then it shows the updated list.update: as a workaround, I remount the
<InfiniteHits>
after a second using setTimeout and it seems to be working. Not ideal but at least it works for now.In React InstantSearch Hooks refresh is a function returned from useInstantSearch, but it indeed doesn’t clear the infinite hits cache either. Sorry!
@allanohorn
I got refresh to work in my App by manually clearing the Algolia Client cache. I’m using a reactive variable titled searchVar with Apollo client, but any global state manager will work. My searchVar has this shape:
Then for the
InstantSearch
component I utilize a controlled searchState, onSearchStateChange, along with a refresh prop (but I’m not confident that actually does anything).My
InstantSearch
looks like this:let me know if that helps or if you have any questions
Hi @Haroenv I finally think I’ve sorted the issues. One of the issues was fixed with incorporating
omit-deep-lodash
to remove thepage
from all of the indices in the state (as I was using multi-index). Another was fixed by creating a cache using a key:Then finally, your fix for algolia/react-instantsearch#3018 seemed to fix the stale hits that I was seeing.
I am just releasing a new version of my project, after I do that, I will create an example to share.
Thanks @alexpchin for providing your snippet!
Just for anyone looking, this is what I have so far:
To be used with:
Hi @Haroenv
I did make a github repository a while ago: https://github.com/algolia/instantsearch.js/issues/5263 However, it is a little outdated now so I made a new one here:
https://github.com/alexpchin/react-instant-search-refresh
You will need to change the APP_ID and Index values to one where you can delete an object from an index to see the behaviour.
I was still looking what’s going on, but I don’t have a good react native sandbox and setup, so that took a while, and I had to work on other things. If you can recreate the bad behaviour in a GitHub example, that would help a lot!
Hi @Haroenv I’m just circling back to this. I’ve managed to get this work on the web by using:
Combined with:
This allows me to create a different store for each page. However, I’m still a bit stuck on how best to implement this in
react-native
.Do you have a guide for clearing the cache for multiple
connectInfiniteHits
and there no solution where we can clear the internal cache without having to create our own?Thanks and Happy New Year!
You can remount the
<InfiniteHits>
component alone, at the same time as using refresh, which will clear its cacheHi @Haroenv any plans to implement this?