Search code examples
ember.jsember-cli

How to properly use parameters in Ember query?


I have been trying to implement pagination (I've tried both ember-cli-pagination and ember-simple-pagination) for my application but I've had a lot of issues. So I decided to try custom pagination and noticed that I cannot pass parameters into my query. For instance, when visiting my api at: http://jsonplaceholder.typicode.com/posts?_start=0&_limit=10, start and limit both work properly. When calling it in my route, it seems to ignore that entirely and just give me all entries. I would appreciate all insight into what I am doing wrong or how to properly implement pagination in this case.

app/adapters/post.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  host:'https://jsonplaceholder.typicode.com',
  pathForType(){
    return 'posts';
  }
});

app/models/post.js

import DS from 'ember-data';
const { Model } = DS;

export default Model.extend({
  user:DS.belongsTo('user'),
  title:DS.attr('string'),
  body:DS.attr('string'),
});

app/routes/post.js

import Route from '@ember/routing/route';
import { set } from '@ember/object';
import { hash } from 'rsvp';

export default Route.extend({
  model() {
    return hash({
      post: this.store.query('post', {
                start: 0,
                limit: 10
            }),
      user: this.store.findAll('user')
    });
  },

  setupController(controller, model) {
    this._super(...arguments);
    set(controller, 'posts', model.post);
    set(controller, 'users', model.user);
  }

});

Solution

  • You need define the query params in both side Route and Controller.

    app/routes/post.js

    import Route from '@ember/routing/route';
    import { set } from '@ember/object';
    import { hash } from 'rsvp';
    
    export default Route.extend({
      queryParams = {
        start: {
         refreshModel: true
        },
        limit: {
          refreshModel: true
        }
      },
      model() {
        return hash({
          post: this.store.query('post', {
                    start: 0,
                    limit: 10
                }),
          user: this.store.findAll('user')
        });
      },
    
      setupController(controller, model) {
        this._super(...arguments);
        set(controller, 'posts', model.post);
        set(controller, 'users', model.user);
      }
    });
    

    And inside app/controllers/post.js

    import Controller from '@ember/controller';
    
    export default class ArticlesController extends Controller {
      queryParams = ['start', 'limit'];
      start = 1;
      limit = 5;
    }
    

    Ember by default does not call model when query params are changed. We tell it to do so any time start/limit changes, through refreshModel: true.