How to wait for nested document to resolve before cloning document ?

[mrleblanc101]

In my store, I have a useCollection(collection(db, 'entries')).
Each entry contains a project key with is a reference to a document in another collection.
When I add a document to the collection with addDoc, a new instance of my component is created since I loop on the reactive array.
The problem is when my component is created, I clone the props to "save" the initial state.
But at this point in time, it looks like my project is still a reference and not yet resolved.

When I inspect the props, I see that the document probably gets resolved later since i now have an object instead of a string, but now my data does not match between my props and my cloned data.

Should I just watch the props and update the copy when the props change ?
This seems weird to me.
Or is there a way for useCollection to add/remove from the collection only once the nested document is itself fetched ?

[posva]

You have the wait option that can help in some scenarios with collections. Also, you can await the promise.value for nested documents to be set

[mrleblanc101]

I tried wait, from the documentation it says: If true, wait until the data is loaded **before setting the data for the first time**.
In my case, I want to wait when useCollection is updated from an addDoc.
This is because

const entries = useCollection<Entry>(
    computed(() =>
        user.value
            ? query(
                  collection(db, 'entries').withConverter(dateConverter),
                  where('user', '==', user.value?.uid),
                  where('date', '>=', weekStart.value),
                  where('date', '<=', weekEnd.value),
              )
            : null,
    ),
    {
        ssrKey: 'entries',
        wait: true,
    },
);

async function addEntry(entry: Entry) {
    await addDoc(collection(db, 'entries').withConverter(dateConverter), {
        ...entry,
        user: user.value?.uid,
        project: entry.project?.id ? doc(db, 'projects', entry.project.id) : null,
    });
}

This is because I loop on the Entries, for each Entry I create a component which clone the Entry props at creation so I can "cancel" the user edits. Also because I can't v-model on props value directly, and I don't want to call updateDocument directly, I want to update the document when the use click the "Save" button.

const model = ref(Object.create(null, Object.getOwnPropertyDescriptors(props.entry)));

[mrleblanc101]

For the second part of your comment, I supose you are refering to this ? I'll try but theA promise that resolves or rejects when the initial state is loaded made me think that wasn't the right approach either.

const {
  // rename the Ref to something more meaningful
  data: contact,
  // is the subscription still pending?
  pending,
  // did the subscription fail?
  error,
  // A promise that resolves or rejects when the initial state is loaded
  promise,
} = useDocument(contactSource)

[posva]

Ah yes, I didn't see the addDoc part. There is no way to wait for the changes (there is no practical way to expose it either). Maybe in the future there could be an option to wait for added documents but I think I tried in the past and it exposed other problems.

[mrleblanc101]

I think I found a way around my problem, let's see if it create other problem 😬

const model = ref();
watch(
    () => props.entry.project,
    () => {
        model.value = Object.create(null, Object.getOwnPropertyDescriptors(props.entry));
    },
    { immediate: true },
);