Reactive useCollection query not updated when docs change on the server.

[manuelmypan]

Hello everyone,

I am rather new to vue and vuefire...

I'm struggling to get a reactive useCollection with a query to work, so that I get the changes on the client side if documents on the server change.

My simplified code looks something like this:

const accountId = ref('')
const botsCollection = useCollection(computed(() => 
  query(
    collection(db, 'chatBots'),
    where('accountId', '==', accountId)
  )
), { 
  ssrKey: 'chatBots' 
})

Even if I remove the where clause, I still don't get any updates.

const botsCollection = useCollection(computed(() => 
  query(
    collection(db, 'chatBots'),
  )
), { 
  ssrKey: 'chatBots' 
})

I will get the initial documents, but if I change the content of a document on the server side or add a new one, botsCollection is never updated (checked with a watch on botsCollection).

On single docs (using useDocument) it works fine and I get the updates if the content of the doc changes on the server side.

Where am I going wrong here? Is this even supposed to work like this?

Thanks!

[posva]

You are just missing the .value in your code:

const accountId = ref('')
const botsCollection = useCollection(computed(() => 
  query(
    collection(db, 'chatBots'),
    where('accountId', '==', accountId.value)
  )
), { 
  ssrKey: 'chatBots' 
})

You can also just pass the function rather than the computed.
The rest should be working. If not, a reproduction using one of the examples would help