Remote paginated API & page as query param does not work with newer Ember (~3.15.0)

[MichalBryxi]

What I'm trying to achieve is to have "Remote Paginated API" with persisted page paremeter as a query param.

Assume following code based on the Remote Paginated API section from README:

// route.js

import Route from "@ember/routing/route";
import RouteMixin from "ember-cli-pagination/remote/route-mixin";

export default class ItemsRoute extends Route.extend(RouteMixin) {
  queryParams = {
    page: {},
  };

  model(params) {
    return this.findPaged("item", params);
  }
}

// controller.js

import Controller from "@ember/controller";
import { alias } from "@ember/object/computed";
import { tracked } from "@glimmer/tracking";

export default class ItemsController extends Controller {
  queryParams = ["page"];
  page =  alias("model.page");
}

// template.hbs

...
<PageNumbers @content={{@rows.content}} />

This code gives me:

helpers.js:114 Uncaught Error: Assertion Failed: EmberObject.create no longer supports
defining computed properties. Define computed properties using extend() or reopen() 
before calling create().

Which points to this line in route-mixin.js

[broerse]

I don't have much time to look at this but you should somehow switch to @Tracked and extends like this:

https://github.com/broerse/ember-cli-blog/blob/master/app/controllers/posts.js

And use @alias like this https://api.emberjs.com/ember/release/functions/@ember%2Fobject%2Fcomputed/alias maybe

[MichalBryxi]

Thank you @broerse. I think the correct syntax then is:

// router.js

import Route from "@ember/routing/route";
import RouteMixin from "ember-cli-pagination/remote/route-mixin";

export default class ItemsRoute extends Route.extend(RouteMixin) {
  queryParams = {
    page: {},
  };

  model(params) {
    return this.findPaged("item", params);
  }
}

// controller.js

import Controller from "@ember/controller";
import { alias } from "@ember/object/computed";
import { tracked } from "@glimmer/tracking";

class QueryParamsObj {
  @tracked page = 1;
  @tracked perPage = 5;
  @tracked query = "";
}

export default class ItemsController extends Controller {
  queryParams = [{ "queryParamsObj.page": "page" }];

  queryParamsObj = new QueryParamsObj();
  @alias("model.page") page;
}

// template.hbs

...
<PageNumbers @content={{@rows.content}} />

Which gives me following error:

Error: Property set failed: object in path "model" could not be found.

But when I try to log the model.page I get:

{{log "model.page: " this.model.page}} // model.page:  1

Which seems ok. The only thing is that the value of model.page is unresolved at that moment. Maybe that's why the alias is unhappy? 🤷

[broerse]

This addon works with Ember version 3.12.x and below and from Ember version 3.16.2 up to 3.28. We have local Pagination working in ember 4 see bloggr.exmer.com. If someone can help with making remote pagination work in Ember 4 as mixins and array observers are fully deprecated. It needs to be rethought.