Specify parent in API request

Question

I'm pretty new to ember and have been somewhat thrown in at the deep end with it so there's a good chance I'm missing something that should be incredibly obvious here.

Anyway, my rails application has defined a route as /api/1/publications/:publication_id/catalogs . This is working fine.

However, I cannot for the life of me get Ember to use this route, everything I try either results in a request to /api/1/catalogs - or no request at all.

My router.js file has:

Router.map(function() {
  this.route('publication', { path: '/publication/:publication_id' }, function() {
    this.route('catalogs', { path: '/publication/:publication_id/catalogs' });
  });
});

My publications model has

catalogs: DS.hasMany('catalog'),

My catalog model has

publication: DS.belongsTo('publication')

And, amongst a few others lost to undo's, I have tried the following methods of querying this data in my route .js file

model() {
  this.modelFor('publication.name')
  var output = {
    model: this.modelFor("publication")
  };

  let publication = this.modelFor('publication');
  output.catalogs = publication.get('catalogs');

  return RSVP.hash(output);
},

...

output.catalogs = output.model.get('/api/ember/1/publications/' + output.model.id + '/catalogs');

...

var output = {
  model: this.modelFor("publication"),
  catalogs: model.catalogs,

...

this.get('store').findAll('catalog', {'publication_id': output.model.id, reload: true});

Could someone please give me a pointer to what I'm doing wrong / not doing please?

Answer 1

If I got it right you are trying to customize the URL used to query has-many relationship catalogs of a publication . Ember Data uses Adapter to configure API endpoints. I guess your application uses DS.RESTAdapter . If so, you should implement a custom urlForFindHasMany method . Assuming the Adapter is correctly configured to fetch publication it may look like the following:

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  urlForFindHasMany(id, modelName, snapshot) {
    let baseUrl = this.buildURL(modelName, id);
    return `${baseUrl}/catalogs`;
  }
});

The relationship should be queried via property on publication model:

async model() {
  let publication = await this.store.findRecord('publication', '1');
  return publication.catalogs;
},

The catalogs property is a DS.PromiseManyArray , a special object that acts as as an Ember.Array and a Promise at the same time.

Answer 2

Your router looks a bit odd. Here is what it normally looks like in v3+

this.route('products', function() {
    this.route('show', { path: ‘/:id’ }, function() {
      this.route('show-detail');
    });   

Here we have 3 routes: /products (selection screen), /products/1/show and products/1/show/show-detail.

Also, in case you do not have it, the Ember inspector chrome add-on is great at helping determine what routes/ controllers. etc the Ember app is using and recognizing