Svelte Stores x Dexie 2.0

Nico Heinrich — Thu, 20 Apr 2023 14:15:07 +0000

My first post was about connecting a svelte store to the indexedDB. This one will be an update on the same topic. Keep reading if you want a completely different approach that is more practial in most cases!

What I want to achieve

I want to save data in the indexedDB and use that data in my app.

The problem

As the idexedDB works asynchronously, most of the time the page will be loaded before the data, which results in an ugly flicker when the elements are updated due to svelte's reactive nature. So, the data should be loaded from a store rather than the indexedDB itself whenever possible. Obviously, it has to be loaded once on the initial page load — but with an SPA that is it!

The solution

A svelte store with a special function that gets the data from the indexedDB. That is basically it but there are some important subtleties that I will explain in a minute.

Install Dexie

In order to use this, you need to install Dexie.js:

npm install dexie

Create db.js

This is the very minimalistic set-up for your indexedDB that sits in your lib folder:

import Dexie from 'dexie';

export const db = new Dexie("user");

db.version(1).stores({
  user: "key, value"
});

Create stores.js

This is the actual store that you can use in your +page.svelte. As you can see, it has a function called sync which gets the data from the indexedDB with Dexie and sets the data of userData. It also returns a promise which will be very handy in a second.

import { writable } from "svelte/store";
import { db } from "$lib/db";

export const userData = writable([]);

userData.sync = function() {
    return new Promise (async (resolve, reject) => {
        try {
            const data = await db.user.toArray();
            userData.set(data);

            resolve();
        } catch (error) {
            console.error(error);

            reject (error);
        }
    })
}

How To Load

import { userData } from "@stores"; // I am using an alias here

<script>
    function handleMount() {
        userData.sync()
    }

    onMount(handleMount);
</script>

<main>
    {#each $userData as data}
        <p>{data.name}, {data.age}</p>
    {/each}
</main>

Do Stuff When The Data Has Been Loaded

Sometimes you need to wait for the data until you can call a function. This is no longer a problem, as you can just use .then after the sync-Function.

import { userData } from "@stores"; // I am using an alias here

<script>
    function handleMount() {
        userData.sync()
        .then(() => {
            // do stuff!
        })
    }

    onMount(handleMount);
</script>

<main>
    {#each $userData as data}
        <p>{data.name}, {data.age}</p>
    {/each}
</main>

How To Save

To save data in the indexedDB, simply use the Dexie API and then update the store:

    function saveData() {
        db.user.put({ name, inputValue });
        userData.sync()
    }

I really like this work flow, as it gives me way more control than the last solution (and Dexie's liveQuery) but is still really, really simple!

Cheers,

Nico

Svelte Stores x Dexie

Nico Heinrich — Wed, 08 Feb 2023 13:31:04 +0000

Hey coding friends!

Today I solved a problem that had driven me mad yesterday. I wanted to connect the indexedDB with Svelte Stores to get what is often called "persistent stores" that last even when the browser window is closed. I have seen several tutorials on how to do this using Local Storage but only one using indexedDB (closingtags.com/svelte-stores-in-indexeddb). The latter might be totally fine, however, for me, as a beginner, it was kind of overwhelming.

Today I managed to come up with a very simple and reusable code that does exactly what I need — and I want to share it with you!

In order to use this, you need to install Dexie.js:

npm install dexie

... and the following three files ...

db.js

This is the very minimalistic set-up for your indexedDB:

import Dexie from 'dexie';

export const db = new Dexie("user");

db.version(1).stores({
  user: "key, value"
});

dbWriteble.js

This is a custom writable that handles loading data from the indexedDB on "init" and saving it on "set" (or automatically if you use the amazing $-syntax from Svelte). I got most of the code from this Video and simply added the init function and the indexedDB communication:

import { db } from "./db";
import { browser } from "$app/environment";

export function dbWritable(store, key, value) {
    let subscribeFunctions = [];

    async function init() {
        // checks if code runs in the browser and loads data from db
        if (browser) {
            const data = await db[store].get(key);
            // sets value of writable to data loaded
            if (data) set(data.value);
        }
    }

    function set(newValue) {
        value = newValue;

        subscribeFunctions.forEach(func => func(newValue));

        // saves value to db
        db[store].put({key, value});
    }

    function update(callback) {
        set(callback(value));
    }

    function subscribe(callback) {
        subscribeFunctions.push(callback);

        callback(value);

        return function() {
            subscribeFunctions = subscribeFunctions.filter(func => func !== callback);
        }
    }

    init();

    return {set, update, subscribe};
}

stores.js

And this is your usual stores.js where you import the special dbWritable:

import { dbWritable } from "./dbWritable";

export let isDark = dbWritable("user", "isDark", false);

Unlike usual writables, this dbWritable takes in three arguments: a store name, a key name and lastly a default value. Now this store can be used just like any normal Svelte store. However, when you close the browser and open it again, it is still there.

If you have any questions or improvements, let me know!