mercredi 26 janvier 2022

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?




Aucun commentaire:

Enregistrer un commentaire