InvalidReferenceError in an array with circular dependency

[carlflor]

Hi, I have this model, Article, which has relatedArticles.

const Article = types
    .model({
        body: types.optional(types.string, ""),
        id: types.identifierNumber,
        name: types.optional(types.string, ""),
        relatedArticles: types.maybe(
            types.array(types.reference(types.late((): IAnyModelType => Article))),
        ),
    });

My snapshot is something like:

const article = {
    body: "Lorem Ipsum is simply dummy text",
    id: 100,
    name: "My article title",
    relatedArticles: [101, 102, 103],
};

Doing this works fine:

// inside an action, details.relatedArticles is of type number[]
self.relatedArticles = castToSnapshot(details.relatedArticles);

but in the case where one of the IDs in relatedArticles are missing, I get this error:

Uncaught Error: [mobx-state-tree] Failed to resolve reference '101' to type 'late(function () { return Article; })' (from node: /contentStore/articleMap/101/relatedArticles/0)

I understand that the issue is that 101 article doesn't exist, but I'd like to ignore that and just skip that article id. Is there a way to go about this?

I've tried these, but they didn't work:

using maybeNull
        relatedArticles: types.maybe(
            types.array(types.maybeNull(types.reference(types.late((): IAnyModelType => Article)))),
        ),

using safeReference
        relatedArticles: types.maybe(
            types.array(types.safeReference(types.late((): IAnyModelType => Article))),
        ),

using removeRef
        relatedArticles: types.maybe(
            types.array(types.reference(types.late((): IAnyModelType => Article), {
                onInvalidated(ev) {
                    ev.removeRef();
                },
            })),
        ),

invert late and reference
        relatedArticles: types.maybe(
            types.array(types.late((): IAnyModelType => types.safeReference(Article) as IAnyModelType)),
        ),

[EmilTholin]

Hi @carlflor!

Do you have a minimal reproducible example of your problem? The second approach you outline in your snippet with the safeReference should work. I threw together a tiny example and it works nicely.

[carlflor]

Hi @EmilTholin ,

Thanks for this example. In my use case, the details of the article (body and related articles) are loaded after some time instead of them getting loaded when the store is created. Basically, I have a list of articles already, but I load the article details when I open the article page. I did this for performance enhancement.

Here's a forked version of your sample that has a failing example

[EmilTholin]

Ah, now I understand your issue, thank you.

I'm not exactly sure why it's implemented this way so that it doesn't work if references are set at a later stage, but in the meantime you could check if the references are valid in setRelatedArticles and remove them if they are not:

setRelatedArticles: (ids) => {
  self.relatedArticles = ids;

  for (let i = self.relatedArticles.length - 1; i >= 0; --i) {
    if (!isValidReference(() => self.relatedArticles[i])) {
      self.relatedArticles.splice(i, 1);
    }
  }
}

[carlflor]

I see. Thanks for this! :)