InvalidReferenceError: [mobx-state-tree] Failed to resolve...

[OnkelTem]

Hello.

Could you please tell what is going on here?

import { getSnapshot, types } from 'mobx-state-tree'

const fooModel = types.model({
  id: types.identifier,
  title: types.string,
})

const barModel = types.model({
  id: types.identifier,
  foo: types.reference(fooModel),
})

const foo = fooModel.create({
  id: 'foo',
  title: 'foo',
})

const bar = barModel.create({
  id: 'bar',
  foo: foo,
})

console.log(getSnapshot(bar)) // => { id: 'bar', foo: 'foo' }

console.log(bar.foo) 
// InvalidReferenceError: [mobx-state-tree] Failed to resolve 
// reference 'foo' to type 'AnonymousModel' (from node: /foo)

It's almost the same as the example from the docs:

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

const Todo = types.model({
  id: types.identifier,
  title: types.string,
})

const TodoStore = types.model({
  todos: types.array(Todo),
  selectedTodo: types.reference(Todo),
})

// create a store with a normalized snapshot
const storeInstance = TodoStore.create({
  todos: [
    {
      id: '47',
      title: 'Get coffee',
    },
  ],
  selectedTodo: '47',
})

// because `selectedTodo` is declared to be a reference, it returns the actual Todo node with the matching identifier
console.log(storeInstance.selectedTodo.title)
// prints "Get coffee"

I don't have "stores", I have a number of connected models. So how do I connect them then?

[thegedge]

I don't have "stores", I have a number of connected models. So how do I connect them then?

With a store, or something like that 🙂

But it helps to explain why! References are resolved within the tree they're part of, but they can't resolve identifiers across different trees. For you, foo and bar are two separate trees (specifically, they're the roots of two trees). In the docs example, everything is under one tree rooted at storeInstance, so that's why the references can resolve.

For example, for you, it could look like this:

import { getSnapshot, types } from 'mobx-state-tree'

const fooModel = types.model({
  id: types.identifier,
  title: types.string,
})

const barModel = types.model({
  id: types.identifier,
  foo: types.reference(fooModel),
})

const foobarStore = types.model({
  foo: fooModel,
  bar: barModel,
});

const store = foobarStore.create({
  foo: { id: 'fooId', title: 'foo' },
  bar { id: 'barId', foo: 'fooId' },
});

console.log(store.bar.foo)

[OnkelTem]

Thanks, Jason.

There're two more things I'd wish to clarify.

First

So "referential integrity" isn't enforced during model creation and you can very well add anything:

// Passes w/o error:
const barWrong = barModel.create({
  id: 'bar',
  foo: 'xxx', // Unexisting thing
})

Is that so? Can't it be checked from the beginning not allowing to reference wrong things, including "unattended" models?

// Passes w/o error:
const bar = barModel.create({
  id: 'bar',
  foo: foo // An unattended model
})

Second

This one is not even a question, just a demo of some mobx magic, when the same action produces different result (skip to the bottom):

import { Instance, types } from 'mobx-state-tree'

const fooModel = types.model({
  id: types.identifier,
  title: types.string,
})

const barModel = types.model({
  id: types.identifier,
  foo: types.reference(fooModel),
})

const storeModel = types
  .model({
    foos: types.array(fooModel),
    bars: types.array(barModel),
  })
  .actions((self) => ({
    addFoo(foo: Instance<typeof fooModel>) {
      self.foos.push(foo)
    },
    addBar(bar: Instance<typeof barModel>) {
      self.bars.push(bar)
    },
  }))

// Data

// Unattended foo
const foo = fooModel.create({
  id: 'foo',
  title: 'foo',
})

// Unattended bar with ref to unattended foo goes unvalidated
const bar = barModel.create({
  id: 'bar',
  foo: foo,
})

const store = storeModel.create({
  foos: [],
  bars: [],
})

store.addFoo(foo)

console.log(bar.foo) // FAILS

store.addBar(bar) // **

console.log(bar.foo) // DOESN'T FAIL ANYMORE

Obviously the **-line mutated bar.

Am I correct?

[thegedge]

For your first question: I don't know off the top of my head, but given the behaviours you experienced I'm guessing MST doesn't check for referential integrity until accessed. If you want to check for integrity when something becomes a part of a tree, I think you could try checking in the afterAttach hook (see https://mobx-state-tree.js.org/overview/hooks).

For your second question, I don't think anything is mutated, just that it gets lazily evaluated. Before you attached bar to a tree, accessing the reference would call resolveIdentifier and realize it can't find foo. After you attached, it runs the same code but now it's in a tree that has a foo!