Replace/Search example is not working as expected

[krukas]

The example given in the readme does't work as expected. It will get the next page without the applied filter (this is pointed out in the function description). But even if you update the filter on the model it wont load next page depending on how big the first collection size was and on which page you are.

I tried to work around this by resetting these. This works for most cases only not when the first collection is smaller then the new one, then no new pages is loaded.

What i have tried to reset is:

model.set('currentPage', 1); model.set('_totalPages', newCollection.meta.pagination.pages); model.set('_count', newCollection.meta.pagination.count);

[snewcomer]

@krukas 👋 Which example are you referring to in the README? Moreover, can you paste more of your code? I.e. the model hook, how you are doing the filtering/searching? That way I can hopefully help more!

[krukas]

Hi @snewcomer, I'm referring to the replace example under https://github.com/ember-infinity/ember-infinity#service-methods.

The router model looks like this:

model(params) {
    return this.infinity.model('customer', {
      filter: {
        search: params.search,
      },
      sort: 'name',
      perPage: 10,
      pageParam: 'page[number]',
      perPageParam: 'page[size]',
      totalPagesParam: 'meta.pagination.pages',
      countParam: 'meta.pagination.count'
    });
  },

Controller action looks like this:

  async filterCustomers(query) {
    let customers = await this.store.query('customer', {
      filter: {
        search: query,
      },
      page: {
        number: 1,
        size: 10,
      },
      sort: 'name',
    });

    var model = this.get('model');
    
    //Updating the query and trying to reset the model 
    model.extraParams.filter.search = query;
    model.set('currentPage', 1);
    model.set('_totalPages', customers.meta.pagination.pages);
    model.set('_count', customers.meta.pagination.count);

    this.get('infinity').replace(model, customers);
  },

[krukas]

I solved it for now by not using the infinity replace and just replace the whole model with a new infinity model.

[thomasjtaylor]

@krukas Could you clarify/post the code that solved your problem? I have a similar problem that when I call

infinity.replace(this.get('model'), await store.query('customer', filter))

it correctly performs the search and replaces the current page's results with the new search results, but it keeps paginating based on the original infinity model (i.e., the unfiltered data).

[krukas]

@thomasjtaylor Sure, Like I said I just create a new infinity model:

this.set('model', this.infinity.model('customers/customer', {
      filter: {
        search: query ? query : null,
      },
      sort: 'name',
      perPage: 25,
      pageParam: 'page[number]',
      perPageParam: 'page[size]',
      totalPagesParam: 'meta.pagination.pages',
      countParam: 'meta.pagination.count'
}));

[thomasjtaylor]

Thanks @krukas
In the Controller, it appears that infinity.replace doesn't properly update its model, while this.set('model',...) does. Also, instead of store.query (as shown in the docs), I should have used infinity.model, as you suggested.

Notes:

• ❌ infinity.replace(this.model, await infinity.model('customer', filter) - caused the Controller's model to contain both the original results plus the new/filtered results.
• ❌ this.set('model', await store.query('customer', filter)' - replaces the Controller's model, but the (old)infinity.model` is still attached to the Controller and shows the 'loading...' messages
• ✅ this.set('model', await infinity.model('customer', filter)' - correctly replaced the Controller's model with a new infinity model with proper pagination. Or: infinity.model('customer', filter).then(model => set(_this, 'model', model));`

[anlumo]

Reading through the code, if you replace your model, the old one will remain in the service's infinityModels array, so that's a leak.