Nested relationships with JSONAPI: grand parent belongsTo relationship not loading

Ember Data
1

Update 8/12/2017

This seems to be an issue with ember-data itself. I changed my ember-data version from 2.14.10 to 2.13.2 and this problem did not happen.

Scenario

  • ember-cli 2.14.2
  • ember-data 2.14.10
  • GrandParent has many Parent
  • Parent has many Kid
  • Kid belongs to Parent
  • Parent belongs to GrandParent

(if you would like to see an app that replicates this scenario, see GitHub - nbrookie/relationship_test_app: A test rails/ember app illustrating a potential problem when side loading nested data)

Problem

I fetch all the kids and side load the parents/grand parents using:

let kids = this.store.query('kid', { include: 'parent.grand-parent'});

For each kid in kids, I expect that kid.parent.grandParent is populated. Why is kid.parent.grandParent null?

More info

  • kid.name is populated, it is Kid 1
  • kid.parent.name is also populated, it is Parent 1
  • kid.parent.grandParent.name is undefined :cry:
  • I also notice that all three models are properly loaded into the store, according to the ember chrome browser plugin:
    grandparents_are_loaded
    grandparents_are_loaded1351×165 13.9 KB

Models

app/models/grand-parent.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr(),
  parents: DS.hasMany('parent')
});

app/model/parent.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr(),
  grandParent: DS.belongsTo('grand-parent'),
  kids: DS.hasMany('kid')
});

app/models/kid.js

import DS from 'ember-data';

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

Routes

app/routes/index.js import Ember from ‘ember’;

export default Ember.Route.extend({
  model() {
   let kids = this.store.query('kid', { include: 'parent.grand-parent'});
   return Ember.RSVP.hash({ kids });
  },
});

Templates

app/templates/index.hbs

{{#each model.kids as |kid|}}
  <div>
    kid: {{kid.name}}
    parent: {{kid.parent.name}}
    grand parent: {{kid.parent.grandParent.name}}
  </div>
{{/each}}

JSONAPI Response

GET /kids?include=parent.grand-parent

{
  "data":[
    {
      "id":"1",
      "type":"kids",
      "links":{
        "self":"http://localhost:3000/kids/1"
      },
      "attributes":{
        "name":"Kid 1"
      },
      "relationships":{
        "parent":{
          "links":{
            "self":"http://localhost:3000/kids/1/relationships/parent",
            "related":"http://localhost:3000/kids/1/parent"
          },
          "data":{
            "type":"parents",
            "id":"1"
          }
        }
      }
    }
  ],
  "included":[
    {
      "id":"1",
      "type":"parents",
      "links":{
        "self":"http://localhost:3000/parents/1"
      },
      "attributes":{
        "name":"Parent 1"
      },
      "relationships":{
        "grand-parent":{
          "links":{
            "self":"http://localhost:3000/parents/1/relationships/grand-parent",
            "related":"http://localhost:3000/parents/1/grand-parent"
          },
          "data":{
            "type":"grand-parents",
            "id":"1"
          }
        },
        "kids":{
          "links":{
            "self":"http://localhost:3000/parents/1/relationships/kids",
            "related":"http://localhost:3000/parents/1/kids"
          }
        }
      }
    },
    {
      "id":"1",
      "type":"grand-parents",
      "links":{
        "self":"http://localhost:3000/grand-parents/1"
      },
      "attributes":{
        "name":"Grand parent 1"
      },
      "relationships":{
        "parents":{
          "links":{
            "self":"http://localhost:3000/grand-parents/1/relationships/parents",
            "related":"http://localhost:3000/grand-parents/1/parents"
          }
        }
      }
    }
  ]
}
2

Update 8/12/2017: This seems to be an issue with ember-data itself. I changed my ember-data version from 2.14.10 to 2.13.2 and this problem did not happen.

3

I have a similar problem. 2.13.2 is working, 2.14.0 onward is not. Did you find a solution other than stick with 2.13?