Any ideas on how to handle a route model with multiple separate data sources that can update a UI as they get resolved?

1

We have a page where there are multiple data set that are populated with different API’s that are not related. We are using ember data.

Some call’s are slow, some a very fast. We want to provide some information to the user as quickly as possible.

Our current solution is to use components to pull in the data. Obviously this against best practices. It is a testing nightmare and there is very little to no documentation around backing components with models.

So my question is:

Has anyone had any success handling multiple streams of data that they want to be populated in the UI as they come back?

Thanks!

2

Yes — you can do this by returning a non-promise (that may contain promises) from the model hook. Something like:

export default Route.extend({
  model() {
    return {
      people: this.store.findAll('person'),
      pets: this.store.findAll('pet')
    }
  }
});

With this, your route will resolve immediately — your components can then handle their own loading state as they await those promises to resolve.

1 Like