An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Svelte Stores x Dexie 2.0
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.progress.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 more control that the last solution but is still really, really simple!
Cheers,
Nico
Original Link: https://dev.to/nicoheinrich/svelte-stores-x-dexie-20-5m6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To