Awesome React integration coming!

Using Dexie in React will become a greater experience

Until now, Dexie’s strength has been to be promise based a wrapper around IndexedDB but now we are taking steps to make it easier to use Dexie in front-end libraries. The first one we focus on is React.

At the core, we want Dexie.js to be able to observe queries, not just execute them in one shot. I’ve been cooking ideas around this for years and finally landed in an API that can turn a Promise-returning function into an Observable.

Yes, you may read that line again! How would this even be possible? I will spare you the details in this article, but it is actually possible if you can keep a context alive through the execution of your promise-returning function somehow — a context that can be used to track what tables, keys or ranges that are being queried along the way into a final result, and then start subscribing on changes to those parts of the data.

The new function we export is called liveQuery() and is described in the release notes for 3.1.0-alpha.1.

We are observing the result of the promise-returning function. Directly when this code executes, you will see a log entry in the console:

Got result: []

Then when callback to setTimeout() has added a friend (after a second), you will see it log the result:

Got result: [{name: "Joe", age: 78}]

But observables are for Angular, not React, right? True. However, there are a couple of libraries that embrace the use of observables in React as well. One of them is our own new react hook useLiveQuery().

If you want to give it a try, install our latest alpha version of Dexie or have a look at the real-world sample below that use this:

To try it yourself on stackblitz or fork the Github project!

You can also install it into your app:

npm install dexie@>=3.1.0-alpha.8
npm install dexie-react-hooks

Read the docs for useLiveQuery() and get going!

NOTE: For a long time, we’ve had an add-on, Dexie.Observable.js that could be used to gain reactivity but to the cost of both complexity and performance. And it had nothing to do with Observables as in Ecmascript proposal for Observable or RxJS observables — and it has not entered a stable state yet, but hopefully, it will not be as useful anymore as we will have liveQuery built-in instead.