Maps with reference keys

[Ghirigoro]

I constantly come up against the requirement to have a map that has reference keys rather than string keys. Is there some way to achieve that in MST? See below for the kind of thing I'm looking for:

const Thing = model("Thing", {
  id: identifier,
  description: string,
});

const Person = model("Person", {
  name: string,
  // I would like something that allows me to map references to things -> strings (or whatever)
  opinions: map(/*Thing,*/ string),
});

const Store = model("Store", {
  people: array(Person),
  things: array(Thing),
});

const store = Store.create({
  people: [
    {
      name: "John",
      opinions: {
        vanilla: "I don't like vanilla",
        chocolate: "I like chocolate",
      },
    },
  ],
  things: [
    { id: "vanilla", description: "vanilla" },
    { id: "chocolate", description: "chocolate" },
  ],
});

Thanks for any help.

P.S. - I've hacked together some stuff that approximates what I need like the thing below, but it's pretty hacky and would require some more work to make it reliable, so I was wondering if there was a more establisher approach (seems like it would be a common requirement)

const refMap = <F extends IAnyType, T extends IAnyType>(from: F, to: T) =>
  model({
    data: array(
      model({
        from: reference(from),
        to: to,
      })
    ),
  })
    .actions((map) => ({
      get(key: Instance<F>): Instance<T> {
        const element = map.data.find((k) => k.from === key);
        if (element === undefined) throw new Error(`key ${key} not found`);
        return element.to as Instance<T>;
      },
    }))
    .named(`RefMap<${from.name}, ${to.name}>`);

[MarkLeMerise]

Unfortunately, the MST map type is an opinionated abstraction over the MobX observable.map, and keys get stringified no matter what. Therefore, to achieve exactly what you want will take something custom, much like you've suggested. This is the tightest, naive implementation I can think of:

import {
  IAnyType,
  Instance,
  types
} from "mobx-state-tree";

// Implementation
const KeyValueType = <K extends IAnyType, V extends IAnyType>(
  KeyType: K,
  ValueType: V
) =>
  types.model({
    key: KeyType,
    value: ValueType
  });
const RefMap = <K extends IAnyType, V extends IAnyType>(
  KeyType: K,
  ValueType: V
) =>
  types
    .model({
      refs: types.array(KeyValueType(KeyType, ValueType))
    })
    .views((self) => ({
      getValue(key: Instance<K>): Instance<V> | undefined {
        var entry = self.refs.find((ref) => ref.key === key);
        return entry ? entry.value as Instance<V> : undefined;
      }
    }));

// Example usage
const Key = types.model({ id: types.identifier });
const Value = types.number;

const RefStore = types.model({
  keys: types.map(Key),
  refMap: RefMap(types.reference(Key), Value)
});
 
const refStore = RefStore.create({
  keys: {
    key: { id: "key" }
  },
  refMap: {
    refs: [{ key: "key", value: 6 }]
  }
});

(Note my code doesn't account for possible duplicate keys in the map).

But, since MST is already good at reference resolution, I tend to reach for this approach before building intermediate "reference maps". In the particular example, I might model it a little differently:

import { types } from "mobx-state-tree"

const Thing = types.model({
  id: types.identifier,
  description: types.string
})

const Opinion = types.model({
  id: types.identifierNumber,
  comment: types.string,
  thing: types.reference(Thing)
})

const Person = types.model({
  name: types.identifier,
  opinions: types.map(Opinion)
})

const Store = types.model({
  things: types.map(Thing),
  people: types.map(Person)
})

const store = Store.create({
  things: {
      vanilla: { id: "vanilla", description: "vanilla" },
      chocolate: { id: "chocolate", description: "chocolate" }
  },
  people: {
      john: {
          name: "john",
          opinions: {
                1: { id: 1, comment: "I don't like vanilla", thing: "vanilla" }
          }
      }
  }
})