applySnapshot needs a new ID for change to occur

[aboyer1013]

Greetings,

I'm scratching my head on why applySnapshot is requiring me to generate a different ID than the model it's being applied to in order for the changes to happen. If the IDs are the same, why would it prevent it from updating? I was expecting applySnapshot to find the matching model based on the same ID and set the new changes.

Appreciate any help!

Code Sandbox demo

import {
  _async,
  _await,
  ExtendedModel,
  model,
  Model,
  modelFlow,
  idProp,
  prop,
  modelAction,
  registerRootStore,
  getSnapshot,
  applySnapshot
} from "mobx-keystone";

console.clear();

@model("ChildModel")
class ChildModel extends Model({
  id: idProp.withSetter(),
  foo: prop<string>()
}) {}

@model("RootModel")
class RootModel extends Model({
  id: idProp.withSetter(),
  children: prop<ChildModel[]>(),
  single: prop<ChildModel>()
}) {}

const root = new RootModel({
  children: [
    new ChildModel({ foo: "child1" }),
    new ChildModel({ foo: "child2" })
  ],
  single: new ChildModel({ foo: "default single" })
});

registerRootStore(root);

const ss = getSnapshot(root);

ss.single.foo = "override single";
// This must be a different ID than the current model in order for the snapshot to be applied.
ss.single.id = "some different id";

applySnapshot(root, ss);
// Expected log to be "override single" but received "default single"
console.log(root.single.foo);

// The current model must match the snapshot id.
root.single.setId(ss.single.id);
applySnapshot(root, ss);
// Logs "override single" now that the model id matched the snapshot id. I'm not sure why this is required.
console.log(root.single.foo);

[xaviergonz]

[xaviergonz]

Ok, in this case is because you are modifying the snapshot object that comes from getSnapshot directly (the snapshot object is supposed to be immutable, not something to be touched).

If you use this instead it works ok:

const ss = JSON.parse(JSON.stringify(getSnapshot(root)));