References (safe or not) and onInvalidated

[cavasinf]

Hey guys,

From the get started sandox, I've added a check whenever the reference to User from Todo is invalid: https://codesandbox.io/s/mobx-state-tree-getting-started-13-forked-m7352x?file=/index.js

user: types.maybe(
  types.reference(
    types.late(() => User),
    {
      onInvalidated: (e) => console.warn(e)
    }
  )
)

Why does onInvalidated get thrown every time when referencing a user from Todo.create() or store.addTodo()?
But not when calling Todo.setUser()..

With a safeReference, the same error is triggered, but even worth, the data is not bound at all.

Thanks.

[coolsoftwaretyler]

Hi @cavasinf - looks like that CodeSandbox is private. Would you mind making it public so I can take a look? Thanks!

[cavasinf]

Sry didn't mean to. Is it better now?

[coolsoftwaretyler]

Yup! I'll take a look sometime this morning.

[coolsoftwaretyler]

Hi @cavasinf - this is a subtle issue. Very reasonable to get tripped up by it (it took me a few minutes to debug it haha).

In your addTodo action, you're setting the reference to the User instance in a newly created Todo. But that Todo is not yet part of the tree with the reference available.

So when it's instantiated, MobX-State-Tree says "hmm, I don't know about a user with the ID of 3, this is invalid".

This is not the case in your original store creation call, since todos exists in the same tree as users when Todo of ID 1 is instantiated.

Here is a code sandbox that no longer warns the invalidation: https://codesandbox.io/p/sandbox/mobx-state-tree-getting-started-13-forked-23jcls?file=%2Findex.js%3A90%2C16

Here's the diff:

In the updated code, I create the Todo (and in this case, you may want to consider using safeReference and allowing the reference to just start undefined). Then I attach the Todo to the tree.

Once the Todo has been attached, then I call setUser with the userId. At that point, the new Todo lives in the same tree as the users map, and the reference can be correctly resolved.

Notice in your original example: changing users works totally fine, as well. Again, that's because the Todo items are in the same tree as the Users.

Does that answer your question? Happy to dig in more if I've missed some other part of the example code. References are a useful tool but they can be tricky.

[cavasinf]

Ok, I think I got it.
You cannot reference any data (models) of the rootStore if the newly created model is not already part of the rootStore.
So the new todo has to be first in the rootStore to be able to reference a user to it.

Huge code writing condition here: push first then set references.
I thought it was the job of the safeReference as: "trust me, you'll get it (the user) "later" with THAT id"

I understand why though, if I try to call todo.user and the todo is not part of the rootStore, there is no way to get the user data "directly" from a simple Model.create().

[coolsoftwaretyler]

Yup, you got it! Two things in summary:

1. safeReference is not a clear term, but really it's just a types.maybe(types.reference(X)). So there's not a ton of magic happening here, it just allows something to be undefined or a valid reference. You still have to manage references yourself according to the rule.s
2. References pretty much just live in a lookup map in any given tree. There's not a ton of magic here, just a lot of imperative steps to manage them. MST is usually not as clever as you'd like it to be in regards to references, so if you want to use them, they need to be "around" in whatever models you're using.

Sorry for the confusion, and I'm glad this helped a little bit!