To preface this, I'm new to Ember and using Mirage to mock a JSON-API compliant backend, but I've hit a snag on what I think would be a common scenario. Ideally, I'm looking to create a single view that lists posts and the comments for each post underneath. The trouble comes when I want to display the author associated with each comment. So, I must clearly be doing something wrong here, since Ember knows how to fetch the direct associations for the Post model, but anything deeper than that is undefined.
In my route, I fetch all posts and that knows to then request the relationship data from the proper Mirage routes.
// app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('post');
}
});
This is the response that Ember receives from Mirage when requesting all posts.
{
"data": [
{
"type": "posts",
"id": "1",
"attributes": {
"title": "Vero quas non inventore eos vel rerum nesciunt nemo molestiae.",
"body": "Eum minima beatae ullam nam id ut quia.\nPorro quidem blanditiis provident qui ex voluptas temporibus officia quos.\nDeleniti aut soluta placeat illo.\nId aut dolorem illo fugit corrupti commodi.\nPorro nesciunt enim debitis.\nMinima architecto velit corporis excepturi eos qui.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "10"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "2",
"attributes": {
"title": "Id quae est omnis dolorum quaerat aut sed corrupti voluptatem.",
"body": "Est ipsa voluptas quia quae nihil ipsum assumenda itaque nihil.\nTotam aut quia.\nRerum maxime cum distinctio harum dolorem dolores dicta.\nNesciunt id et minima velit omnis eius itaque ad.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "3",
"attributes": {
"title": "Provident et eius est.",
"body": "Neque autem deserunt.\nAb repellendus nemo et aut sunt veritatis facere asperiores soluta.\nEt placeat id dicta sint.\nHarum temporibus eos labore.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "8"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "4",
"attributes": {
"title": "A similique explicabo itaque dolor vel possimus aut praesentium veritatis.",
"body": "Inventore et ipsum ut porro.\nUt sed est unde illo nulla id doloribus accusamus voluptatum.\nTempora officiis ut enim porro et est qui.\nSit qui minima iste eaque cupiditate molestiae ut omnis magni.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "4"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "5",
"attributes": {
"title": "Et in consequatur ut autem et.",
"body": "Qui voluptatem harum aut amet possimus architecto eos commodi.\nNumquam cupiditate fugit.\nQuod consequatur minima aspernatur nobis qui eligendi qui corporis necessitatibus.\nIste velit perferendis non dolore ipsum perspiciatis quia.\nAut delectus et porro cupiditate laboriosam dolorem.\nEaque ipsa rerum ipsam placeat voluptatem enim.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "4"
}
]
}
}
},
{
"type": "posts",
"id": "6",
"attributes": {
"title": "Exercitationem quo perferendis.",
"body": "Dolor ut voluptates placeat ullam.\nOmnis aut et.\nIste est tenetur deleniti ea incidunt eos voluptas veniam iusto.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "3"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "1"
},
{
"type": "comments",
"id": "5"
},
{
"type": "comments",
"id": "9"
}
]
}
}
},
{
"type": "posts",
"id": "7",
"attributes": {
"title": "Officia ea quod natus corrupti.",
"body": "Et quia qui occaecati aspernatur voluptatem error in.\nDoloremque rerum sed autem minima quidem reiciendis.\nPossimus dolores voluptas voluptate rerum veniam dicta.\nNemo dolore perspiciatis harum dolorem soluta ab consectetur animi sed.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "3"
}
]
}
}
},
{
"type": "posts",
"id": "8",
"attributes": {
"title": "Quia ea cum vel repudiandae.",
"body": "Excepturi dolores sed modi est asperiores deleniti.\nTempore architecto recusandae nostrum culpa expedita iure voluptatibus accusantium nemo.\nQuia est voluptatum nulla earum culpa.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "7"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "2"
},
{
"type": "comments",
"id": "7"
},
{
"type": "comments",
"id": "8"
}
]
}
}
},
{
"type": "posts",
"id": "9",
"attributes": {
"title": "Nam fugit in voluptatibus et.",
"body": "Aut nihil atque tempore beatae voluptas.\nOptio voluptatum qui debitis omnis dolor maiores cumque.\nUt dolorem est magnam eveniet.\nMagni porro occaecati ex autem.\nPorro et alias beatae nemo laboriosam ut sint magnam quis.\nMollitia deserunt culpa non.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "9"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "10"
}
]
}
}
},
{
"type": "posts",
"id": "10",
"attributes": {
"title": "Aut delectus nobis voluptate.",
"body": "Alias impedit itaque at rerum enim.\nVoluptas itaque quaerat qui optio quo.\nNihil voluptatem quos nihil pariatur sapiente tempore necessitatibus quia et.\nSed consectetur modi dolorum sunt ex odit at.\nVoluptas numquam totam dolores ipsam rerum.\nEt hic eum sunt et.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "6"
}
]
}
}
}
]
}
After getting all posts and the top-level relation models, Ember doesn't go any deeper so I'm left with an undefined comment.author in my template. Is there some way I can tell Ember to fetch the nested models that I need or am I going about this all wrong?
EDIT
This is the structure of my models and the templates for them. Hopefully, it will help give some more context.
Post model:
// app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
createdAt: DS.attr('date', {
defaultValue() { return new Date(); }
}),
author: DS.belongsTo('user'),
comments: DS.hasMany('comment')
});
Comment model:
// app/models/comment.js
import DS from 'ember-data';
export default DS.Model.extend({
body: DS.attr('string'),
createdAt: DS.attr('data', {
defaultValue() { return new Date(); }
}),
author: DS.belongsTo('user'),
post: DS.belongsTo('post')
});
User model:
// app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
posts: DS.hasMany('post'),
comments: DS.hasMany('comment'),
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
})
});
Index template:
// app/templates/index.hbs
{{#each model as |post|}}
{{post-content post=post}}
{{/each}}
Post template:
// app/templates/components/post-content.hbs
<div class="post-main">
<h5 class="post-author-name">{{post.author.fullName}}</h5>
<div class="post-timestamp">
<h5 class="time-in-words">{{moment-from-now post.createdAt interval=1000}}</h5>
</div>
<div class="post-content">
<h2 class="post-title">{{post.title}}</h2>
<p class="post-body">{{post.body}}</p>
</div>
<div class="post-actions">
<h6>Comments ({{post.comments.length}})</h6>
</div>
</div>
<ul class="post-comments">
{{#each post.comments as |comment|}}
{{post-comment comment=comment}}
{{/each}}
</ul>
Comment template:
// app/templates/components/post-comment.hbs
<!-- This is blank -->
<h5>{{comment.author.fullName}}</h5>
<!-- This is not blank -->
<p>{{comment.body}}</p>