How to properly await data retrieval with useDatabaseList in setup script?

[Crease29]

Hey there,

I'm having some troubles in understanding how to properly await data loading via useDatabaseList.

Here's my example:

<script setup>
import {useDatabase, useDatabaseList} from "vuefire";
import {ref as dbRef} from "firebase/database";

const config = await useDatabaseList(dbRef(useDatabase(), 'config'));

console.log(config.value); // Proxy {} -> No data loaded

setTimeout(() => {
    console.log(config.value); // Proxy {0: {…}}  -> We got the data 1 second later
}, 1000)
</script>

Interestingly, when I change something in my code and the automatic component reload happens in my dev environment, also the first console.log returns the data then.

So I'd love to get some hints how to reliably await data retrieval from a DatabaseList.

Thanks in advance!

[Crease29]

I've now tried the following approach, which seems to work reliably but I'm not sure, if that's the way how it's intended?

<script setup>
import {useDatabase, useDatabaseList} from "vuefire";
import {ref as dbRef} from "firebase/database";

const {data: config, promise: configPromise} = useDatabaseList(dbRef(useDatabase(), 'config'));

await configPromise.value;

console.log(config.value); // Proxy {0: {…}}
</script>

[posva]

Yes, this is doable if you want your component to render only after the initial value has been set