Is there a way to show related model ids without sideloading or embedding data

Question

My understanding is that using serializeIds: 'always' will give me this data, but it does not.

Here's what I'm expecting:

{
  id="1"
  title="some title"
  customerId="2"
}

Instead the output I'm receiving is:

{
  id="1"
  title="some title"
}

My code looks something like this:

import {
  Server,
  Serializer,
  Model,
  belongsTo,
  hasMany,
  Factory
} from "miragejs";
import faker from "faker";

const ApplicationSerializer = Serializer.extend({
  // don't want a root prop
  root: false,
  // true required to have root:false
  embed: true,
  // will always serialize the ids of all relationships for the model or collection in the response
  serializeIds: "always"
});

export function makeServer() {
  let server = newServer({
    models: {
      invoice: Model.extend({
        customer: belongsTo()
      }),
      customer: Model.extend({
        invoices: hasMany()
      })
    },

    factories: {
      invoice: Factory.extend({
        title(i) {
          return `Invoice ${i}`;
        },
        afterCreate(invoice, server) {
          if (!invoice.customer) {
            invoice.update({
              customer: server.create("customer")
            });
          }
        }
      }),
      customer: Factory.extend({
        name() {
          let fullName = () =>
            `${faker.name.firstName()} ${faker.name.lastName()}`;

          return fullName;
        }
      })
    },

    seeds(server) {
      server.createList("invoice", 10);
    },

    serializers: {
      application: ApplicationSerializer,
      invoice: ApplicationSerializer.extend({
        include: ["customer"]
      })
    },

    routes() {
      this.namespace = "api";

      this.get("/auth");
    }
  });
}

Changing the config to root: true, embed: false, provides the correct output in the invoice models, but adds the root and sideloads the customer, which I don't want.

Answer 1

You've run into some strange behavior with how how serializeIds interacts with embed.

First, it's confusing why you need to set embed: true when you're just trying to disable the root. The reason is because embed defaults to false, so if you remove the root and try to include related resources, Mirage doesn't know where to put them. This is a confusing mix of options and Mirage should really have different "modes" that take this into account.

Second, it seems that when embed is true, Mirage basically ignores the serializeIds option, since it thinks your resources will always be embedded. (The idea here is that a foreign key is used to fetch related resources separately, but when they're embedded they always come over together.) This is also confusing and doesn't need to be the case. I've opened a tracking issue in Mirage to help address these points.

As for you today, the best way to solve this is to leave root to true and embed false, which are both the defaults, so that serializeIds works properly, and then just write your own serialize() function to remove the key for you:

const ApplicationSerializer = Serializer.extend({
  // will always serialize the ids of all relationships for the model or collection in the response
  serializeIds: "always",

  serialize(resource, request) {
    let json = Serializer.prototype.serialize.apply(this, arguments);

    let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)

    return json[root];
  }
});

You should be able to test this out on both /invoices and /invoices/1.

Check out this REPL example and try making a request to each URL.

Here's the config from the example:

import {
  Server,
  Serializer,
  Model,
  belongsTo,
  hasMany,
  Factory,
} from "miragejs";
import faker from "faker";

const ApplicationSerializer = Serializer.extend({
  // will always serialize the ids of all relationships for the model or collection in the response
  serializeIds: "always",

  serialize(resource, request) {
    let json = Serializer.prototype.serialize.apply(this, arguments);

    let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)

    return json[root];
  }
});

export default new Server({
  models: {
    invoice: Model.extend({
      customer: belongsTo(),
    }),
    customer: Model.extend({
      invoices: hasMany(),
    }),
  },

  factories: {
    invoice: Factory.extend({
      title(i) {
        return "Invoice " + i;
      },
      afterCreate(invoice, server) {
        if (!invoice.customer) {
          invoice.update({
            customer: server.create("customer"),
          });
        }
      },
    }),
    customer: Factory.extend({
      name() {
        return faker.name.firstName() + " " + faker.name.lastName();
      },
    }),
  },

  seeds(server) {
    server.createList("invoice", 10);
  },

  serializers: {
    application: ApplicationSerializer,
  },

  routes() {
    this.resource("invoice");
  },
});

Hopefully that clears things up + sorry for the confusing APIs!