ember-data - best strategy for loading complex data structures

Question

I am using ember-data 2.0. I want to load all data from the server at startup. Then the app is really fast after the initial loading. The application is mobile, and may have varying bandwidth. I want to load the data as fast as possible. I want to use JSON API to comply with the newest ways of using ember-data.

Each object is small, just a handful of attributes. But there may be 200 such objects to load.

Is it best to do many small ajax calls or one big one? I imagine it is faster to use one big call that contains all my objects, but is that possible with the JSON API and the out-of-the-box adapters?

Of course, I could just use findAll() but that will only load all objects of one type. I have several object types in my model that are connected with hasMany and belongsTo relationships. If I use the RestAdapter out of the box, that will result in many ajax calls, right?

What is the best strategy to use and how to implement that with ember-data and the adapters?

Artur Smirnov · Accepted Answer · 2015-09-18 09:07:11Z

You can load different types to the store from single payload out of the box with Ember Data. By default JSON serializer assumes that each root node in payload corresponds to a type. Let's say you have models:

/models/post.js

import DS from 'ember-data';
export default DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    comments: DS.hasMany('comment');
});

/models/comment.js

import DS from 'ember-data';
export default DS.Model.extend({
    comment: DS.attr('string'),
    post: DS.belongsTo('post');
});

And you have an endpoint /posts which responds with payload like this:

{
    "posts": [
        {
            "id": 1,
            "title": "Post 1",
            "body": "Post 1 body",
            "comment_ids": [1, 2]
        },
        {
            "id": 2,
            "title": "Post 2",
            "body": "Post 2 body",
            "comment_ids": [3]
        }
    ],
    "comments": [
        {
            "id": 1,
            "comment": "Comment 1",
            "post_id": 1
        },
        {
            "id": 2,
            "comment": "Comment 2",
            "post_id": 1
        },
        {
            "id": 3,
            "comment": "Comment 3",
            "post_id": 2
        }
    ]
}

So when you do store.findAll('post'), Ember Data will request /posts endpoint, recieve the payload and push both posts and comments to the store. And all relations will be resolved properly.

But there are some notes:

if you define model relation with {async: true}, Ember data will always hit the server to fetch relation records.
Everywhere in the app you would need to use store.peek() and store.peekAll() instead of store.find() and store.findAll() in order to get records from the store but not from server.

Collectives™ on Stack Overflow

ember-data - best strategy for loading complex data structures

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related