how to do pagination using mirage fake data in emberjs?

Question

I am using mirage for creating fake data.

scenario/default.js

export default function(server) {
  server.createList('product', 48);
  server.loadFixtures();
}

Above I am creating 48 products and from controller I am calling

this.store.query('product', {
                filter: {
                    limit: 10,
                    offset: 0
                }
            }).then((result) => {
                console.log(result);
            });

and in mirage/config.js

this.get('/products', function(db) {
    let products = db.products;
    return {
      data: products.map(attrs => ({
        type: 'product',
        id: attrs.id,
        attributes: attrs
      }))
    };
  });

now my question is, how to load 10 products per page? I am sending in filter 10 as page size and offset means page number.

what changes should be done to config.js to load only limited products?

Answer 1

In your handler in mirage/config.js:

this.get('/products', function(db) {
    let images = db.images;
    return {
      data: images.map(attrs => ({
        type: 'product',
        id: attrs.id,
        attributes: attrs
      }))
    };
  });

You are able to access the request object like so:

this.get('/products', function(db, request) {
    let images = db.images;
    //use request to limit images here
    return {
      data: images.map(attrs => ({
        type: 'product',
        id: attrs.id,
        attributes: attrs
      }))
    };
  });

Have a look at this twiddle for a full example. Where the this twiddle has the following:

  this.get('tasks',function(schema, request){
    let qp = request.queryParams
    let page = parseInt(qp.page)
    let limit = parseInt(qp.limit)
    let start = page * limit
    let end = start + limit
    let filtered = tasks.slice(start,end)
    return {
      data: filtered
    }
  })

You'll just adapt it for your use like this:

  this.get('products',function(db, request){
    let qp = request.queryParams
    let offset = parseInt(qp.offset)
    let limit = parseInt(qp.limit)
    let start = offset * limit
    let end = start + limit
    let images = db.images.slice(start,end)
    return {
      data: images.map(attrs => ({
        type: 'product',
        id: attrs.id,
        attributes: attrs
      }))
    }
  })