Is there no way to replace queryParam completely? (the case for queryParam.replace() to be added)

Ask the community
,
1

From what I understand, you can only use .add() and .remove() to edit queryParam, however this is far from optimal. Consider the following: a user is viewing /shop?category=[“ring”]&page=2 changes the filter to have only diamond rings and you want the queryParam to become something like /shop?category=[“ring”]&material=[“diamond”] . You have to add ‘{material:diamond}’ to the queryParam and then remove ‘page’.

However, when you use an .add() and .remove(), each step is recorded into the browsing history automatically. There doesn’t seem to be anyway to prevent the browser from storing it into the history, so the user’s history becomes something like this:

1. /shop?category=["ring"]&page=2
2. /shop?category=["ring"]&page=2&material=["diamond"]
3. /shop?category=["ring"]&material=["diamond"]

This isn’t too big of an issue while going from 1 to 3, as it just skips 2 without the user even noticing, but when the user wants to back, the browser brings them to the queryParam from 2 which the user never actually went to and may not even be a valid queryParam necessitating an extra back navigation despite in the users POV, they should only need to click it once as they never even see 2.

A workaround is to not remove page and instead set page=1 so that you get and add the material queryParam as usual:

1. /shop?category=["ring"]&page=2
2. /shop?category=["ring"]&page=1&material=["diamond"]

But that just looks a bit sloppy and while most people probably don’t really care about the URL, from a “developer’s” point of view, it just looks unpolished, and now you’re stuck with an arguably unnecessary queryParam

This issue also extends to the inability to keep queryParams in a consistent order ie: category, material, color.
With the current limitations, it seems the order of the queryParam is dictated by the order in which the customer chooses the filter.
So if someone clicks material first and then category it becomes:

1. /shop?material=["diamond"]
2. /shop?material=["diamond"]&category=["ring"]
Rather than the order I want which is:
 /shop?category=["ring"]&material=["diamond"]

Again, while these issues are minor, the simple inclusion of a queryParam.replace() or something similar that would allow the complete replacement of queryParam would solve these minor issues easily and make the website much more polished in both the way it looks and the way it runs.

1 Like