Routing removes non-InstantSearch query params

[Rodrigo]

🐛 Current behavior

Access to the route https://qqsx4m-3000.csb.app?test="test" remove the query param https://qqsx4m-3000.csb.app

🔍 Steps to reproduce

1. Enter to the codesandbox
2. Replace the url with a query param, example ?test="test"
3. Reload the url
4. The query param should be removed

Live reproduction

https://codesandbox.io/p/sandbox/next13-4-4-forked-rdd5h9

💭 Expected behavior

The query param should not be removed

Package version

7.0.3

Operating system

No response

Browser

No response

Code of Conduct

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

[Aymeric Giraudet]

Hi @RodrigoTomeES,

Do you mean it removes search params that are unrelated to InstantSearch ? If so, that's how the InstantSearch router functions, regardless of the framework used.

When I got to https://qqsx4m-3000.csb.app/?instant_search%5BrefinementList%5D%5Bbrand%5D%5B0%5D=Samsung however it doesn't remove the param as it's recognized by InstantSearch.

If you want non InstantSearch params to be persisted, you can implement your own createURL and parseURL to persist your other parameters : https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react/#rewriting-urls-manually

[Rodrigo]

@aymeric-giraudet Yes, I mean that it removes search params that are unrelated to InstantSerch for example if the URL has UTM params we can't track it because InstantSearch removes it. I think that resolve it implementing our own createURL and parseURL it's a lot of work for a simple problem or is there a simple way to implement it?. Is there no way to disable this behavior?

[Rodrigo]

@aymeric-giraudet hi, is there any plan to add an option to disabled this behavior? thanks!

[Haroen Viaene]

InstantSearch is the source of truth for routing. If you want certain keys to stay you can:

1. read the utm parameters before starting InstantSearch and store them
2. in router.createURL, add the utm parameters back to the URL

We don't yet have a manner of simplifying this.

[Rodrigo]

@Haroenv Okay, I will implement it, but I don't understand why Instant search remove extra query params by default 😅. Thanks!

I will put here the code when I implemented it and then close the issue.

[Sébastien Hernoux]

I've achieved the same issue for UTM query params with Next + ReactInstantSearch.

I had to migrate from React instant search v6 to v7.
I set serverStateProps props to my <InstantSearch /> component.

Then in createInstantSearchRouterNext in routerOptions, I wrote parseURL and createURL methods like this :

parseURL({ qsModule, location }) {
  return qsModule.parse(location.search.slice(1));
}

createURL({ qsModule, location, routeState }) {
  const { origin, pathname, hash } = location;

  const queriesFromUrl = qsModule.parse(location.search.slice(1));

  // Get all extraneous queries from the URL used for UTM
  const utmQueries = Object.keys(queriesFromUrl)
    .filter((key) => !Object.keys(routeState).includes(key))
    .reduce((acc, cur) => {
      acc[cur] = queriesFromUrl[cur];

      return acc;
    }, {});

  // Create query string with facet filters and UTM queries
  const queryString = qsModule.stringify({ ...routeState, ...utmQueries });

  return `${origin}${pathname}${queryString ? `?${queryString}` : ''}${hash}`;
}

I hope it will help!

[Rodrigo]

@Hashs7 thanks for sharing your code! I will try it because I didn't have time to implement it yet

[Rodrigo]

Hi! We had been implemented the solution of @Hashs7 and it works perfectly so I will close the issue but I think this use case should be added to the Algolia documentation and how to fix it @Haroenv

Thanks you so much to all

[Haroen Viaene]

Thanks, I've just added code similar to the one shared by @Hashs7 to the documentation. Thanks for your contribution and testing!