Filtering, Pagination with JSON API

I’m wondering - the now recommended way to use ember/ember-data with a backend is with json api… so far, so good… Now that I have switched my backend to respond and receive json api its about time to switch the ember frontend to work with json api and here begins the trouble… I just want to paginate a route, the recommended spec is to have something like : page[number]=1&page[size]=5 … something like that. Now try to set object queryParams - its just not working or do I miss something?

//some-route.js 
queryParams: {
    page: {
      number: {
        refreshModel: true
      },
      size: {
        refreshModel: true
      }
    },
    sort: {
      refreshModel: true
    },
    filter: {
      title: {
        refreshModel: true
      }
    }
  },

  //some-controller.js
  queryParams: ['page[number]', 'filter[title]'],
  pageBinding: 'content.page.number',
  totalPagesBinding: 'content.total',
  perPageBinding: 'content.page.size',
  page: {
    number: 1,
    size: 10
  },
  filter: {
    title: null
  }

Tried several other ways (just had ‘page’ instead of ‘page[number]’ as queryParams property and so on…) but none was working. So, why should one use JSON API with ember when ember/ember-data is not ready? Again… or do I miss some basic stuff here?

Never worked with JSON API yet but interesting in. By saying “none was working”, what is the actual behaviors under your observations?

I’ve looked your examples and wondering whether or not page params didn’t react for UI related changes? Have you ever try to set it in Ember.Object instead of primitive object, I mean like page: Ember.Object.create({ number: 1, size: 10 })?

It does not react though… Tried your suggestion with the Ember object but does not work either.

From here Ember Query Param API examples · GitHub it seems that object query params are just not working :confused: . Still wondering if Ember is really ready to be used with JSON API… I doubt it.

Okay…that’s bad.

My quickest thoughts of possible solution is to override the Route.deserialize hook, so you just define queryParams as usual then transform it to JSON API compatible version to continue the transition. If it’s work as my expectation, then you’ll have different structured queryParams in the model hook than what it is in controller (UI side)

or maybe just leave Routes as normal and make these transformations in the ember-data’s adapter, I guess?

Yeh, think I have to do it this way sigh :wink:

Curious to know if object based query params are now supported in the latest version of Ember or if there is planned support in the pipeline. Struggling to find any info about it in the docs. e.g. /listing?filter[categories]=101,102,103&filter[tags]=a-test-tag,another-tag

3 Likes