Failed to resolve reference

[phhoef]

Good day,

I am new to mobx and react native and asking you for help.
I built a small backend with nestjs that the client app queries to get the content.

On the very first start of the app, when the state is empty and I am going to fetch the data from the server, I'll always get the error "Failed to resolve reference".
Error: [mobx-state-tree] Failed to resolve reference '613ca828e79d24591637d48d' to type 'Equipment' (from node: /toolshedStore/toolsheds/0/equipments/0)

Though, the data is loaded and the state is set.
I double checked with Reactotron and the equipment with this ID is present in the store.
When I reload the app (without resetting the state), the app will work properly.

I've created 3 models and 3 stores:

export const TruckModel = types
  .model("Truck")
  .props({
    id: types.identifier,
    name: types.string,
    type: types.optional(types.string, ""),
    yearOfConstruction: types.optional(types.number, 0),
    toolsheds: types.optional(types.array(types.late(() => types.reference(ToolshedModel))), []),
    createdAt: types.Date,
    updatedAt: types.Date,
  })

export const ToolshedModel = types
  .model("Toolshed")
  .props({
    id: types.identifier,
    name: types.string,
    truck: types.late(() => types.reference(TruckModel)),
    equipments: types.optional(types.array(types.late(() => types.reference(EquipmentModel))), []),
    createdAt: types.Date,
    updatedAt: types.Date,
  })

export const EquipmentModel = types
  .model("Equipment")
  .props({
    id: types.identifier,
    name: types.string,
    toolshed: types.late(() => types.reference(ToolshedModel)),
    keywords: types.optional(types.array(types.string), []),
    createdAt: types.Date,
    updatedAt: types.Date,
  })

I tried switching between reference and safeReference, but that does also not solve the error.
In fact, when switching to safeReference the data is never shown in my list.

As far as I understand, I've to use types.late for circular dependencies.
But not sure if this is necessary for both ways?

Can someone please give me a push in the right direction?

[EmilTholin]

Hi @phhoef!

If you can see the data in the store in Reactotron, and it works when you reload without resetting the state, then you most likely have a race condition in your data loading, i.e. your ToolshedModel instances are at least sometimes created before your EquipmentModel instances.

Do you think you could include a minimal example in CodeSandbox or something similar?

[phhoef]

Hallo @EmilTholin,

thanks for your reply.
I'll try to create a minimal example. As I said, I am quite new to react-native and I am not sure, if I can manage to do that. I am using Ignite as boilerplate and the structure is quite complex. Not sure how to reduce it for a minimal example.

This is the method fetching the data.

  const fetchData = () => {
    setRefreshing(true)
    toolshedStore.loadToolsheds()
    truckStore.loadTrucks()
    equipmentStore.loadEquipments()
    setRefreshing(false)
  }

And here is exemplary a load method of a store:

export const ToolshedStoreModel = types
  .model("ToolshedStore")
  .props({
    toolsheds: types.optional(types.array(ToolshedModel), []),
  })
  .extend(withEnvironment)
  .views((self) => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars
  .actions((self) => ({
    saveToolsheds: (toolshedSnapshots: ToolshedSnapshot[]) => {
      const toolshedModels: Toolshed[] = toolshedSnapshots.map((t) => ToolshedModel.create(t))
      self.toolsheds.replace(toolshedModels)
    },
  })) // eslint-disable-line @typescript-eslint/no-unused-vars
  .actions((self) => ({
    loadToolsheds: flow(function* () {
      const result: GetToolshedsResult = yield self.environment.api.fetchToolsheds()

      if (result.kind === "ok") self.saveToolsheds(result.toolsheds)
      else __DEV__ && console.tron.log(result.kind)
    }),
  }))

I understand, that it's not guaranteed, in which order the items are loaded.
But, I was expecting, that the types.late() definition of the model would take care of that.
How can I ensure, that the data is fetched in the right order?

[EmilTholin]

Great, thanks.

Ah, my bad, I didn't see that you had references to EquipmentModel in your ToolshedModel and references to ToolshedModel in your EquipmentModel.

types.late only makes sure that circular dependencies between your files work as expected, but types.reference expects that there is a model in the tree that corresponds to the given identifier, so no matter how you load the data you will most likely get this problem.

You could e.g. make it so that only the ToolshedModel has a references to EquipmentModel and TruckModel and not the other way around, and make sure you load the equipment and truck data before the toolshed data:

const fetchData = async () => {
  setRefreshing(true)

  await Promise.all([equipmentStore.loadEquipments(), truckStore.loadTrucks()])
  await toolshedStore.loadToolsheds()

  setRefreshing(false)
}

Or you could create custom references of your own that e.g. resolves to null until the model can be found, so you don't get an error:

export const TruckReference = t.maybeNull(
  t.reference(TruckModel, {
    get(id, parent) {
      if (parent === null) return null;

      return resolveIdentifier(TruckModel, parent, id) || null;
    },
    set(thing) {
      return thing.id;
    },
  }),
);

[phhoef]

Again, thanks for your explanation.
I am afraid, I need this circular dependency to easily navigate up and down between my models.

So, I need to go for the custom references.
I created custom references and adapted my models to make use of the new references.
In addition, I need to handle the new null references, when accessing my model tree.

And now, it actually works :-)
Cleared the root store several times and reloaded the app. Each time, the models are now shown properly without any exception.
Thanks for your help 👍