When it comes to Query Params it can be frustrating to have to prop drill from a controller to components especially with the data-down actions-up paradigm doubling the prop drilling.

This pattern makes this much better by pushing the properties into a Cell object.

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

class MyQueryParams {
  @tracked foo = '';
  @tracked bar = '';
}

export default class MyController extends Controller {
  params = new MyQueryParams();
  queryParams = [
    { 'params.foo': 'foo' },
    { 'params.bar': 'bar' },
  ];
}

With this example we have the ability to pass this.params to any component and within the component they can set properties and everything just works.