Search code examples
vue.jsvuexdexie

Reactive Dexie-Query in Vue

I am using Dexie and would like to implement this in my Vue 3 frontend.

In the mount() method, I query the database using the following example and assign this to a local variable in the Vue template which is then rendered.

const oldFriends = await db.friends
        .where('age').above(75)
        .toArray(); 

this.friends = oldFriends;

Now I have a situation where a web worker changes the IndexedDB, and writes new values in there via Dexie (so in this example, adds another friend).

Now how do I make my Vue component notice this update and render the "new" friend - so the Dexie query becomes reactive?

Solution

  • EDIT: Here's a sample I tried to create out of my limited vue knowledge

    You need to npm install dexie@next and import { liveQuery } from "dexie".

    This new feature was introduced a year ago and allow you to turn an async function into an observable as long as it only queries your database.

    It's described in these release notes: https://github.com/dfahlander/Dexie.js/releases/tag/v3.1.0-alpha.1

    And on the following blog: https://medium.com/dexie-js/awesome-react-integration-coming-f212c2273d05

    So, there's both 'liveQuery' and 'useLiveQuery'. The former is the framework agnostic one, included in dexie library itself and the latter just a some react sugar on top of it.