Question

0

58

Views

Ember Data - Lazy loading child data of a model without re-creating previously created objects again

I'm new to ember-data. I'm trying to load comment list from a API using multiple API calls. The comment list feature works like below,

A comment object can have a parent comment or children comments (replies)
All comments (children & parent) from different comment threads are list down in a single comment list using a 1st API call.
If user click on specific comment from above list it will prompt respective comment thread. Respective parent or children comments loading using 2nd API call

The comment model is implemented as below,

export default CommentModel.extend( {
  parent: computed(function() {
    return get(this, 'store').queryRecord('comment', {
      _overrideURL: `comments/${get(this, 'id')}/parent`,
    });
  }),

  children: computed(function() {
    return get(this, 'store').query('comment', {
      _overrideURL: `comments/${get(this, 'id')}/children`,
    });
  }),
...

As this implementation, if user click on child comment (reply) from the comment list, the 2nd API call with load the respective parent comment and parent comment will load its children comments again. That behaviour cause reload the comment list component in UI.

Is there any other way in ember-data to lazy load relationship without creating already existing objects?

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T14:54:33.188Z

If you really need to go that road, you may try to perform a findRecord instead of a queryRecord and use adapterOptions to customize your model's adapter urlForFindRecord method.

TL;DR

Why you shouldn't:

IMHO, you have a data flow problem in your proposed design.

You shouldn't be performing async code inside a computed property (nor returning immutable object as queryRecord response).

Tasks work great for that purpose.

You shouldn't be having your model to load data (that should be route's responsibility), which violates both MVC and DDAU principles.

There is this great article from 2015 on that

As a matter of fact since ember octane, you shouldn't be using computed properties at all, they have been replaced by actual getters and tracked properties.