algolia / instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/
MIT License
3.73k stars 526 forks source link

InfiniteHits with transformItems broken when using createInstantSearchRouterNext #6430

Open backflip opened 1 week ago

backflip commented 1 week ago

🐛 Current behavior

When using transformItems, loading more items in InfiniteHits is losing items. In the setup where I discovered this, the previous items were removed when loading more. In the Sandbox linked below the newly loaded items are removed after being briefly visible.

It seems to be the explicit combination of transformItems and createInstantSearchRouterNext. Removing the transformation or replacing the next router with the history router both "fix" the issue.

A workaround seems be adding a cache via createInfiniteHitsSessionStorageCache.

Screen recording of Sandbox linked below: Screen Recording 2024-11-12 at 15 26 06

🔍 Steps to reproduce

  1. Go to official createInstantSearchRouterNext sandbox: https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/react/next-routing
  2. Open index.tsx
  3. Replace <Hits hitComponent={Hit} /> with <InfiniteHits hitComponent={Hit} transformItems={(items)=> items} />
  4. Click Show more results in preview
  5. See newly added items being removed after a moment

Live reproduction

https://codesandbox.io/p/devbox/vigorous-kepler-3ymdj5

💭 Expected behavior

Using transformItems should not break InfinitHits when using next/router.

Package version

react-instantsearch 7.13.7, react-instantsearch-router-nextjs 7.13.7

Operating system

No response

Browser

No response

Code of Conduct