Updating Routing URL query parameter names v4 instantsearch.js and still have it pass query on load

I am trying to figure out how to update the default query string parameter name for the search query from “query” to anything else and I am having trouble with searching on page load breaking when supply the query string parameter.

Here is a fork of your v4 starter with the routing code stripped down to the essential parameters:

What are the necessary changes to make the routing work so that “query” can be updated to something else without it breaking the ability to navigate to the page with the query string parameter, and have it pass along that search input?

Here is my attempt, the search query string parameter updates, but if you load the page with a query parameter, it doesn’t pick up the search query:

Not sure what I am doing wrong… :frowning:

Hey @mattucci!

I believe I’ve implemented what you’re looking for here: https://codesandbox.io/s/wonderful-wright-9y5ml (Thanks for that fork to build off!) I’ve subbed in “q” for “query”.

I believe the issue is that you were returning an object which looked like this:

return {
  q: decodeURIComponent(q),
  page,
};

when parsing the URL and in the stateMapping. I kept the format like this:

return {
  query: decodeURIComponent(q),
  page,
};

which allowed me to parse it properly.

I hope this is what you are looking for!

1 Like

Awesome, thanks so much Maria! Exactly what I am looking for. I thought I had to change things in far more places than I had to!

Although v4’s router allows for more power around customizing routing and parameters, it has made is far more difficult to configure quickly some settings that used to be very simple to update, as in this case with updating the search query parameter name.

Anyways, thanks again! :slight_smile: