Example with react-instantsearch-hooks, URL synchronisation and Next.js

[wenche]

👋 Hello!

We are implementing a search on our new web page using react-instantsearch-hooks and we are facing some troubles with understanding exactly how the URL synchronisation will work with new props for

In previous project we have used searchState and onSearchStateChange from the original React library together with next/router and that works fine.

In the new version, this is changed in favour of routing, initialUiState and onStateChanged. I notice that only the routing param mentions URL in the updated docs, and initialUiState and onStateChanged don't mention this as a thing you could use these parameters to solve unlike the non-hooks version. (And the uiState object is pretty more complex than the original searchState because of the indexName)

I don't quite understand the recommended way of doing this with the new parameters. Mainly because I don't understand how and if we can use the routing with Next.js' router instead of the internal Algolia one and the "API" of the routing object is not very well documented.

I would love to see the Next.js example repo for the hooks version to be updated with an example of URL synchronisation. 👍

[Haroenv]

The next hooks example already has URL Synchronisation: https://github.com/algolia/react-instantsearch/blob/9b096a83120396639d490000d9803f2a5bd55fb3/examples/hooks-next/pages/index.tsx#L51-L61

Is there something missing in that example for what you want to create? If you pass routing you don't need to manually listen for url changes or set ui state, that's all happening behind the scenes.

The reason the next router isn't used in that example is because in findResultsState we need to know the URL too, but that's rendered outside of the Next context.

[wenche]

Thanks, Haroen 👍

I couldn't run the example (because the hooks dom package is not public available) so I just read the code. Since it didn't use next/router I assumed this was some internal thing for Algolia. My bad. :)

However, I have played around with this for a while now and I can't make it to work 100%. (It might very well be that I'm overcomplicating things since I have a lot of previous experience here with the old library :) ). I'm struggling to understand how the Next router relates to your logic behind the scenes. Also, when I tried that code snippet with router you posted above, my application freezes on browser back. :/

What I want to do/trying to do:

1. Open the search as an overlay by pressing a button
2. Query for something, say "hello" (/test?query=hello)
3. Navigate to one of the hits on the result page by pressing the link in the corresponding Hit component (/an-interesting-hit)
4. Find that this page was not the one I'm looking for and click browser back (/test?query=hello)
5. The search overlay should open itself and restore the state and let me continue to browse the results

And plot twist: With an additional query param for controlling the chosen tab, as we have a tabbed interface for the different indexes. Like this:

So I would love to add an additional non-Algoila query param into the mix 😅

What I see:

I seems like there is too much router push instead of router replace or something. Because the outlined navigation flow will give this history on browser back
/test?query=hello
/an-interesting-hit
/test
/test?query=hello

Here's my code

Thanks in advance for your time! Really appreciate that you take your time to help the community.

[dhayab]

Hi @wenche 👋 , thanks for your feedback.

There appears to be a conflict indeed between Next router and the history router we have in InstantSearch. I've logged an issue to look into it in more depth.

In the meantime, you can achieve what you want by leveraging Next useRouter hook and React's useEffect to handle stateToRoute/routeToState sync for your tabs and the SearchBox widget.

I've set up a minimal sandbox you can access here: https://codesandbox.io/s/mystifying-pine-qjfhh1?file=/pages/index.tsx.

Let me know if you have any other questions.

[wenche]

Thanks for the reply!

I've spent some time with this and now it's like 90%. :) Some smaller things I have to look into (like it looks like the refine will remove the tab query when the search panel first opens

 if (query !== value) {
      refine(value)
    }

I don't have more time to look into this atm, but I will try to fix this at some point. :)

It would however be a nice addition if the built in router could work with Next.js' router and if you were able to pass in some custom query states beyond the UI state (that Algolia would just bypass)

[landermedia]

@dhayab I would like to ask whether there has been progress with the issue you've logged? Also, would you still suggest the same minimal sandbox you created above? My problem is pretty close to @wenche here. Thank you! This has been really a huge help.

[theocampbell]

I was wondering if this issue had been resolved ? I am experiencing the same issue at the moment using Next JS 14 (app router)/