How to properlly set create nested resources with Ember Data?

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; ?

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

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