Creating nested models on the fly using types.reference in mobx-state-tree - mobx-state-tree

Question

I have a several models that reference each other. Here is an example.
export const AlbumModel = types
.model("Album")
.props({
id: types.identifier,
name: types.string,
artists: types.array(ArtistModel),
uri: types.string,
releaseDate: types.maybe(types.string),
images: types.array(types.maybe(ImageModel))
})
export const ArtistModel = types
.model("Artist")
.props({
id: types.identifier,
name: types.string,
uri: types.string
})
export const ImageModel = types
.model("Image")
.props({
url: types.identifier,
width: types.maybe(types.number),
height: types.maybe(types.number)
})
Then, when I go to create an album, I do something like this:
Album.create({
id: '12345',
name: 'My Cool Album',
artists: [{
id: '67890',
name: 'Mr. Bean',
uri: 'https://my-cool-site.com/artist/mr-bean'
}],
uri: 'https://my-cool-site.com/album/my-cool-album',
releaseDate: '12-12-2012',
images: [{
url: 'https://my-cool-site.com/pic/1'
}]
})
This works fine, but when I fetch data from a service, I get a bunch of JSON I want to stick into the mst. When I do that as is, I am creating duplicate artists and images.
Question
Is there a (simple-ish) way I can create the artists and images on the fly, and pass them as reference to the Album model. Or do I need to write a separate function that will create the images and artists, stick them into the tree, and then reference them as a part of the album?
What I tried:
export const AlbumModel = types
.model("Album")
.props({
id: types.identifier,
name: types.string,
artists: types.array(types.reference(ArtistModel)),
uri: types.string,
releaseDate: types.maybe(types.string),
images: types.array(types.maybe(types.reference(ImageModel)))
})
which throws the following error:
at path "/images/0" snapshot `{"height":300,"url":"https://my-cool-site.com/pic/1","width":300}` is not assignable to type: `(reference(Image) | undefined)` (No type is applicable for the union), expected an instance of `(reference(Image) | undefined)` or a snapshot like `(reference(Image) | undefined?)` instead.

Answer 1

Not sure if this will work but it's worth trying
If you put this in AlbumModel artists
types.reference(ArtistModel, {
// given an identifier, find the user
get(artist /* string */, parent: any /*AlbumModel*/) {
return parent.artists.find(a => a.id === artist.id) || ArtistModel.create(data)
},
// given a user, produce the identifier that should be stored
set(artist /* ArtistModel */) {
return artist.id
}
})
The idea is initially it tries to find if the artist already exists, if not it will create a new ArtistModel.
Please let me know if this works :)