Convert all MirageJS ids to integers

Question

MirageJS provides all model ids as strings. Our backend uses integers, which are convenient for sorting and so on. After reading around MirageJS does not support integer IDs out of the box. From the conversations I've read the best solution would be to convert Ids in a serializer.

Output:

{
 id: "1",
 title: "Some title",
 otherValue: "Some other value"
}

But what I want is:

Expected Output:

{
 id: 1,
 title: "Some title",
 otherValue: "Some other value"
}

I really want to convert ALL ids. This would included nested objects, and serialized Ids.

Answer 1

My solution is to traverse the data and recursively convert all Ids. It's working pretty well.

I have a number of other requirements, like removing the data key and embedding or serializing Ids.

const ApplicationSerializer = Serializer.extend({
  root: true,

  serialize(resource, request) {
    // required to serializedIds
    // handle removing root key
    const json = Serializer.prototype.serialize.apply(this, arguments)
    const root = resource.models
      ? this.keyForCollection(resource.modelName)
      : this.keyForModel(resource.modelName)

    const keyedItem = json[root]

    // convert single string id to integer
    const idToInt = id => Number(id)

    // convert array of ids to integers
    const idsToInt = ids => ids.map(id => idToInt(id))

    // check if the data being passed is a collection or model
    const isCollection = data => Array.isArray(data)

    // check if data should be traversed
    const shouldTraverse = entry =>
      Array.isArray(entry) || entry instanceof Object

    // check if the entry is an id
    const isIdKey = key => key === 'id'

    // check for serialized Ids
    // don't be stupid and create an array of values with a key like `arachnIds`
    const isIdArray = (key, value) =>
      key.slice(key.length - 3, key.length) === 'Ids' && Array.isArray(value)

    // traverse the passed model and update Ids where required, keeping other entries as is
    const traverseModel = model =>
      Object.entries(model).reduce(
        (a, c) =>
          isIdKey(c[0])
            ? // convert id to int
              { ...a, [c[0]]: idToInt(c[1]) }
            : // convert id array to int
            isIdArray(c[0], c[1])
            ? { ...a, [c[0]]: idsToInt(c[1]) }
            : // traverse nested entries
            shouldTraverse(c[1])
            ? { ...a, [c[0]]: applyFuncToModels(c[1]) }
            : // keep regular entries
              { ...a, [c[0]]: c[1] },
        {}
      )

    // start traversal of data
    const applyFuncToModels = data =>
      isCollection(data)
        ? data.map(model => 
            // confirm we're working with a model, and not a value
            model instance of Object ? traverseModel(model) : model)
        : traverseModel(data)

    return applyFuncToModels(keyedItem)
  }
})

Answer 2

I think you should be able to use a custom IdentityManager for this. Here's a REPL example. (Note: REPL is a work in progress + currently only works on Chrome).

Here's the code:

import { Server, Model } from "miragejs";

class IntegerIDManager {
  constructor() {
    this.ids = new Set();
    this.nextId = 1;
  }

  // Returns a new unused unique identifier.
  fetch() {
    let id = this.nextId++;
    this.ids.add(id);

    return id;
  }

  // Registers an identifier as used. Must throw if identifier is already used.
  set(id) {
    if (this.ids.has(id)) {
      throw new Error('ID ' + id + 'has already been used.');
    }

    this.ids.add(id);
  }

  // Resets all used identifiers to unused.
  reset() {
    this.ids.clear();
  }
}

export default new Server({
  identityManagers: {
    application: IntegerIDManager,
  },

  models: {
    user: Model,
  },

  seeds(server) {
    server.createList("user", 3);
  },

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

When I make a GET request to /users with this server I get integer IDs back.

Answer 3

I had to solve this problem as well (fingers crossed that this gets included into the library) and my use case is simpler than the first answer.

function convertIdsToNumbers(o) {
  Object.keys(o).forEach((k) => {
    const v = o[k]
    if (Array.isArray(v) || v instanceof Object) convertIdsToNumbers(v)
    if (k === 'id' || /.*Id$/.test(k)) {
      o[k] = Number(v)
    }
  })
}

const ApplicationSerializer = RestSerializer.extend({
  root: false,
  embed: true,
  serialize(object, request) {
    let json = Serializer.prototype.serialize.apply(this, arguments)
    convertIdsToNumbers(json)
    return {
      status: request.status,
      payload: json,
    }
  },
})