chore: example using pneding promises

Author: posva

playground/src/pages/config.vue

@@ -1,17 +1,37 @@
 <script setup lang="ts">
-import { doc } from 'firebase/firestore'
+import { doc, getDoc } from 'firebase/firestore'
 import { useDocument } from 'vuefire'
 import { useFirestore } from '@/firebase'
+import { ref } from 'vue'
+import { usePendingPromises } from '../../../src/ssr/plugin'
 
 const db = useFirestore()
 const configRef = doc(db, 'configs', 'jORwjIykFo2NmkdzTkhU')
 // const itemRef = doc(db, 'tests', 'item')
+const isDoneFetching = ref(false)
+const isAllDoneFetching = ref(false)
 
-const config = useDocument(configRef)
+getDoc(configRef).then((data) => {
+  console.log('got data once', data)
+})
+
+const { data: config, promise } = useDocument(configRef, { wait: true })
 // const { data: hey } = useDocument(configRef)
+
+promise.value.then((data) => {
+  console.log('one', data)
+  isDoneFetching.value = true
+})
+
+usePendingPromises().then((data) => {
+  console.log(data)
+  isAllDoneFetching.value = true
+})
 </script>
 
 <template>
   <p>config:</p>
+  <p>finished: {{ isDoneFetching }}</p>
+  <p>All finished: {{ isAllDoneFetching }}</p>
   <pre>{{ config }}</pre>
 </template>

playground/src/pages/nested-collections.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import { collection } from 'firebase/firestore'
-import { ref } from 'vue'
-import { firestoreBind } from 'vuefire'
+import { useCollection } from 'vuefire'
 import { useFirestore } from '@/firebase'
 
 const db = useFirestore()
 const tweetsRef = collection(db, 'tweets')
 const nestedRef = collection(db, 'nested')
 const momentsRef = collection(db, 'moments')
 
-const nested = ref([])
-firestoreBind(nested, nestedRef)
+const nested = useCollection(nestedRef)
 
-const tweets = ref([])
-firestoreBind(tweets, tweetsRef)
-const moments = ref([])
-firestoreBind(moments, momentsRef)
+const tweets = useCollection(tweetsRef)
+const moments = useCollection(momentsRef)
 </script>
 
 <template>