infiniteHits widget URL and cache settings

Open Q&A
#1

Hi!

I’m using InstantSearch.js and have implemented the infiniteHits widget.

Three questions:

1.) I have Algolia implemented on a page with URL https://mysite.com/products/.

Initially, 10 results are shown. When the load more button is clicked, as expected, 10 more results are shown.

But, the page URL changes and becomes https://mysite.com/products/?page=2.

How can I prevent ?page= from being appended to the URL?

2.) I use the cache setting: sessionStorageCache.

Is it possible to specify that the cache be cleared if the page they visit on my site is not related to search?

Example: if a user is on the page with search /products/ and navigates to /about/, and returns to /products/, cache should be cleared. But if they click on a product in search results /products/1/ and return, no cache is not cleared.

If so, can you please explain how and/or point me in the right direction.

3.) Do clicks on the load more button count towards the search operations/requests limit?

My infiniteHits code:

const search = instantsearch({
  indexName: 'index',
  searchClient: algoliasearch(
    '1234',
    '5678'
  ),
  routing: {
    stateMapping: instantsearch.stateMappings.singleIndex('index')
  }
});

const sessionStorageCache =
  instantsearch.createInfiniteHitsSessionStorageCache();

instantsearch.widgets.infiniteHits({
  cache: sessionStorageCache,
  container: '#infinite-hits',
  templates: {
    empty: `...`,
    item: `...`
  }
})

Thank you and happy holidays. :slight_smile:

#2

Hi @utxoutput,

  1. How can I prevent ?page= from being appended to the URL?

You can disable the URL sync with the stateMapping field in routing . You can filter out the page field from the uiState which will prevent the value to be pushed in the URL. Here is an example in CodeSandbox.

  1. Is it possible to specify to clear the cache if the page they visit is not related to search?

We don’t have an API to clear the cache. The feature rely on the sessionStorage browser API. This API is available in globally so you can manually clear the cache if you want to. You can’t control the name of the key because it’s hard-coded though. The name is: ais.infiniteHits. The following call should do the trick:

window.sessionStorage.removeItem('ais.infiniteHits');
  1. Do clicks on the load more button count towards the search operations/requests limit?

Yes. Each time the user clicks on the button it will trigger a new search request to Algolia to get the results at page N + 1. Note that the Algolia client have an in-memory cache. Usually two search requests with the same set of parameters count as 1. The first one is served by Algolia, the second one is served from the cache.

Hope that helps!

1 Like
#3

Super helpful. Thank you!