VueFire: Resolving references after setting on the client

Question

According to the docu "[...] VueFire will automatically bind up to one nested references.". That works well, if I retrieve an object (map) from the database with a property being a ref: The ref gets ressolved automatically on the client (ref_property will not hold the path to the object (e.g. users/123) but the actual data ({username: 'john', hometown: 'autumn'}).

Question is: How do I update a ref_property (e.g. suppose a last_edit_by_ref) on the client in a way, that a.) VueFire is able to resolve this to a valid JSON for the UI and b.) make sure that it's stored as a ref in the database at the same time?

I tried to fetch the referenced object (again) from the collection as explained here ("To write a reference to a document, you pass the actual reference object"). The issue with this is however, that VueFire does not ressolve this, leading to empty values in the UI:

post.last_edit_by_ref = db.collection('users').doc('123')

Background: If I'm setting plain JSON, the property is no longer stored as a reference in the database. This is bad, since the linked object is likely to be changed (and the linking objekt would then hold copied, outdated data).

Answer 1

It does not related to VueFire. It is how firebase parse the Object it get in the set/update methods.

If you focus on this part:

const data = {
  age: 18,
  name: "John",
  carRef: db.collection('cars').doc('john-car'),
}

await db.collection('users').doc('john').set(data);

You will have the ref in firestore. And in turn, VueFire will automatic bind the object.

For your case, i think you will need to find a way to get the db.collection('users').doc(last_edit_user_id) to make the ref for post.