Pass a paramter to dexie livequery in vue3

Question

Background

I have some data in indexdb and I'm using dexie.js to access it. I'm using livequery to connect the data to the views in Vue3 and its working fine so far.

Now I want to pass a parameter to the livequery to dynamically filter the results and I'm running into a wall. All the vue examples on the dexie website use static filter values and I can't get any of the other samples to work in vue.

My current failed attempt

This is the first time using rxjs and observables so I might be way off, but I'm trying to wrap my param into an observable (using functions from the vueuse lib) so that livequery is able to pick up changes to the param.

const query = ref("");

const obsQuery = from(query, {
    immediate: true,
    deep: false,
  })


let ff = liveQuery(() =>

obsQuery.subscribe(v => db.documents
    .where("textIndex")
    .startsWithIgnoreCase(v)
    .and(x => x.deleted == 0)
    .distinct()
    .toArray())

    
);

ff.subscribe(x => console.log('lq ',x));
obsQuery.subscribe(x => console.log('obsQuery ',x));

But now livequery is returing the wrong type. am I on the right track or over complicating things?

Answer 1

Ok after reading the rxjs docs I may have found a solution

export function filterDocuments() {

const query = ref("");

const obsQuery = from(query, {
    immediate: true,
    deep: false,
})

const dbQ = liveQuery(() => db.documents.where("textIndex").startsWithIgnoreCase(query.value).distinct().toArray());
const source = obsQuery.pipe(map(() => dbQ));
const out = source.pipe(switchAll());

return { view: out, query: query };

}

SwitchAll is the magic function that creates a new observable (in thise case the livequery) when query search string changes.

Curious to hear if this approach is the correct one.