refetch on change

2024-12-03 00:34:32 +02:00
parent 98b2253e55
commit 1b94d9c4ca
1 changed files with 23 additions and 1 deletions
@@ -48,7 +48,10 @@

 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
-import { qrCodeDbLocal } from '@/api/dbs'
+import { qrCodeDbLocal, qrCodeDbRemote } from '@/api/dbs'
+import { getUserUuid } from '@/utils/getUserUuid'
+import { onMounted } from 'vue'
+import type { QRCodeDocument } from '@hereconnect/types'

 const query = useQuery({
  queryKey: ['qrCodes'],
@@ -60,4 +63,23 @@ const query = useQuery({
    })
  },
 })
+
+let replication: PouchDB.Replication.Replication<QRCodeDocument> | null = null
+onMounted(() => {
+  replication = qrCodeDbLocal.replicate.from(qrCodeDbRemote, {
+    live: true,
+    selector: {
+      type: 'qr_code',
+      user_uuid: getUserUuid(),
+    },
+  })
+  replication.on('change', () => {
+    query.refetch()
+  })
+})
+onBeforeUnmount(() => {
+  if (replication) {
+    replication.cancel()
+  }
+})
 </script>