Can't use related model in template (EmberJS)

Question

That's what I have.
2 models: 'Note' and 'User'. Note has field called "user" that makes replation "1 user to many notes". The data is taken from Mirage.

Note model:

export default DS.Model.extend({
    subject: DS.attr(),
    message: DS.attr(),
    user: DS.belongsTo('user'),
    created_at: DS.attr(),
    updated_at: DS.attr(),
});

User model:

export default DS.Model.extend({
    username: DS.attr(),
    email: DS.attr(),
    notes: DS.hasMany('note'),
});

Mirage code:

let notes = [
    {
        id: 1,
        type: 'note',
        attributes: {
            subject: 'Test 1',
            message: 'tttttttttttttttttttttttt',
            user_id: 1,
            'created-at': '2017-03-10 15:04:22',
            'updated-at': '2017-03-10 15:04:22',
        }
    },
    {
        id: 2,
        type: 'note',
        attributes: {
            subject: 'Test 2',
            message: 'klakljadlfkjhasdflij',
            user_id: 1,
            'created-at': '2017-02-10 15:04:22',
            'updated-at': '2017-02-10 15:04:22',
        }
    }
];

let users = [
    {
        id: 1,
        type: 'user',
        attributes: {
            username: 'user',
            email: '[email protected]',
        }
    }
];

this.get('/notes/:id', function (db, request) {
    let note = notes.find((note) => parseInt(request.params.id) === note.id);
    let result = {
        data: note
    };
    if (request.queryParams.include === 'user') {
        result.included = [users.find((user) => parseInt(note.attributes.user_id) === user.id)];
    }
    return result;
});

The user model is retrieved (as I can see at EmberInspector).
There is empty output when I use {{model.user.username}} inside template.
And there is an empty 'user' model when I use {{log model.user}}.

I think the issue may be related to the fact that the 'Note' model is retrieved a bit earlier without 'User' model when I'm building a list of notes.

Great thanks for help!

Answer 1

Your problem is that you use the JSONAPISerializer but your response is not JSONAPI compliant. The JSONAPI would expect this:

{
    data: {
        id: 1,
        type: 'note',
        attributes: {
            subject: 'Test 1',
            message: 'tttttttttttttttttttttttt',
            'created-at': '2017-03-10 15:04:22',
            'updated-at': '2017-03-10 15:04:22',
        },
        relationships: {
            user: {
                data: {
                    type: 'user'
                    id: '1'
                }
            }
        }
    }
}

And then load the user with he id 1.

But your response is this:

{
    data: {
        id: 1,
        type: 'note',
        attributes: {
            subject: 'Test 1',
            message: 'tttttttttttttttttttttttt',
            user_id: 1,
            'created-at': '2017-03-10 15:04:22',
            'updated-at': '2017-03-10 15:04:22',
        }
    }
}

So ember-data thinks this note does not have a user. Read the JSONAPI to understand the required response.