Search code examples
ember.jsdatastore

How do I backgroundReload in multiple stages in Ember?


I'm fetching a list of records, say posts, without relationships. When I pick a single post, I would like to see the post immediately, and background-load its relationships.

This is possible like so:

this.store.findRecord('posts', params.id, {
    reload: false,
    backgroundReload: true,

Once the relationships are loaded, the view is automatically updated.

However, some relationships are complex and take some time to load. They become relevant after scrolling. There is one hasMany relationship that is important for the initial pageview. And their relationships are also important, but I prefer to defer them too.

So, is it possible to do the following points in order when clicking on a single post?

  • Open post directly from cache (reload: false)
  • Background-reload including one relationship excluding the relationship's relationships
    • Background-reload relationship including relationship's relationships
  • Background-reload including all relationships

E.g. after the initial template is drawn using the cached model, 3 more updates will happen.


Solution

  • You could use reload() method that is available on DS.Model and DS.ManyArray. It returns a Promise that settles after the record has been reloaded. You could use that Promise to chain your reloading as needed.

    You should guard against reloading a not yet loaded record by using isLoaded property available on DS.Model as well as on DS.ManyArray.

    You could use the eachRelationship method of DS.Model to iterate over all relationships.