Is there a better way to write this code in svelte using dexie?

user_14231989 0
Viewed 259

Trying to learn svelte and using dexie. Is there a better way to get data to the array from indexedDB?

My functions.js file

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

db.version(1).stores({
  todo: "++id,note",
});

App.svelte

<script>
  import { onMount } from "svelte";
  import { db } from "./functions";

  let newnote = "";
  let addnote = (e) => {
    db.todo.add({ note: newnote });
    db.todo.toArray().then(items => {
      todos = items;
    });
  };

  $:todos = [];
  let start = () => {
    db.todo.toArray().then(items => {
      todos = items;
    });
  };

  onMount(() => {
    start();
  });
</script>

<main>
  <h1 id="title">ToDo</h1>
  <input type="text" id="newnote" bind:value={newnote} />
  <input type="button" value="Add" on:click={addnote} />

  <br>
  {#each todos as todo}
    {todo.note} <br>
  {/each}
</main>

Btw, can you keep this code hidden in the app? If so, how? Or is that not necessary?

dexie svelte
1 Answers

You'd get the simplest integration by using the new liveQuery() from dexie@3.2.0.

npm install dexie@latest

Play around with this in the following codesandbox: https://codesandbox.io/s/svelte-with-dexie-livequery-2n8bd?file=/App.svelte

To translate your specific example:

<script>
  import { liveQuery } from "dexie";
  import { db } from "./functions";

  let newnote = "";
  let addnote = (e) => {
    db.todo.add({ note: newnote });
  };

  const todos = liveQuery(
    () => db.todo.toArray()
  );
</script>

<main>
  <h1 id="title">ToDo</h1>
  <input type="text" id="newnote" bind:value={newnote} />
  <input type="button" value="Add" on:click={addnote} />

  <br>
  {#if $todos}
    {#each $todos as todo}
      {todo.note} <br>
    {/each}
  {/if}
</main>

Some explanations:

  • Dexie's liveQuery() returns an observable compatible with rxjs, es-observable proposal as well as Svelte's store contract)
  • The initial result will be undefined (that's why we need to #if todos) as the results are asynchronous.
  • When you mutate the DB you don't need to care about re-querying - this happens automatically.
  • Even if the DB is mutated from another tab or window, your view will also update.
  • Your query can be how simple or complex as it requires. It can even be an async function that awaits several queries in a row and returns the final result. Everything it queries will be observed and the entire function will be re-executed whenever database is mutated in a way that would affect any of the queries involved. Observation is fine grained to optimize performance. For example if you query all todoItems with certain tags (db.todo.where({tags: 'sports'})) assuming tags is a multiEntry intexed array, no update will occur unless a todoItem with that tag is updated, added or deleted, or if another todoItem gets the "sports" tag.

I've blogged about this feature and how it can enhance ReactJS apps, however, I wasn't aware of the Svelte store contract until recently and happily understood that we have Svelte integration for free.

user_12829230
Related