Best way to refresh data after query

1

As in the title - I am fetching data using query but when I add more data to the collection the display doesn’t update… Because it was fetched via query.

What’s the best way to make sure that data is visible in my UI after updating the collection?

1 Like
2
3

Actually this won’t work because store.filter has been deprecated…

Anyone got any clues here?!

4

To be clear - I have a route that fetches multiple models using RSVP.hash:

model: function() {
    return Ember.RSVP.hash({
        ...
        relationship: _this.store.filter('campsite-relationship', {
            //query
        }, function(rel){
            //the filter implementation
        })
    });
},
setupController: function(controller, models) {
    	controller.set('relationship', models.relationship);
}

Pretty standard I think…

relationship is being passed down to a component (DDAU stylee)

However, when updating the campsite-relationship collection, the filter gets called but the UI is never updated. Setup controller is never called again, so it’s not being passed to the component.

What is the advised way of dealing with this?

I’m at a loss and to be fair this should be simple! I accept I must be missing a trick here. Can someone please advise? I’ve been stuck on this for a while now

6

I just did something similar. In the controller a create a new widget-page when that is successful I send a message to the router asking it to refresh itself.

  export default Ember.Controller.extend({
    queryParams: [ 'p', 'o', 'd', 'q' ],
    . . . .
    actions {
      createPage: function() {
        let cntrl = this;
        let page = this.store.createRecord('widget-page');
        page.save().then(function() {
          cntrl.send('refreshModel');
        }, function() {
          // TODO: do something to indicate error...
        });
      }
    }
  }

And in the route it was:

export default Ember.Route.extend({
  queryParams: {
    p: {
      refreshModel: true
    },
    . . . .
  },
  model: function(params) {
    var widgetPages = this.store.query('widget-page', params);
    return widgetPages;
  },
  actions: {
    refreshModel: function() {
      this.refresh();
    }
  }
});