ASYNC relationships ROBLONG

controllers.application.js

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';
import objectRegularPromise from 'twiddle/object-regular-promise';
import objectPromiseProxy from 'twiddle/object-promise-proxy';

export default Controller.extend({
  children: reads('model'),
  actions: {
   async clickChild(child) {
		const parentAsRegularPromise = objectRegularPromise(child.parent);
		const parentAsPromiseProxy = objectPromiseProxy(child.parent);
    console.log((await parentAsPromiseProxy).getCat());

   }
  }
});

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'),
  
  getCat() {
    return 'cat';
  }
});

object-promise-proxy.js

import ObjectProxy from '@ember/object/proxy';
import RSVP from 'rsvp';
import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';

const ObjectPromiseProxy = ObjectProxy.extend(PromiseProxyMixin);

export default function objectPromiseProxy(model) {
  if (model instanceof ObjectProxy) {
    const proxy = ObjectPromiseProxy.create({
      promise: RSVP.resolve(model)
    });

    return proxy;
  }
  return model;
}

object-regular-promise.js

import ObjectProxy from '@ember/object/proxy';
import RSVP from 'rsvp';

export default function objectRegularPromise(model) {
  return new RSVP.Promise(async (resolve, reject) => {
    if (model instanceof ObjectProxy) {
      try {
        let awaitedModel = await model;
        resolve(awaitedModel);
      } catch (error) {
        reject(error);
      }
    }
    resolve(model);
  });
}

routes.application.js

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

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

templates.application.hbs

<ul>
  {{#each children as |child|}}
    <li {{action "clickChild" child}}>
      {{child.name}}
      :
      {{#if child.parent.isPending}}
      {{child.parent.name}}
        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"
  }
}