React-instantsearch-hooks-router-nextjs: SearchState not kept in URL when page transitioning

[Rob Schilder]

🐛 Current behavior

Hello Algolia team,

I hope you're all doing well! I just wanted to start by saying a huge thank you for the amazing work you've put into the Algolia package. It's been an incredibly valuable tool for our project, and we truly appreciate it. Today, I'd like to share a bug that we've come across in hopes of getting some guidance on how to resolve it.

Issue Description:

We are experiencing an issue with the react-instantsearch-hooks-router-nextjs package. The doNotOverrideBeforePopState boolean functionality that was present in the experimental package seems to be missing.

Previously, we used instantsearch-router-next-experimental": "^0.0.5 to address the router not getting along with Next.JS. We found that using createInstantSearchNextRouter with doNotOverrideBeforePopState: true resolved the problem:

   <InstantSearch
      searchClient={searchClient}
      indexName={indexName}
      routing={{
        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
        router: createInstantSearchNextRouter({ serverUrl: undefined, doNotOverrideBeforePopState: true }),
      }}
    >

However, in the newer react-instantsearch-hooks-router-nextjs package, the doNotOverrideBeforePopState prop is no longer available, and we are experiencing the same issue once again.

Could you please advise how to replicate the behavior from the experimental package, or if there is an alternative solution for client-side rendering (CSR) only to address this issue?

I apologize for not being able to provide a reproduction at this time, but I hope this description and the provided code snippet are sufficient to understand the issue. Any guidance would be greatly appreciated.

Cheers!

🔍 Steps to reproduce

1. Set up a Next.js project with Algolia and use the instantsearch-router-next-experimental, make sure to omit the serverurl option.

2. Implement a search using .

3. Click on a SearchItem, which navigates to the item's detail page.

4. Use the browser's back button to return to the search results page. You see that the URL state is removed.

5. Now add the doNotOverrideBeforePopState:true prop. Simulate the same behavior. You will see that the URL state is kept.

6. Do the same for the react-instantsearch-hooks-router-nextjs package. You will see that the old behavior, seen in step 4, is happening again.

Live reproduction

https://codesandbox.io/s/github/algolia/instantsearch.js/tree/templates/react-instantsearch-hooks

💭 Expected behavior

Expected Behavior:

Upon returning to the search results page, the URL state should be preserved, displaying the same search results and filters as before.

Actual Behavior:

The URL state is lost when returning to the search results page, and the search results and filters are reset.

Package version

react-instantsearch-hooks-router-nextjs 6.42.0

Operating system

macOS, Windows

Browser

Chrome

Code of Conduct

• I agree to follow this project's Code of Conduct

[Aymeric Giraudet]

Hi @RobSchilderr,

Thanks for raising this issue !

We changed doNotOverrideBeforePopState to a beforePopState option which is more powerful as it can be composed with the library's own beforePopState.

To do the same thing as doNotOverrideBeforePopState, you can do this :

createInstantSearchRouterNext({
  beforePopState: ({ state, ownBeforePopState }) =>  { 
    return ownBeforePopState(state);
  }
})

ownBeforePopState will be your pre-existing beforePopState, which is just () => true by default.

You can check more of the usage in the documentation : https://www.algolia.com/doc/api-reference/widgets/instantsearch-next-router/react-hooks/

[Ali Hamidaddin]

@aymeric-giraudet I am also facing a similar issue but the solution you provided didn't work for me.

As soon as I open a link in the page with a search query /search?query="test" it gets cleared to /search only as you see below.

This happens when I navigate from another page or when reload the page with a query link.
Routing inside the same page doesn't clear the queries.

[Aymeric Giraudet]

Hi @Alihd1 !

Could you provide a reproduction ?

This could be due to widgets unmounting when being initialised, this would clear the state. It's a recurring problem, you have to make sure whatever is inside InstantSearch never unmounts.

[Ali Hamidaddin]

Hi @aymeric-giraudet,

I made a reproduction link, I can see the same issue occurring.

https://codesandbox.io/p/sandbox/silly-breeze-yzhyt3?file=%2Fpages%2Findex.tsx%3A76%2C69

Click on Link "Navigate to Other Page" and on the other page click the link to return to search page with queries.
You should see the url quries clear as soon as you navigate to the search page.

[Aymeric Giraudet]

Hi @Alihd1,

This is a different issue than the one posted here which had to do with beforePopState being overridden.

The issue you have is that the query is not correct, it should mention the indexName and the key is query not que. Also the value should not be wrapped in quotes.

Instead of /?que='iphone' it should be /?instant_search%5Bquery%5D=iphone, you can see this CodeSandbox forked from yours works : https://codesandbox.io/p/sandbox/silent-surf-hdn8lx?file=/pages/other-page.tsx:11,5

To learn more about routing in InstantSearch, you can follow this guide : https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react-hooks/

[Aymeric Giraudet]

Hi @RobSchilderr,

Could you please confirm the solution I provided works for you so I can close this issue ?

Thank you 🙏

[Ali Hamidaddin]

Hey @aymeric-giraudet ,I Appreciate your swift response.

Thank you for answer, really helped clarify this to me. I now need to look into sending a custom query not related to algolia widgets.