A little perspective:
I have a service called menu that performs store queries inside computed properties. One of these store queries is behaving rather weird. It fetches all records under the model name product-segment from a fully functional JSON API. This model has a hasMany relationship to a model called product. I have checked the API's response - it is all good.
The problem:
Now, when I fetch these product-segment models, I instruct the API to { include: 'products' }, and the API does as is requested. The response includes 15 related product models, which is correct. However, access from the view only results in display of 12 models, so 3 are missing.
More perspective
I initially thought I was dealing with a race condition of some kind, and to be sure I created a computed property - test - to find out.
Here's the bare minimum info inside services/menu.js
export default Component.extend({
activeProductSegment: null,
productSegments: computed('store.product.[]', 'store.product-segment.[]', function() {
return get(this, 'store').findAll('product-segment', { include: 'products' });
}),
test: computed('activeProductSegment', function() {
let segment = get(this, 'activeProductSegment');
if (segment) {
console.log(segment.hasMany('products').ids());
console.log(get(segment, 'products').mapBy('id'));
}
}),
});
The property activeProductSegment is being set to different product-segment model instances through an action of a component , which looks like this:
export default Component.extend({
menu: inject(), // menu service is injected here...
actions: {
setProductSegment(segment) {
get(this, 'menu').set('activeProductSegment', segment);
}
}
});
The action itself works as expected, and is actually quite unrelated to my problem. activeProductSegment is never updated in any other way. The view passes this action product-segment model objects:
<li ></li>
Troubleshooting attempt
To come back to my problem, when I now try to get all related product models, only 12 of 15 models are present within the returned collection. To be sure that the JSON response was really fine I checked the amount of product IDs that one of my segment models contained, I logged the following line:
console.log(segment.hasMany('products').ids());
That returned me an array with 15 correct IDs, so the model has all id's as it is supposed to, and all product models of those id's have been included in the response. The following line however gave me an array of 12 id's:
console.log(get(segment, 'products').mapBy('id'));
I tried putting the 2 logs into a 2-second setTimeout, but the result stayed identical:
Unless I misunderstand, the models should be live, so any relationship is supposed to update as data becomes available. What am I doing wrong?
I've been tearing my hear out because of this :O
