Incremental live queries

electric-sql · Jul 24, 2024 · 671e446 · 671e446
1 parent 253ddb7
commit 671e446
Show file tree

Hide file tree

Showing 5 changed files with 497 additions and 37 deletions.
diff --git a/packages/pglite/examples/live-changes.html b/packages/pglite/examples/live-changes.html
@@ -0,0 +1,54 @@
+<button id="start">start</button><button id="add">Add</button>
+<pre id="output"></pre>
+<script type="module">
+  import { PGlite } from "../dist/index.js";
+  import { live } from "../dist/live/index.js";
+
+  const output = document.getElementById("output");
+  const startBtn = document.getElementById("start");
+  const addBtn = document.getElementById("add");
+  let counter = 1000;
+  let lastClicked = 0;
+  const nameLength = 10000;
+  const nameSuffix = "-".repeat(nameLength);
+
+  const pg = new PGlite({
+    extensions: {
+      live,
+    },
+  });
+  window.pg = pg;
+
+  await pg.exec(`
+    CREATE TABLE IF NOT EXISTS test (
+      id SERIAL PRIMARY KEY,
+      rand float,
+      name TEXT
+    );
+    INSERT INTO test (name, rand)
+    SELECT 'test' || i || '${nameSuffix}', random()
+    FROM generate_series(1, ${counter}) AS i;
+  `);
+
+  startBtn.addEventListener("click", async () => {
+    lastClicked = performance.now();
+    pg.live.changes(
+      "SELECT * FROM test ORDER BY rand;",
+      null,
+      "id",
+      (changes) => {
+        const time = performance.now() - lastClicked;
+        console.log(`Update took ${time}ms`);
+        output.textContent = JSON.stringify(changes, null, 2);
+      }
+    );
+  });
+
+  addBtn.addEventListener("click", async () => {
+    lastClicked = performance.now();
+    await pg.query(
+      "INSERT INTO test (name, rand) VALUES ($1, random());",
+      [`test${++counter}${nameSuffix}`]
+    );
+  });
+</script>
diff --git a/packages/pglite/examples/live-incremental.html b/packages/pglite/examples/live-incremental.html
@@ -0,0 +1,54 @@
+<button id="start">start</button><button id="add">Add</button>
+<div id="output"></div>
+<script type="module">
+  import { PGlite } from "../dist/index.js";
+  import { live } from "../dist/live/index.js";
+
+  const output = document.getElementById("output");
+  const startBtn = document.getElementById("start");
+  const addBtn = document.getElementById("add");
+  let counter = 1000;
+  let lastClicked = 0;
+  const nameLength = 10000;
+  const nameSuffix = "-".repeat(nameLength);
+
+  const pg = new PGlite({
+    extensions: {
+      live,
+    },
+  });
+  window.pg = pg;
+
+  await pg.exec(`
+    CREATE TABLE IF NOT EXISTS test (
+      id SERIAL PRIMARY KEY,
+      rand FLOAT,
+      name TEXT
+    );
+    INSERT INTO test (name, rand)
+    SELECT 'test' || i || '${nameSuffix}', random()
+    FROM generate_series(1, ${counter}) AS i;
+  `);
+
+  startBtn.addEventListener("click", async () => {
+    lastClicked = performance.now();
+    pg.live.incrementalQuery(
+      "SELECT * FROM test ORDER BY rand;",
+      null,
+      "id",
+      (res) => {
+        const time = performance.now() - lastClicked;
+        console.log(`Update took ${time}ms`);
+        output.textContent = res.rows.map((row) => row.id).join(", ");
+      }
+    );
+  });
+
+  addBtn.addEventListener("click", async () => {
+    lastClicked = performance.now();
+    await pg.query(
+      "INSERT INTO test (name, rand) VALUES ($1, random());",
+      [`test${++counter}${nameSuffix}`]
+    );
+  });
+</script>
diff --git a/packages/pglite/examples/live.html b/packages/pglite/examples/live.html
@@ -1,13 +1,16 @@
 <button id="start">start</button><button id="add">Add</button>
-<pre id="output"></pre>
+<div id="output"></div>
 <script type="module">
   import { PGlite } from "../dist/index.js";
   import { live } from "../dist/live/index.js";
 
   const output = document.getElementById("output");
   const startBtn = document.getElementById("start");
   const addBtn = document.getElementById("add");
-  let counter = 5;
+  let counter = 1000;
+  let lastClicked = 0;
+  const nameLength = 10000;
+  const nameSuffix = "-".repeat(nameLength);
 
   const pg = new PGlite({
     extensions: {
@@ -19,22 +22,28 @@
   await pg.exec(`
     CREATE TABLE IF NOT EXISTS test (
       id SERIAL PRIMARY KEY,
+      rand FLOAT,
       name TEXT
     );
-    INSERT INTO test (name)
-    SELECT 'test' || i
+    INSERT INTO test (name, rand)
+    SELECT 'test' || i || '${nameSuffix}', random()
     FROM generate_series(1, ${counter}) AS i;
   `);
 
   startBtn.addEventListener("click", async () => {
-    pg.live.query("SELECT * FROM test ORDER BY id DESC;", null, (res) => {
-      output.textContent = JSON.stringify(res.rows, null, 2);
+    lastClicked = performance.now();
+    pg.live.query("SELECT * FROM test ORDER BY rand;", null, (res) => {
+      const time = performance.now() - lastClicked;
+      console.log(`Update took ${time}ms`);
+      output.textContent = res.rows.map((row) => row.id).join(", ");
     });
   });
 
   addBtn.addEventListener("click", async () => {
-    await pg.query("INSERT INTO test (name) VALUES ($1);", [
-      `test${++counter}`,
-    ]);
+    lastClicked = performance.now();
+    await pg.query(
+      "INSERT INTO test (name, rand) VALUES ($1, random());",
+      [`test${++counter}${nameSuffix}`]
+    );
   });
 </script>