Strange state issue when paginating and filters are applied

[glennjacobs]

I've made a Loom video to demonstrate and try explain the problem.

https://www.loom.com/share/372000ed79054ce0b419d30a7b78cb5f?sid=dbecb849-6777-4eb6-8fe3-2d0295abac19

We are using keep-alive in Nuxt so the user can hit the back button and carry on from where they left off.

But when a user applies a filter and then paginates to page 2, if they click a link and then return via the back button weirdly only page 2 results display and the page 1 results are lost.

However, this only happens if a filter is applied. With no filter applied, the page retains both page 1 + 2 results.

I am at a loss as to why this is happening. Would you be able to point me in the right direction?

Many thanks.

[glennjacobs]

I think I've found the issue.

In the InfiniteHits caching it uses a static cache key. This should be fine, but Instantsearch does some odd stuff, I guess relating to filters, that causes the cache to be written for queries that are different to the main one.

What this means in essence is the cache is being effectively cleared, because the cached value now has a state different to that of what we're expecting. And so we no longer retain the previous page's results.

Making the following change to this file appears to have resolved it...

https://github.com/atoms-studio/nuxt-swiftsearch/blob/main/src/runtime/composables/useAisInfiniteHitsStatefulCache.ts#L18-L20

function getKeyFromState(state: PlainSearchParameters, key?: string) {
  const jsonKeyString = `${key ?? KEY}` + JSON.stringify(getStateWithoutPage(state));
  return btoa(jsonKeyString);
}

I also added the following to the write catch, in case we hit the storage limit

sessionStorage.clear();

[glennjacobs]

@Rigo-m is this something you'd consider for a PR?

[Rigo-m]

Hi Glenn! Sorry for the delay.

Good find, the InfiniteHitsStatefulCache is meant to be working as a restoration cache even when filters are applied, so that's definitely a bug.

If you want to open a PR I'll gladly take a look at it and make some tests to ensure we are ok perf wise.