How to properly setup nested routes and integrate mirage


#1

Hey, I’m working with Ember 2.8 and I’ve added mirage to my project to help with testing. I’ll also be building the backend so I was planning to follow the JSON API specs to deliver the data. So with that in mind, I’m assuming I’d just use the standard adapter that ships as my understanding it is for JSON API. I’m new to Ember and there is a lot of conflicting information out there, especially since things have changed in the past year in terms of approach.

I have two issues I’m toiling with. One is how to setup the routes and two is getting Mirage to work with models with relationships.

#1) Settings up routes and working with JSON API

Initially I had nested routes, so I was thinking something like this: GET /posts/3/comments/1

// router.js
...
this.route('posts', { path: 'posts'}, function() {
	this.route('view', {path: ':post_id'}, function() {
	    this.route('comments', {path: 'comments'}, function() {
	        this.route('view', {path: ':comment_id'});
	    });
	});
});
...

I had two models, post and comment, where post had as hasMany(‘comment’) attribute.

Now I’m not sure if this is the best way to set this up. I was hoping to take advantage of nested templates (for things like having a posts list alongside a post, etc.) – but if that doesn’t work, I can think of an alternative way with components. Not sure if this setup works with JSON API or if ember is just handling on the proper calls under the hood for me.

This kind of worked to a point, but broke down once you try to look at comments… which brings me to my next point…

#2) Getting Mirage to work fully

I setup my corresponding models.

// mirage/models/post.js
...
export default Model.extend({
	comments: hasMany('comment')
});
...

and I am using fixtures to put in some predefined data.

// mirage/fixtures/posts.js
export default [{
    title: 'My First Post',
    body: 'Lorem ipsum',
    comments: [1, 2]

}, 
...

I assumed that this was how you pointed to the comment’s id’s and link them together.

I loaded the fixtures.

Then I configured mirage routes like this:

// mirage/config.js
...
this.get('/posts');
this.get('/posts/:id');
this.get('/posts/:id/comments');
this.get('/posts/:id/comments/:id');
...

And I was able to reach posts, and a single post, but then reaching comments content and a specific comment won’t get it, seems to have problems connecting data. Also it didn’t seem to like the hasmany in model either for mirage.

Is there more I need to do? Should I use another method / organize a different way?

It’s hard to tell what’s really breaking down. Are there any good, updated examples of what I’m trying to do? So far I can’t find anything, which makes me feel like it can’t be done.

Any help would be great, thanks!


#2

Try this:

commentsIds: [1, 2]

#3

@Bauke I will give this a try when I setup mirage again and follow up.

I’ve created a fresh install and did not setup mirage this time around. Instead, I’ve focused just on wrapping my head around how the routes work and how they communicate with the API server. I just put together a simple server that sends back JSONAPI formatted responses. Now I can see what Ember is calling in the background versus what I’m doing in the browser/Routes.

Looking at my original URL of: /posts/1/comments/ (which is what would be in the browser) the server is actually receiving the GET calls of /posts/1 and the calls for each comment, so if 2 comments associated, it would be /comments/1, /comments/2. I just needed to decouple my thinking from what the API request calls are and the ember routes that I’m using in the browser. This should help me when I revisit the mirage configuration.