Skip to main content

Reactive queries plugin

Installation And Usage​

Install it:

yarn add @kikko-land/reactive-queries-plugin

Add this plugin to initDb:

const db = await initDbClient({
  dbName: "helloWorld4",
  dbBackend: absurdWebBackend({
    wasmUrl: "https://kikko-doc.netlify.app/wasm/sql-wasm.wasm",
  }),
  plugins: [reactiveQueriesPlugin()],
});

And then listen your queries:

const unsubscribe = listenQueries(db, [sql`SELECT * FROM ${sql.table`notes`}`], (res) => {
  console.log("Queries result: ", res);
});

// You can also unsubscribe lately
setTimeout(() => {
  unsubscribe();
}, 1000);

CodeSandbox example:

How reactivity works​

This plugin gathers information about which tables are used when you build queries.

console.log(
  sql`SELECT * FROM ${sql.table`notes`} WHERE id = (SELECT noteId FROM ${
    sql.table`comments`
  )} LIMIT 1)`.tables.map(({ name }) => name)
);
// => ["notes", "comments"]

reactive-plugin will hook on each query run and determine if read or write query will be executed by SQLite. When write query finished executing, reactive-plugin will notify all other tabs (using broadcast-channel) which tables were changed. Then all queries that are subscribed to changed tables will be notified.