I'm mocking our server responses with Mirage.js for testing purposes. I've encountered the following problem.

I have an event model which has a hasMany() relationship to the image model, like so:

// server.ts

createServer({
    models: {
      event: Model.extend({
        images: hasMany(),
      }),
      image: Model.extend({
        event: belongsTo(),
      }),
    }

    ...
})

and an event factory which populates the images in afterCreate

// eventFactory.ts

Factory.extend<FactoryType<Partial<Event>>>({
  ...

  /* event relationships */
  afterCreate(event, server) {
    event.update({
      images: server.createList('image', 3),
    });
  },
})

but the response is a collection instead of an array and I cannot access the images directly via event.images[0] as they get wrapped in a models array like so event.images.models[0]

response

How do I get the server to include the images directly, so I can access them via event.images[0]? Am I missing something, or can this be achieved by using a serializer of some sort? Thanks!