@algolia/cache-common not working along with React InstantSearch + Next.js

[nathanwkwong]

I am trying to integrate query request caching into my Nest.js application by referencing: https://www.algolia.com/doc/api-client/getting-started/customize/javascript/?client=javascript#caching-requests-and-responses.

I set a search client with the Algoliasearch package with my Aloglia app ID and search API key. And also supply a response cache params for it. Then, provide it to React InstantSearch for use:

const searchClient =  algoliasearch( appId, apiKey,
  {
    responsesCache: createFallbackableCache({
      caches: [
        createBrowserLocalStorageCache({
          key: `algolia-responses-${process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}-${1}`,
          timeToLive: 30,
        }),
        createInMemoryCache(),
      ],
    }),
  })


//in a page.tsx
<InstantSearch searchClient={searchClient} 
      routing={{
            router: createInstantSearchRouterNext({ singletonRouter }),
            stateMapping: getStateMapping(), // storing the steateToRoute and routeToState object
}} />

After setting it, it makes a cache response to a browser localStorage within the timeToLive duration. However, when I type in a URL with facet params that worked before (mapping the route to state), the route to state does not work. It will remove all the facet params, e.g. I have a url with facet param,?onsale=20%3A100. After going to the page, the param will be removed if it is within a cache duration (a prefetch is fine).

Also, I tried to cache the request,

Is there any way to fix it? Thanks.

packages version:

    "next": "13.5.4",
    "algoliasearch": "^4.20.0",
    "react-instantsearch": "^7.3.0",
    "react-instantsearch-hooks-router-nextjs": "^6.47.3",
    "react-instantsearch-hooks-web": "^6.47.3",

    "@algolia/cache-browser-local-storage": "^4.23.3",
    "@algolia/cache-common": "^4.23.3",
    "@algolia/cache-in-memory": "^4.23.3",

[Haroenv]

Do you have this experience in a reproducible sandbox or similar? I'm not sure how the cache can impact the routing

[nathanwkwong]

ok... I found the cause... a component inside did a refine() at the init render there. after I comment it out, the route can preserve now.

Problem solved. Thank you for the instant response, Haroenv. Let me close this discussion.