Issue with URL Parameters Being Cleared AUTOMATICALLY by Algolia Wrapper in Next.js App router dir.

[dharmveer97]

🐛 Current behavior

I am experiencing an issue with the react-instantsearch library (version 7.12.3) in a Next.js project where URL parameters are being automatically cleared when using Google Tag Manager. Specifically, when I append parameters to the URL (e.g., ?test124), these parameters are being removed by the Algolia wrapper.

🔍 Steps to reproduce

1. Open the CodeSandbox:

Visit the following URL: CodeSandbox Example. https://u5wneu.csb.app/?gtm_debug=1724106408152

2. Observe the Behavior:

Check the URL in your browser’s address bar. You should see the parameter ?gtm_debug=1724106408152 appended to the URL.

Interact with the Application:

Perform any action or refresh the page as needed. Note that the URL parameter should remain in the address bar. Observe the Issue:

After performing actions or refreshing, notice that the parameter ?gtm_debug=1724106408152 is automatically removed or cleared from the URL.

Live reproduction

https://u5wneu.csb.app/?gtm_debug=1724106408152

💭 Expected behavior

The URL parameter should persist and not be removed or cleared by the Algolia wrapper or any other part of the application.

Package version

react-instantsearch: ^7.12.3

Operating system

macOs

Browser

Ms. Edge

Code of Conduct

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

[dharmveer97]

also i tried to use another library using next js and I got sane issue

import algoliasearch from 'algoliasearch/lite';
import { Configure } from 'react-instantsearch';
import { InstantSearchNext } from 'react-instantsearch-nextjs';

let searchClient;

try {
  searchClient = algoliasearch(
    process.env.ALGOLIA_APPLICATION_ID,
    process.env.ALGOLIA_ADMIN_KEY,
  );
} catch (error) {
  console.error('Error initializing Algolia:', error);
  searchClient = null; // Set searchClient to null to prevent further attempts
}

const AlgoliaWrapper = ({ children }) => {
  const indexName = process.env.ALGOLIA_INDEX;
  if (!searchClient) {
    return (
      <div>
        Search functionality is currently unavailable. Please try again later.
      </div>
    );
  }
  return (
    <InstantSearchNext
      searchClient={searchClient}
      indexName={indexName}
      routing
      future={{ preserveSharedStateOnUnmount: true }}
    >
      <Configure filters="status:active" />
      {children}
    </InstantSearchNext>
  );
};

export default AlgoliaWrapper;

[Haroenv]

You need to explicitly keep non-InstantSearch parameters in the URL like this:

function cleanState<TIndexUiState extends IndexUiState>(
  uiState: TIndexUiState
): TIndexUiState {
  // @ts-ignore
  const { configure, gtm_debug, ...trackedUiState } = uiState;
  return trackedUiState as TIndexUiState;
}

const routing = {
  stateMapping: {
    stateToRoute(uiState: UiState) {
      const gtm_debug =
        new URLSearchParams(location.search).get("gtm_debug") || undefined;
      return Object.keys(uiState).reduce(
        (state, indexId) => ({
          ...state,
          [indexId]: cleanState(uiState[indexId]),
        }),
        {
          gtm_debug,
        } as UiState
      );
    },
    routeToState(routeState = {} as UiState) {
      return Object.keys(routeState).reduce(
        (state, indexId) => ({
          ...state,
          [indexId]: cleanState(routeState[indexId]),
        }),
        {} as UiState
      );
    },
  },
};

https://codesandbox.io/p/sandbox/young-moon-qkf4y4