InstantSearchNext: URL rewritten

[bdebever]

Environment:

• NextJS 14.1.3
• Typescript
• @algolia/client-search": "^4.23.2",
• "react-instantsearch": "^7.7.1",
• "react-instantsearch-nextjs": "^0.2.0",

Actual

We are encountering a compatibility issue with the react-instantsearch-nextjs experimental package.

I had the below warning in the console.

The issue arises when I try to resolve this console message from the package:
Starting from the next major version, InstantSearch will not clean up the URL from active refinements when it is disposed.
We recommend setting `cleanUrlOnDispose` to false to adopt this change today.
To stay with the current behaviour and remove this warning, set the option to true.

Which I removed by setting the cleanUrlOnDispose=false.

I try to follow the steps in the docs link that is shared in this log message here.

However, I don't seem to be able to pass the history object or next/router singleton object (deprecated?) in the experimental package's routing prop that is required when passing a cleanUrlOnDispose argument.

What I have done

My current set up is as follow. My component is nested within a client component so I'm not on the server side.

<InstantSearchNext
        searchClient={algoliaClient}
        indexName={ALGOLIA_SUPPLIER_INDEX}
        routing={{
          router: { cleanUrlOnDispose: false },
        }}
        future={{
          preserveSharedStateOnUnmount: true,
        }}
      >
        <AlgoliaCustomHookProvider>
          <Configure
            analytics={true}
            clickAnalytics={true}
            userToken={user?.uuid || undefined} // TODO: get the ananymousID from segment when anonymous
          />
          <SearchMarketplace formattedMaterials={formattedMaterialsJSON} type={type} />
        </AlgoliaCustomHookProvider>
      </InstantSearchNext>

The warning is gone. By anywhere the component is loaded, my URL is going to be rewritten if it contains parameters that are not known by Algolia (eg test=true).

Could you shed some light?

[dhayab]

Hi, cleanUrlOnDispose only acts when the InstantSearch component is unmounted, so it isn't related to what you're experiencing.

Because InstantSearch takes over the URL when routing is enabled to store its search state in it, it doesn't allow unrelated query parameters within it by default. If you want to keep them, you need to explicitly include them by overriding the createURL router method. Here's a simple example you can use as a basis for your needs:

<InstantSearchNext
  /* ... */
  routing={{
    router: {
      createURL({ qsModule, location, routeState }) {
        const { origin, pathname, hash } = location;
        const queryString = qsModule.stringify({
          ...routeState,
          // your own query parameters
          test: true,
        });

        return `${origin}${pathname}?${queryString}${hash}`;
      },
    }
  }}
>
  /* ... */
</InstantSearchNext>