How to properlly set create nested resources with Ember Data?

Ember Data
1

Hi guys, I’m learning Ember and got stuck on how to create nested resources.

My models are Comment and Event having a One-to-Many relationship. Pretty simple.

The thing is, my form to add new comments associated to a specific event is embbed inside the Event Show template. The route is:

    this.route('event', { path: '/events/:event_id' });

Initially I didn’t see any reason to have a nested route for comments since I don’t need to load the model in any case. When I display the comments I take from the Event itself. The page is being properlly rended, with all event info, and the comment-form component.

My problem is: When I submit the form to add the new comment, Ember is trying to post on this endpoint: /comments instead of /events/event_id/comments. Here’s my component class:

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class CommentFormComponent extends Component {
  @service store;

  @action createComment() {
    let { name, email, content } = this;

    const newRecord = this.store.createRecord('comment', {
      name,
      email,
      content,
    });

    newRecord.save();
  }
}

Anothe doubt, in Event Model do I need to set the comment as async like that @hasMany('comment', { async: true }) comments; ?

2

Hi, maybe there you will find the answer (customization of queries):

https://api.emberjs.com/ember-data/3.25/classes/Adapter