Types.reference and types.identifier crashing application upon deleting User Reference; Error: [mobx-state-tree] Failed to resolve reference

[ChristopherGabba]

Hello MST Maintainers,
I hope you are doing well! I have a structural problem with my app that I have been struggling with for a while...

Here is my issue explained in a more simplified manner:

I have a UserModel:
Each user has a unique identifier that can't be replicated per MST policy

export const UserModel = types
  .model("User")
  .props({
    id: types.identifier, //   <------ IDENTIFIER
    firstName: "",
    lastName: "",
    username: "",
    profileImage: types.maybeNull(types.string),
  })
  }))

and I have a FriendshipModel:

export const FriendshipModel = types
  .model("Friendship")
  .props({
    id: types.identifier,
    status: types.frozen<FRIENDSTATUS>(),
    friend: UserModel,   //  <------ Where the actual User Data is stored in the tree
    initiatedByFriend: false,
    createdAt: "",
  })

and I have a MessageModel:

export const MessageModel = types
  .model("Message")
  .props({
    id: types.identifier,
    sender: types.safeReference(UserModel),    //  <------ ISSUE IS HERE
    receiver: types.safeReference(UserModel),  //  <------ ISSUE IS HERE
    createdAt: "",
  })
  }))

I'm essentially reaching out to my API on AWS right upon app load:

  useEffect(() => {
    ;(async function load() {
      setIsLoading(true)
      try {
        await userStore.fetchAllFriendshipsWithCurrentUser()
        await messageStore.fetchUnreadMessagesFromDB()
      } catch (err) {
        console.log("Error with loading messages or friends", err)
      }
      setIsLoading(false)
    })()
  }, [messageStore, userStore, userStore.currentUser?.profileImage])

So everything works PERFECTLY under all normal circumstances. However, as soon as I:

1. As soon as I "unfriend" someone (aka delete their friendship)
2. Delete a user directly from the database in AWS
3. Delete a friendship directly from the database in AWS (and there are already existing messages in the store)

The whole app crashes with the error:
Error: [mobx-state-tree] Failed to resolve reference 'c2f6d730-5fce-4a11-8d05-7c8f80291f1c' to type 'User' (from node: /messageStore/unreadMessages/0/sender)

I tried using types.safeReference instead of types.reference, which prevented a crash, but then stale data was present on the screen.

Obviously, there are a few approaches I have considered.... For example, if a user "unfriends" someone, I just delete all the past messages that were ever exchanged with that user in the AWS database or somehow exclude them in the fetch call... I really would prefer not to delete the data just because each user should still be able to see their messages.

I know there is a good solution out there, thanks in advance for the help!

[coolsoftwaretyler]

Hey @ChristopherGabba - thanks for the very detailed question. Sorry it took a little while to get to you, I was busy this weekend haha.

You've got a lot of the patterns I would recommend, including the safeReference. I think the only thing you're missing is the onInvalidatedHook. That should clean up your stale data and allow you to use the safeReference approach that's working.

Might look like this for you:

export const MessageModel = types
  .model("Message")
  .props({
    id: types.identifier,
    sender: types.safeReference(UserModel).onInvalidate((sender) => {
      // Handle the case where sender is deleted
      // For example, set sender to a default user or handle it according to your logic
    }),
    receiver: types.safeReference(UserModel).onInvalidate((receiver) => {
      // Handle the case where receiver is deleted
      // For example, set receiver to a default user or handle it according to your logic
    }),
    createdAt: "",
  })

Let me know if that works for you or not. I think excluding the data in your fetch is also a reasonable approach, but hopefully this is the simplest change to your existing code and lets you move forward.

[coolsoftwaretyler]

Hey @ChristopherGabba - did that help you out at all? Happy to dig in more if ya need.

[ChristopherGabba]

@coolsoftwaretyler Thanks so much! Sorry I totally should have replied, I feel bad. It does appear to be working with the onInvalidated hook.

Here is exactly what I'm doing:

    sender: types.safeReference(UserModel, {
      onInvalidated(sender) {
        sender.removeRef()
      },
    }),
    receiver: types.safeReference(UserModel, {
      onInvalidated(sender) {
        sender.removeRef()
      },
    }),

It appears to be working. Any suggestions on things I could be doing better?

[coolsoftwaretyler]

Looks pretty reasonable to me! I'd hesitate to give more specific information without additional context, haha. Based on what you described, I think you're in good shape.

If you ever want to chat more about MST and helpful patterns/improvements, I'm pretty easy to get a hold of if needed (email in GitHub profile).

I marked my answer as accepted. Have a good one!

[k-ode]

@ChristopherGabba I'd also consider normalizing the UserModel so that it isn't stored together with a FriendshipModel. You can see how this is typically done in the bookshop example.