Refresh client cache with hooks

[sbkl]

Hi,

Using Next.js and their API routes, once I perform an index operation, I want to refresh the client cache to reflect that change directly.

In the back end, I make sure to use the wait method to wait for algolia to perform the change before to go back to the client

   await index.partialUpdateObject({
      objectID,
      description: "New Description",
   }).wait();

Once I go back to the client side, I use the refresh method from the useInstantSearch hook.

   const { refresh } = useInstantSearch();

   async function update() {
      await request.post(...)
      refresh();
   }

I can see the new search being called in the network tab but I still get the stalled data from the Algolia index.

Edit:
Only if I toggle an existing refinement list, the change will be applied properly without refreshing the window.

Do I miss something here?

[francoischalifour]

That's possible that since #3554, calling useInstantSearch() doesn't trigger a render, and therefore doesn't refreshes the screen. We need to programmatically rerender now when calling refresh().

For now, you could manually force an update, until we fix that in the lib.

Edit: this guess was incorrect, it's because of the useInfiniteHits() which uses its own cache.

[sbkl]

Just gave it a try but same result.

One thing I realise I didn't mention is that the hits are coming from the useInfiniteHits hook.

What I managed to do is to provide the sessionStorageCache from the documentation to the cache property of the useInfiniteHits hook. And when I update a record, I update the cache directly in the session storage cache. Not sure if this is recommended but at least I get the behaviour intended for now.

[Haroenv]

For "instant updates" of data, this is a good approach @sbkl, indeed refresh only triggers a new search, but there's several reasons possible why it wouldn't show up:

1. infinite hits doesn't (yet) clear its cache - this is something that could be fixed in the future, but the UX tradeoffs should be considered
2. the data has been updated, but isn't yet live in the index - indexing is asynchronous, and you don't always want to wait for the update to be live

[sbkl]

2- I'm using the wait method when performing the index change but it seems that it doesn't actually wait for the operation to execute. Example below. Could it be the 'await' syntax that I'm not writing properly or maybe the for loop?

for (let i = 0; i < items.length; i++) {
   
   const algoliaIndex = algoliaClient.initIndex(items[i].id)
   
   await algoliaIndex.partialUpdateObject({
      objectID,
      description: "New Description",
   }).wait();

}