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.67k stars 514 forks source link

Next.js - createURL function called outside of instant search context #5507

Open FaroukMekk opened 1 year ago

FaroukMekk commented 1 year ago

🐛 Current behavior

I use the createURL options to personalize the URL of my search page with the new next.js router.

However, I see that this function is called even after I quit the search page and it generates troubles with the routing of the others pages.

🔍 Steps to reproduce

Live reproduction

https://codesandbox.io/p/sandbox/exciting-wright-yxmy7k?file=%2Fpages%2Findex.js&selection=%5B%7B%22endColumn%22%3A15%2C%22endLineNumber%22%3A35%2C%22startColumn%22%3A15%2C%22startLineNumber%22%3A35%7D%5D

💭 Expected behavior

createURl shouldn't be called outside of instant search context

Package version

react-instantsearch-hooks 6.40.1

Operating system

No response

Browser

No response

Code of Conduct

aymeric-giraudet commented 1 year ago

Hi @FaroukMekk, thanks for using InstantSearch and raising this issue !

Indeed, history router does call write when it gets disposed of : https://github.com/algolia/instantsearch/blob/c199febbc3381df574afbb2504edd7373b32904a/packages/instantsearch.js/src/lib/routers/history.ts#L234

While it makes sense to do so when calling dispose while still on the search page, this probably should not be the case when going onto a different page.

We'll fix that if not too impactful and will get back to you once it's done :)

Haroenv commented 1 year ago

I believe the solution would be https://github.com/algolia/instantsearch/issues/4162

FaroukMekk commented 1 year ago

Do you think that there is an easy workaround while waiting for a possible fix ?

Haroenv commented 1 year ago

The easiest workaround is taking the code of the history router, adopting it in your app, and removing the this.write in the dispose function, or using patch-package to remove it.

Otherwise if you have a good idea what an option should be called for disabling cleanup / write on unmount / dispose, we'd happily think about this further, as there's some edge cases where it would help to disable the cleanup.