React-instantsearch: Default in-memory cache does not work in my app

[wildky]

We are integrating React Instant Search in a next.js application. We've noticed that an Algolia search request is being called on _every_ page render (not just refresh, every render) which is racking up hundreds of requests per session even when the user never types a search query! This is obviously not intended behavior.

Digging a layer deeper, I learned about the default caching behavior of react instant search as described here. I modified the caching behavior to use browser local storage cache and then the search started working as I would expect it to (i.e. it makes a request _only once_ at initial load and then the request results are cached so it doesn't make another request until the user explicitly creates a new search)

However, I'd rather use the default in-memory cache and I do not understand why it is not working.

So some questions to help troubleshoot:

• Are there known conditions where in-memory cache does not work?
• Is there a place where algolia cache errors are logged to help troubleshoot this issue (I only realized the cache was the cause by explicitly changing the cache behavior)?

Code with working cache:

  const searchClient = algoliasearch(algoliaAppId, apiKey, {
    responsesCache: createFallbackableCache({
      caches: [
        createBrowserLocalStorageCache({ key: `${version}-${algoliaAppId}` }),
        createInMemoryCache(),
      ],
    }),
  })

Code without working cache:

  const searchClient = algoliasearch(algoliaAppId, apiKey)

This also does not work:

  const searchClient = algoliasearch(algoliaAppId, apiKey, {
    responsesCache: createInMemoryCache()
  })

My environment:

• algoliasearch: 4.8.6
• react-instantsearch-dom: 6.10.3
• next: 10.0.8
• Chrome Version 89.0.4389.114

Note:

• I thought it might be related to SSR with next.js so I disabled SSR on the react-instant search components and imported them dynamically on client side and it is still behaving this way, so I do not think it is related to next.js or SSR.
• the apiKey is being generated server side to embed user-specific filters into the search requests - not sure if this is relevant.
• This behvaior is happening in local development and the deployed application

Thanks for any help.

[Haroenv]

Do you have a sandbox where we can see how you implemented React InstantSearch in multiple pages? I'm thinking possibly a new instance of algoliasearch is created on every render / page and thus doesn't read the cache?

[wildky]

@Haroenv I believe you are correct! I don't have a sandbox but thanks for your input.

Maybe this is obvious to most people and it is not a common issue, but it might be worth noting somewhere in the documentation that this behavior can happen if a new instance is created on every render. A sentence about this somewhere in the docs would have saved me half a day of trouble shooting.

For example, this page exists and it was one of the first things I came across when troubleshooting. It could be mentioned here or on another FAQ page like this.

Thanks again.

[Haroenv]

Good point, I'll add something around that here: https://www.algolia.com/doc/guides/building-search-ui/troubleshooting/faq/react/

[Haroenv]

I was thinking:

- question: Why does the search client cache not work?
   answer: |
     It's possible that you recreate the search client over every render. The cache isn't shared across different instances of `algoliasearch`, so make sure that you create the search client just once.

[tkrugg]

👍 I'd go a little more specific on the question:

Why does the search client cache not preventing redundant requests to Algolia?