Ember.js: Router Service transitionTo breaks with Query Params on nested transition

Created on 20 Jan 2019  路  12Comments  路  Source: emberjs/ember.js

Calling transitionTo on a service in the context of an existing transition causes an assertion error to be thrown.

Example Twiddle here

Minimal logic from the reproduction above is: index route's beforeModel calls the auth service's ensureSignedIn method which uses the router's transitionTo method and includes a query param.

Calling it results in:

Assertion Failed: You passed the `login:security_key` query parameter during a transition into login, please update to security_key
Has Reproduction Needs Bug Verification Router Bugs

Most helpful comment

We were able to temporarily fix this using RouterService#urlFor method:

Controller.extend({
  router: service(),

  actions: {
    moveUser() {
      // before:
      this.get('router').transitionTo(routeName, routeParamOne, routeParamTwo);

      // after:
      this.customTransition(routeName, routeParamOne, routeParamTwo);
    }
  },

  customTransition(...params) {
    const url = this.get('router').urlFor(...params); // build url first

    this.get('router').transitionTo(url); // and make transition

    // And if you need to preserve query params, I guess you can use `window.location.search` and add this to url like:
    this.get('router').transitionTo(url + window.location.search);
  }
})

All 12 comments

I have a similar error when trying to make transitionTo() into model(){}

this.get('router').transitionTo('tutor', tutorId, {queryParams: {anchor: 'user-balance'}});
Assertion Failed: You passed thetutor.index:anchorquery parameter during a transition into tutor.index, please update to anchor

I'm also seeing the problem.

  • I have a reports and a reports.report child route
  • reports.report controller has queryParams: ['startDate', 'endDate']
  • reports route's setupController calls:
this.get('router').transitionTo('reports.report', report_id, {
  queryParams: {
    startDate: startDate.format('DD-MM-YYYY'),
    endDate: endDate.format('DD-MM-YYYY')
  }
});
  • results in the error on ember inspector's promises tab:
Error: Assertion Failed: You passed the `undefined:startDate` query parameter during a transition into reports.report, please update to startDate

I was able to track the problem up to this point:

screen shot 2019-01-25 at 17 28 57

Was able to reproduce this on ember 3.3.2, 3.4.8, 3.5.1, 3.6.1 and 3.7.
It was working with 2.18.2.

Weird thing is that it works with the router's this.transitionTo. Just doesn't work with the router service.

This is still an issue with Ember 3.8.2

I ran into this issue as well - good to know that it is scoped just to the router service.

ember-source 3.8.1 + ember-simple-auth >= 1.9.0

Problem occurs with an unauthenticated redirect (AuthenticatedRouteMixin#triggerAuthentication()) into a query-parameterized route.

ember-source 3.12.0 throws an error as in https://github.com/emberjs/ember.js/issues/14875#issuecomment-283152339
but seemingliy whithout affecting application functionality

Hit this today, ember-source 3.13.4

I was thinking that this is fixed in 3.14 by https://github.com/emberjs/ember.js/pull/18244, anyone have a minute to try to confirm / deny?

We were able to temporarily fix this using RouterService#urlFor method:

Controller.extend({
  router: service(),

  actions: {
    moveUser() {
      // before:
      this.get('router').transitionTo(routeName, routeParamOne, routeParamTwo);

      // after:
      this.customTransition(routeName, routeParamOne, routeParamTwo);
    }
  },

  customTransition(...params) {
    const url = this.get('router').urlFor(...params); // build url first

    this.get('router').transitionTo(url); // and make transition

    // And if you need to preserve query params, I guess you can use `window.location.search` and add this to url like:
    this.get('router').transitionTo(url + window.location.search);
  }
})

We were able to temporarily fix this using RouterService#urlFor method:

Controller.extend({
  router: service(),

  actions: {
    moveUser() {
      // before:
      this.get('router').transitionTo(routeName, routeParamOne, routeParamTwo);

      // after:
      this.customTransition(routeName, routeParamOne, routeParamTwo);
    }
  },

  customTransition(...params) {
    const url = this.get('router').urlFor(...params); // build url first

    this.get('router').transitionTo(url); // and make transition

    // And if you need to preserve query params, I guess you can use `window.location.search` and add this to url like:
    this.get('router').transitionTo(url + window.location.search);
  }
})

Feels like a hack, but works like a charm. Good enough for me until version update

In case it's helpful, here's a really minimal repro in a twiddle.

I am seeing this issue in [email protected]

Ran into this just now as well. Have seen it intermittently previously. The ESA link seems likely

Was this page helpful?
0 / 5 - 0 ratings

Related issues

workmanw picture workmanw  路  79Comments

matheusdavidson picture matheusdavidson  路  37Comments

rlivsey picture rlivsey  路  34Comments

robharper picture robharper  路  75Comments

Yelinz picture Yelinz  路  47Comments