How to assign a ref-type object to a nested observable property at runtime?

[mannok]

I'm using MobX v6+ and trying to assign a ref-type object to a nested property inside an observable structure. Here's the setup:

import { observable } from 'mobx';

const foo = observable({
  bar: {
    gar: {
      zar: 123
    }
  }
});

By default, foo.bar.gar becomes deeply observable. But I want to replace gar with a plain object and have MobX treat it as a reference, so that only reassignment of gar triggers reactions—not mutations inside it.

I tried:
foo.bar.gar = observable.ref({ zar: 456 });
But this throws a TypeScript error:
An argument for 'propertyKey' was not provided.

I understand that observable.ref is meant to be used as an annotation, but I need to apply it at runtime, not during object construction or inside makeObservable.

In short:

• How can I assign a ref-type object to a nested property like foo.bar.gar at runtime?
• Is there a MobX-supported way to wrap a value with ref behavior dynamically?
• If not, is there a workaround to prevent MobX from deeply observing the new value?

[mweststrate]

If you don't know upfront which property should not become observable, you cannot annotate indeed. However, MobX will never make any class instance automatically observable, so you can use that to prevent auto observing.

E.g. something like this will do the trick:

class Ref<T> {
  constructor(private value: T) {}
  get(): T { return this.value }
}

Now you can do something like foo.bar.gar = new Ref({ zar: 456 }), and then get it back using foo.bar.gar.get().

If the object { zar: 456} itself could be turned into some class based type, that would also work.

[mweststrate]

Or alternatively foo.bar.gar = makeObservable({ zar: 456 }, { /* no properties annotated */ }, {proxy:false /* don't wrap in a Proxy */}) would likely do the trick as well, it marks the object as 'observable', but none of the properties actually will be.

[mannok]

Thanks, the proxy: false approach works concisely and handy.