ember polymorphic sideload

adapters.application.js

import Ember from 'ember';
import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  posts: Ember.A(),
  comments: Ember.A(),
  
  actions: {
    clear() {
      this.store.unloadAll('post');
      this.store.unloadAll('comment');
      this.set('model', null);
    },
    
    getPost(id) {
      this.set('model', this.store.peekRecord('post', id));
    },
    setCommentNull(id){
      const post = this.store.peekRecord('post', id);
      post.set('comment', null);
    },
    
  	loadPosts() {
    	this.store.push({
        data: {
          id: 1,
          attributes: {
            name: "Post"
          },
					type: 'post',       
          "relationships":{
            "comment": {
              "links": {
                "self": "comments/2",
                "related": "posts/1/comments/2"
              },
              "data": {
                "type": "comment",
                "id": "2"
              }
            },
          },
        }
        //,
        //"included": [{
          // "id": "2",
           //"type": "comment",
           //"links": {
             //"self": "comments/2"
           //}
         //}]
      });
      
      this.set('posts', this.store.peekAll('post'));
      console.log('pushed post into store');
    },
    loadComments() {
    	this.store.push({
        data: {
          id: 2,
					type: 'comment',       
          "links": {
            "self": "comments/2"
          }
        }
     	});
      
      this.set('comments', this.store.peekAll('comment'));
      console.log('pushed comment into store');
    },

	}
});

models.comment.js

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

export default Model.extend({
});

models.post.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'),
  comment: belongsTo('comment'),
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<h1>Instructions</h1>
<ol>
	<li>Click "Load Posts" to push a post into the store via pushPayload</li>
  <li>Click "Load Comments" to push comments into the store (with commentable_id, commentable_type for the above post)</li>
  <li>Click "Render Post" to then render this post - note that the length of comments is 0 (even though posts and comments are in the store)</li>
  <li>Click "Load Comments" a second time - note that this time, the length of comments will update</li>
</ol>
<br/><br/>
<div>
This appears to be due to the relationship not materializing unless .get('comments') is called first (via the template in this case) before the records are pushed into the store.  However, the expectation is that after the records are in the store, .get('comments') should already have the relationship data.  
<br/><br/>
This causes bugs when trying to sideload polymorphic models (whereby the primary model and polymorphic children are pushed into the store at the same time). 
</div>
<br/><br/>
<div>
<button {{action "loadPosts"}}>Load Posts</button>
<button {{action "loadComments"}}>Load Comments</button>
<button {{action "getPost" 1}}>Render Post 1</button>
<button {{action "setCommentNull" 1}}>Unset comment for Post 1</button>
<button {{action "clear"}}>Clear Store</button>
</div>
<br/><br/>
<div>
The store contains {{posts.length}} posts and {{comments.length}} comments.
</div>
<br/><br/>
<div>
{{#if model}}
	{{log model.comment}}
	Post {{model.id}} is rendered and has comment {{model.comment.id}} as id.
{{/if}}
</div>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "3.1.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2",
    "ember-data": "3.2.0-beta.2"
  },
  "addons": {
    "active-model-adapter": "2.1.1"
  }
}