Troubles getting query parameters to work

Questions General
1

Hi,

I’ve got a specific scenario where using query parameters on my controller seems to not be working for me. Feels like some kind of race condition is happening. I’m setting two parameters location and assigned. They are both IDs to the same kind of Ember Data model. The idea is the user can select from a two different dropdowns of said objects and that updates the parameters and of course on page load those IDs get used to load and set the selected model objects for the dropdown.

Now for my problem. When I perform a page load with only one of them set in the url everything works. When both are there one of them will attempt to be set but will then get nulled out and unset. One thing I notice with parameters and using getter/setter for them is the sheer amount of times Ember calls them on page load. Doesn’t make sense to me…

Below is the the reduced down code I’m using that’s giving me issues. I’ve omitted unnecessary parts for brevity.


export default class AssetsController extends Controller {
  queryParams = [
    'location',
    'assigned',
  ]
  
  selectedLocation = null;
  selectedAssigned = null;


  /***** Getters ******/
  @computed('selectedLocation')
  get location() {
    if (isNone(this.selectedLocation)) {
      return null;
    }

    return this.selectedLocation.get('id');
  }

  set location(value) {
    this.setLocationFromParamTask.perform(value);
  }

  @computed('selectedAssigned')
  get assigned() {
    if (isNone(this.selectedAssigned)) {
      return null;
    }

    return this.selectedAssigned.get('id');
  }

  set assigned(value) {
    this.setAssignedFromParamTask.perform(value);
  }


  /***** Tasks ******/
 @task(function * (value) {
    let location = isNone(value) ? null : yield this.fetchLocationTask.perform(value);
    this.set('selectedAssigned', location);
  }).restartable() setAssignedFromParamTask;

  @task(function * (value) {
    let location = isNone(value) ? null : yield this.fetchLocationTask.perform(value);
    this.set('selectedLocation', location);
  }).restartable() setLocationFromParamTask;
}

As an example of what I said above where the amount of calls to the getter/setter happens here’s the console output I get when I put console logs in various places:

location getter: isNone
assigned getter: isNone
location setter: null
selecting location from param: null
location getter: isNone
assigned setter: null
selecting assigned from param: null
assigned getter: isNone
location setter: 757
location getter: isNone
assigned setter: 1027
assigned getter: isNone
location setter: 757
location getter: isNone
assigned setter: 1027
assigned getter: isNone
// This sets selectedLocation to the model object with ID 757 and shows up selected.
selecting location from param: 757 
location getter: 757
assigned setter: null
// This sets selectedAssigned to null but should be a model object with ID 1027.
selecting assigned from param: null
assigned getter: isNone
2

What Ember version are you using? This looks like a big I know to exist in Ember 3.8 and higher. At a minimu it’s similar to this issue; if not you may find it in the list of known router issues—there are unfortunately a fair number of them right now. If none match exactly, please file a new one!

3

Thanks for the info. I scanned through and didn’t see anything that jumped out at me. Possibly related though. I created a ticket here.

To summarize something in that ticket I discovered that my issue all but disappeared when I enabled the optional feature “default-async-observers”.