Ember + JsonAPI - How to correctly handle relationships?

@sim085 wrote:

Hello I have a Post object which has zero-or-more Comment. My API looks as follows:

{
	"data": {
		"type": "post",
		"id": "1",
		"attributes": {
			"title": "Hello World"
		},
		"relationships": {
			"comment" : {
				"links": {
					"self": "/api/posts/1/relationships/comments",
					"related": "/api/posts/1/comments"
				},
				"data": [
					{ "type": "comment", "id": "1" },
					{ "type": "comment", "id": "2" }
				]
			}
		}
	}
}

My API URLs are as follows;

The following URL gets the posts: http://example.com/api/posts/

The following URL gets a post by it’s id: http://example.com/api/posts/1

The following URL gets all the comments of a particular post: http://example.com/api/posts/1/comments/

In Ember I have created my models as follows:

// in file /app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
	title: DS.attr(),
	comment: DS.hasMany('comment')
});

// in file /app/models/comment.js
import DS from 'ember-data';
export default DS.Model.extend({
	text: DS.attr()
});

However when Ember tries to load the comments of a particular post rather then trying to load this using the related link in the comment relationships element, it goes and tries to load this from the following URL:

http://example.com/api/comments/

However my API does not provide that URL as a comment only exists as part of a post. I have searched on the internet and found some examples which say to override serializer for post. So I did as follows:

// in file /app/serializers/post.js
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
	normalizeResponse(store, primaryModelClass, payload, id, requestType) {
		if(id == null) return this._super(...arguments);
		delete payload.data.relationships['comment'].data;
		payload.data.relationships['comment'].links = {
			related: "/api/posts/" + payload.data.id + "/comments"
		};
		return this._super(...arguments);
	},
});

The above code works, but, on first load always gives an error because still Ember goes to look for the comments in /api/comments rather than /api/posts/:id/comments (I don’t understand why). However page still loads, and after this the error no longer pops up until I restart again.

However I wonder if this is the right way to do this.

Is there an out of the box way how to make Ember automatically use relationships link?

Posts: 1

Participants: 1

Read full topic