Included data not sideloading

Ember Data
1

Is it obvious to anyone why my ‘product’ data is not side-loading? I am seeing separate API requests to /product for each cart-item. My cart-item model is:

export default Model.extend({
	cart: belongsTo('cart'),
	product: belongsTo('product', { async: true }),
	skuid: attr('string'),
	quantity: attr('number'),
	personalization: attr(''),
	variantCodes: attr(''),
	variantData: attr(''),
	prices: attr('')
});

An example API payload is:

{
    "cart-items": [
        {
            "cart": "0048f8cc-ef50-11e7-8337-76502ffc62f3",
            "id": "ROVE949352B",
            "personalization": [],
            "prices": {
                "price": 74.95,
                "totalPrice": 74.95
            },
            "product": 4464,
            "quantity": 1,
            "skuid": "ROVE949352B",
            "variantCodes": [],
            "variantData": []
        },
        {
            "cart": "0048f8cc-ef50-11e7-8337-76502ffc62f3",
            "id": "BLK4226",
            "personalization": [],
            "prices": {
                "origprice": 0,
                "price": 60,
                "totalPrice": 60
            },
            "product": 4502,
            "quantity": 1,
            "skuid": "BLK4226",
            "variantCodes": [],
            "variantData": []
        }
    ],
    "products": [
        {
            "id": 4464,
            "images": {
                "image": "tristan-irish-watch.jpg",
            },
            "name": "Watch - Gold Plated Watch",
            "prices": {
                "price": 74.95
            },
            "skuid": "ROVE949352B"
        },
        {
            "id": 4502,
            "images": {
                "image": "BLK4226.jpg",
            },
            "name": "Serving Bowl",
            "prices": {
                "origprice": 0,
                "price": 60
            }
            "skuid": "BLK4226"
        }
    ]
}

The relationship works fine, it’s just resulting in separate requests. I tried async: false but ember is complaining that the data is not there:

Assertion Failed: You looked up the 'product' relationship on a 'cart-item' with id ROVE949352B but some of the associated records were not loaded. Either make sure they are all loaded together with the parent record, or specify that the relationship is async

I’ve also tried using “includes” in the route model hook like:

model() {
	return this.get('store').findAll('cart-item', { include: 'products' });
}

Any help appreciated!

2

What Adapter are you’re using?

That payload doesn’t look like JSON-API. The error is likely due to mismatching expectations.

3

Thanks for responding. I’m using RESTAdapter. I’m side-loading data successfully with other models. I can’t for the life of me figure out what’s different with this one. For example, this is a very similar one, saveditem:

export default Model.extend({
	user: belongsTo('user'),
	product: belongsTo('product', { async: true }),
	dateAdded: attr('number')
});

The payload from the API (which sideloads the products) looks like this:

{
    "saveditems": [
        {
            "dateAdded": 1514914371,
            "id": "f51bf2b8-efe2-11e7-8337-76502ffc62f3",
            "product": 4502,
            "user": "me"
        },
        {
            "dateAdded": 1514440889,
            "id": "8c3a7f96-eb94-11e7-8337-76502ffc62f3",
            "product": 1312,
            "user": "me"
        }
    ],
    "products": [
        {
            "id": 4502,
            "images": {
                "image": "BLK4226.jpg",
            },
            "name": "Serving Bowl",
            "prices": {
                "origprice": 0,
                "price": 60
            },
            "skuid": "BLK4226"
        },
        {
            "id": 1312,
            "images": {
                "image": "GC689.jpg",
            },
            "name": "Classic Cross",
            "prices": {
                "price": 29.95
            },
            "skuid": "JDSGC689GCB"
        }
    ]
}
4

I created an Ember Twiddle to see if I could recreate your issue.

That Twiddle seems to work like you’re hoping. It appears to properly sideload product models on my end with only 1 network request (I only defined the /cartItems endpoint in mirage).

I had to clean up the example payload JSON a little (comma missing after the last prices hash), but otherwise it seems to work fine.

Do you have a custom serializer or adapter? I’ve seen issues in the past in my own apps where I overrode some functionality in my serializers and adapters. In doing so, my data serialized fine, but it wasn’t until I got to relationships that I realized I had broken some functionality in my app.

In my case, I wasn’t properly implementing one of the many API methods which was necessary for unserializing the relationship.

1 Like
5

Wow - thanks so much for taking the time to put that together. I really appreciate it. I’m learning alot just by looking at the twiddle.

Good thought on the adapter / serializer. I am going to comment out my custom stuff and then use your twiddle as a starting point to see if I can get sideloading working. I’ll report back when I find the issue.

Thanks again man!!

1 Like