Unset a query parameter

I have been unsuccessfully trying to remove a query parameter from the url, the browser displays.

I found a post here in the forum, that I am able to remove the query param, if I assign a default value and set it to exactly that value. This works fine.

However, there also are situation on redirects, where this leads to the query param automatically being added to the url with its default value. So, this workaround solves one issue, but creates another one.

Is there a way to remove a query param entirely without jumping through hoops?

Hi, there. I think it may help others if you can post code to show exactly how you’re using the query parameter. :slightly_smiling_face:

The answer may depend on where you’re updating the query parameter, but I think you may be able to pass the value of undefined to remove the parameter from the URL.

mea culpa. This almost drove me nuts yesterday. Just gave it another look today and everything seems to work fine. The key point seems to be to define a tracked variable for the param:

In controller: This will NOT update the query param if it set to undefined

queryParams = ['invitation'];

However, this seems to work just fine:

queryParams = ['invitation'];
@tracked invitation;

the really weird thing is: some query params seem to require a tracked variable to make it work correctly, while some others don’t. Maybe that’s related to the in-progress migration to octane and native classes.

That reminds me there was a big thread about query params and tracked a little while back, maybe that will be helpful.

Thanks for the comment. However, that raised more questions than it solved. like that one https://github.com/emberjs/ember.js/issues/18715 about performance issue when using @tracked with query params. Didn’t notice any issues so far, but will hold off the deployment and try to replace @tracked with set - just to be sure.