Preserving non-Ember-app query parameters when navigating within App

Questions Routing
1

When transitioning using routerService.transitionTo("/home?a=b"), or via <LinkTo, Ember seems to strip out any query parameters which are not configured in the destination route/controller.

This makes sense if Ember is the only thing consuming the query parameters.

However, we have a number of situations where we want to preserve all query parameters. For example: we want to be able to add a link with an analytics parameter like /home?utm_campaign=foo, and have that parameter preserved when transitioning to the route. We don’t necessarily have a list of all the possible query parameters in advance, so ideally we would allow everything.

I can’t find anything in the documentation about this. Does anyone know of any solutions or safe(-ish) workarounds? As it stands, it seems like we’d be stuck overriding internal methods on the router… which obviously isn’t ideal :cold_sweat:

2 Likes
2

I’m not saying you should do this, but one thing you can do is use an instance initializer, this super naive proof-of-concept worked ok:

export function initialize(applicationInstance) {
 const queryParams = document.URL.split('?')[1].split('&').map(s => s.split('=')[0])
 const controller = applicationInstance.lookup('controller:application');
 controller.queryParams =  [...controller.queryParams, ...queryParams];
}

export default {
 initialize
};

No other ideas are jumping to mind. My other thought was look at the ember-query-params-service but that has this note in the README:

there is still a dependency on controllers if you want to be able to link to routes with query params. This is due to an allow-list that’s implemented in the route resolver.

So you might still be subject to the same challenge there

1 Like