When using React InstantSearch useInstantSearch refresh method in conjunction with the infiniteHits widget you might have been a little confused as to why the refresh method did not clear the cache for InfiniteHits widget. This articles goal is to explain why that is.
-
The
InfiniteHitscache stores previously loaded hits so there’s no need to fetch them again from Algolia when returning to the page. It also lets users go back to the right scroll position because the hits are already there. -
The search client’s cache (which can be cleared with the useInstantSearch refresh method) is different, it stores results from Algolia for each query, which avoid re-fetching for the same query.
The search client’s cache can be cleared using refresh from useInstantSearch. However, the InfiniteHits cache doesn't have an explicit method for refreshing itself.
Here is an example of how you can use the React InstantSearch useInstantSearch refresh method in conjunction with the infiniteHits cache. So that both the search client's cache and the InfiniteHits widget cache can be cleared at the same time.
What this CodeSandBox does :
- Create a custom in-memory cache based on InstantSearch.js source code, with an extra
invalidatemethod to clear the cache. - Makes a call to
cache.invalidate()when refreshing to clear the infinite hits cache.
You can try this CodeSandBox out by swapping the credentials out for your own. Then change the names of an object in your Algolia dashboard and you should see the updated name when hitting refresh.