ember-data 3.7 relationships

controllers.application.js

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';

export default Controller.extend({
  children: reads('model'),
  actions: {
    clickChild(child) {
      child.parent.then(parent => {
        console.log(parent.name);
      });
    }
  }
});

mirage.config.js

export default function() {
  this.resource('parent');
  this.resource('child');
}

mirage.factories.child.js

import { Factory } from 'ember-cli-mirage';

export default Factory.extend({
  name(i) { return `Child-${i}`; }
});

mirage.factories.parent.js

import { Factory } from 'ember-cli-mirage';

export default Factory.extend({
  name(i) { return `Parent-${i}`; }
});

mirage.scenarios.default.js

export default function(server) {
  let parent = server.create('parent');
  server.createList('child', 10, { parent });
}

mirage.serializers.application.js

import { JSONAPISerializer } from 'ember-cli-mirage';

export default JSONAPISerializer.extend({
  alwaysIncludeLinkageData: true,
});

models.child.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  name: attr('string'),
  parent: belongsTo('parent')
});

models.parent.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  name: attr('string'),
  children: hasMany('child')
});

routes.application.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findAll('child');
  }
});

templates.application.hbs

<ol>
<li>Open Dev Tools</li>
<li>Click on one of the items below</li>
<li>Realize parent is defined as an asynchronous request and somehow your code needs to wait for it to resolve before it can be used</li>
<li>Use <code>.then</code> or <code>async</code>/<code>await</code> just like promises so that the value is available when you need it</li>
<li>Profit</li>
</ol>

<ul>
  {{#each children as |child|}}
    <li {{action "clickChild" child}}>
      {{child.name}}
      -
      {{#if child.parent.isPending}}
        Loading&hellip;
      {{else}}
        {{child.parent.name}}
      {{/if}}
    </li>
  {{else}}
    <li>No Bars!</li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.7.0",
    "ember-cli-mirage": "0.4.6"
  }
}