I'm building an ember app with a Rails API backend. These are two separate apps running on two separate servers. The problem I'm having is this:
A user can successfully fill out the form with a new album with new songs and new artists. It posts the the Rails API, create action of the album's controller. New album, songs and artists are successfully created and associated. Yet, the album record that gets sent back to Ember has songs and artists, all with ids of null.
Here is the payload that gets sent back to Ember on successful insertion of new album (with associated songs and artists) record into database:
{
album: {
id: 1,
name: "Purpose (Deluxe)",
image_url: "http://ift.tt/1MCiKyF",
artist_ids: [
23,
14,
1,
57,
27
],
song_ids: [
1,
3,
4,
]
}
}
And here is the save action of my albums/new controller:
save(){
let album = this.get('model');
album.save().then((newAlbum)=>{
this.transitionToRoute('albums.album', newAlbum);
});
}
Note that I am using a callback function transition routes only when Ember receives the response from the Rails API.
Some background:
The app has three models: artists, albums and songs. An album has many songs and songs belong to an album. Songs have many artists and artists have many songs. Albums have many artists through songs.
API is up and running and serving data as expected. I'm not side loading associated data.
Similarly, songs serializer serves album_id and collection of artist_ids with a given song.
Here are my Rails serializers:
Album serializer:
class AlbumSerializer < ActiveModel::Serializer
attributes :id, :name, :image_url, :artist_ids, :song_ids
end
Artist Serializer
class ArtistSerializer < ActiveModel::Serializer
embed :ids, include: true
attributes :id, :name
has_many :albums
has_many :songs
end
Song Serializer
class SongSerializer < ActiveModel::Serializer
attributes :id, :name, :artist_ids, :album_id
end
I'm using async: true on my Ember model definitions. Here are my ember models:
Album Model:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
imageUrl: DS.attr('string'),
songs: DS.hasMany('song', {asnyc: true}),
artists: DS.hasMany('artist', { async: true })
});
Artist Model
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
songs: DS.hasMany('song', { async: true }),
albums: DS.hasMany('album', { async: true })
});
Song Model
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
artists: DS.hasMany('artist', { async: true }),
album: DS.belongsTo('album', {async: true})
});
I'm using Ember's embedded record mixin to serialize associated data back to Rails. I have a song serializer and an album serializer.
import DS from 'ember-data';
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
artists: {serialize: 'records'},
album: {serialize: 'record'}
}
});
Here is my Album Serializer
import DS from 'ember-data';
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
songs: {serialize: 'records'}
}
});
So, when album.save() is run, it hits Rails, creates and saves new album and associated songs and artists and that album data is correctly serialized and served back to Ember. But Ember perceives those associated songs and artists to have ids of null. Also, any records that have been seeded on the backend behave as expected in Ember--I can visit an album's show page and see a list of songs for example. But, if I manually visit localhost:4200/albums/<some album that was created via the form>, associated songs and artists don't show up.
Any help would be greatly appreciated! I'm really stuck on this.
