invalidSnapshotReference error

[msamec]

Hi,

I tried to use references inside my project but I couldn't get it to work as intended. Wasn't sure if it was something in my project causing it so I tried it with fresh new installation and I keep getting same error. So I was hoping you could help me out and point me in the right direction if I'm doing something wrong.

So basically I followed getting started guide and installed npx create-react-app mst-todo and then yarn add mobx mobx-react-lite mobx-state-tree. Afterwards inside file App.js I added following

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

const User = types.model({
  id: types.identifier,
  name: types.optional(types.string, "")
})

const Todo = types
  .model({
    name: types.optional(types.string, ""),
    done: types.optional(types.boolean, false),
    user: types.maybe(types.reference(types.late(() => User), {
      onInvalidated(ev) {
        console.log(ev)
      }
    }))
  })

const RootStore = types
  .model({
    users: types.map(User),
    todos: types.map(Todo)
  })
  .actions(self => ({
    addUser(user) {
      self.users.set(user.id, user)
    },
    addTodo(todo) {
      self.todos.set(todo.id, todo)
    }
  }))

const store = RootStore.create()

const user = User.create({ id: "1", name: "User" })
store.addUser(user)
Todo.create({ id: "1", name: "Todo", user: user })

The error I receive { cause: "invalidSnapshotReference", parent: Proxy, invalidTarget: undefined, invalidId: "1", replaceRef: replaceRef(newRef), removeRef: removeRef() }

I tried using safeReference but it just sets the user reference to undefined

Any help would be appreciated. Thank you!

[coolsoftwaretyler]

Hey @msamec - just wanted to let you know I saw this and I've been poking around as well. I don't know the exact cause of the invalidation, but here are two things I think might be happening;

1. With types.late, the initial reference to User may be undefined, so it changes and triggers an invalidation event?
2. If you take a snapshot of the store after all of this, it looks how you would expect it, so it seems like after the invalidation event, things work out basically fine.

Other than the invalidation event firing, are you seeing any errors at runtime based on your usage?

[BrianHung]

The todo you created is not attached to the rootStore, so it will result in a invalidSnapshotReference when it tries to resolve up the user.

The following should work:

const store = RootStore.create()
store.addUser({ id: "1", name: "User" })
store.addTodo({ id: "1", name: "Todo", user: "1" });

[coolsoftwaretyler]

@msamec - I think this is the answer. Here's a CodeSandbox with the modified code.

Will you mark Brian's answer as accepted if it fixes your issue, or let us know if there's any outstanding problem on your end?

Thanks!