Search delayed results

Hello!
I have an issue, which happens just on stage and production servers. On localhost everything works fine.
I’m using react-instantsearch-dom inside Next.js project.
The problem is that results, visible for a user, are old, they were fetched by previous search state, not by current one. In other words:

  1. you see initial search page with all results
  2. you type search query for a 1st time - nothing changed (but in this step results should be different)
  3. you change search param/query again and see results from step 2 (in this step you already have 3rd SearchState)
  4. you change something - create 4th SearchState, but see results from step 3

Like one step behind, hope I clearly explained it.
To my mind the problem is in connectInfiniteHits, because in console I see that Algolia made a correct request (by new SearchState, also url is updating correctly), in response there is a new portion of data, but inside connectInfiniteHits component I receive an old portion of data (by previous search state, not by current). It’s soooo bad for user experience and I don’t understand what is wrong.
This is how I’m using it if it makes sense:


image

Will be appreciate for any suggestion and help!

P.S. this functionality was working fine till some moment, from code perspective I don’t remember I’ve changed something. Truly JS magic.

Hi @andrew.beliy93, I’m not seeing the value for onSearchStateChange in your code, so it’s difficult to tell from screenshots what might be causing the issue.

This documentation about caching may be helpful.

If not, could you provide a codesandbox so that we could troubleshoot further? We have a React starter template here.

Hi, @cindy.cullen !
Thanks for reply.
Inside onSeachStateChange function I’m generating new url string, based on updatedSearchState, overwrite page url and update state.
This is implementation:
image
This is how I initialize algolia:
image
BTW, search state updates correctly based on widgets change, function fires each time, url updates correctly, the request to algolia generates by correct data and I also receive a new correct portion of data. But for some reason this data doesn’t passed to components, instead of it widgets receive old portion of data.
The strangest thing is that on localhost in dev mode it works fine, but when I deploy it to server it doesn’t work. I noticed that version of algoliasearch package was changed from 4.8.3 to 4.8.5, but as far as I see this is not the reason.

Hello!
I have an update. Seems that the problem was in react-instantsearch-dom/react-instantsearch-core v6.10.2 packages. I hardcoded v6.8.2 and it started to work. The main problem was in InfiniteHits or in StateResults connectors, for some reason they receive old cached data, but other widgets work fine. Like if I’ll change search query, the Authors in refinement list are filtered by search query (as it should), but at same time InfiniteHits works by old data.
The problem between localhost and production server was that on local package-lock.json protected me from this issue.

1 Like