[WIP] Incremental Watched Queries

.changeset/little-bananas-fetch.md

@@ -0,0 +1,5 @@
+---
+'@powersync/common': minor
+---
+
+Added additional listeners for `closing` and `closed` events in `AbstractPowerSyncDatabase`.

.changeset/stale-dots-jog.md

@@ -0,0 +1,5 @@
+---
+'@powersync/web': minor
+---
+
+Improved query behaviour when client is closed. Pending requests will be aborted, future requests will be rejected with an Error. Fixed read and write lock requests not respecting timeout parameter.

.prettierrc

@@ -5,5 +5,6 @@
   "jsxBracketSameLine": true,
   "useTabs": false,
   "printWidth": 120,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-embed", "prettier-plugin-sql"]
 }

demos/react-supabase-todolist/src/app/views/sql-console/page.tsx

@@ -1,34 +1,73 @@
-import React from 'react';
-import { useQuery } from '@powersync/react';
+import { NavigationPage } from '@/components/navigation/NavigationPage';
 import { Box, Button, Grid, TextField, styled } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
-import { NavigationPage } from '@/components/navigation/NavigationPage';
+import { useQuery } from '@powersync/react';
+import { ArrayComparator } from '@powersync/web';
+import React from 'react';
 
 export type LoginFormParams = {
   email: string;
   password: string;
 };
 
-const DEFAULT_QUERY = 'SELECT * FROM lists';
-
-export default function SQLConsolePage() {
-  const inputRef = React.useRef<HTMLInputElement>();
-  const [query, setQuery] = React.useState(DEFAULT_QUERY);
-  const { data: querySQLResult } = useQuery(query);
+const DEFAULT_QUERY = /* sql */ `
+  SELECT
+    *
+  FROM
+    lists
+`;
 
+const TableDisplay = React.memo(({ data }: { data: any[] }) => {
   const queryDataGridResult = React.useMemo(() => {
-    const firstItem = querySQLResult?.[0];
-
+    const firstItem = data?.[0];
     return {
       columns: firstItem
         ? Object.keys(firstItem).map((field) => ({
             field,
             flex: 1
           }))
         : [],
-      rows: querySQLResult
+      rows: data
     };
-  }, [querySQLResult]);
+  }, [data]);
+
+  return (
+    <S.QueryResultContainer>
+      <DataGrid
+        autoHeight={true}
+        rows={queryDataGridResult.rows.map((r, index) => ({ ...r, id: r.id ?? index })) ?? []}
+        columns={queryDataGridResult.columns}
+        initialState={{
+          pagination: {
+            paginationModel: {
+              pageSize: 20
+            }
+          }
+        }}
+        pageSizeOptions={[20]}
+        disableRowSelectionOnClick
+      />
+    </S.QueryResultContainer>
+  );
+});
+
+export default function SQLConsolePage() {
+  const inputRef = React.useRef<HTMLInputElement>();
+  const [query, setQuery] = React.useState(DEFAULT_QUERY);
+
+  const { data } = useQuery(query, [], {
+    /**
+     * We don't use the isFetching status here, we can avoid re-renders if we don't report on it.
+     */
+    reportFetching: false,
+    /**
+     * The query here will only emit results when the query data set changes.
+     * Result sets are compared by serializing each item to JSON and comparing the strings.
+     */
+    comparator: new ArrayComparator({
+      compareBy: (item) => JSON.stringify(item)
+    })
+  });
 
   return (
     <NavigationPage title="SQL Console">
@@ -57,33 +96,12 @@ export default function SQLConsolePage() {
                 if (queryInput) {
                   setQuery(queryInput);
                 }
-              }}
-            >
+              }}>
               Execute Query
             </Button>
           </S.CenteredGrid>
         </S.CenteredGrid>
-
-        {queryDataGridResult ? (
-          <S.QueryResultContainer>
-            {queryDataGridResult.columns ? (
-              <DataGrid
-                autoHeight={true}
-                rows={queryDataGridResult.rows?.map((r, index) => ({ ...r, id: r.id ?? index })) ?? []}
-                columns={queryDataGridResult.columns}
-                initialState={{
-                  pagination: {
-                    paginationModel: {
-                      pageSize: 20
-                    }
-                  }
-                }}
-                pageSizeOptions={[20]}
-                disableRowSelectionOnClick
-              />
-            ) : null}
-          </S.QueryResultContainer>
-        ) : null}
+        <TableDisplay data={data} />
       </S.MainContainer>
     </NavigationPage>
   );

demos/react-supabase-todolist/src/app/views/todo-lists/edit/page.tsx

@@ -1,4 +1,7 @@
-import { usePowerSync, useQuery } from '@powersync/react';
+import { NavigationPage } from '@/components/navigation/NavigationPage';
+import { useSupabase } from '@/components/providers/SystemProvider';
+import { TodoItemWidget } from '@/components/widgets/TodoItemWidget';
+import { LISTS_TABLE, TODOS_TABLE, TodoRecord } from '@/library/powersync/AppSchema';
 import AddIcon from '@mui/icons-material/Add';
 import {
   Box,
@@ -15,12 +18,9 @@ import {
   styled
 } from '@mui/material';
 import Fab from '@mui/material/Fab';
+import { usePowerSync, useQuery } from '@powersync/react';
 import React, { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
-import { useSupabase } from '@/components/providers/SystemProvider';
-import { LISTS_TABLE, TODOS_TABLE, TodoRecord } from '@/library/powersync/AppSchema';
-import { NavigationPage } from '@/components/navigation/NavigationPage';
-import { TodoItemWidget } from '@/components/widgets/TodoItemWidget';
 
 /**
  * useSearchParams causes the entire element to fall back to client side rendering
@@ -34,61 +34,53 @@ const TodoEditSection = () => {
 
   const {
     data: [listRecord]
-  } = useQuery<{ name: string }>(`SELECT name FROM ${LISTS_TABLE} WHERE id = ?`, [listID]);
+  } = useQuery<{ name: string }>(
+    /* sql */ `
+      SELECT
+        name
+      FROM
+        ${LISTS_TABLE}
+      WHERE
+        id = ?
+    `,
+    [listID]
+  );
 
   const { data: todos } = useQuery<TodoRecord>(
-    `SELECT * FROM ${TODOS_TABLE} WHERE list_id=? ORDER BY created_at DESC, id`,
+    /* sql */ `
+      SELECT
+        *
+      FROM
+        ${TODOS_TABLE}
+      WHERE
+        list_id = ?
+      ORDER BY
+        created_at DESC,
+        id
+    `,
     [listID]
   );
 
   const [showPrompt, setShowPrompt] = React.useState(false);
   const nameInputRef = React.createRef<HTMLInputElement>();
 
-  const toggleCompletion = async (record: TodoRecord, completed: boolean) => {
-    const updatedRecord = { ...record, completed: completed };
-    if (completed) {
-      const userID = supabase?.currentSession?.user.id;
-      if (!userID) {
-        throw new Error(`Could not get user ID.`);
-      }
-      updatedRecord.completed_at = new Date().toISOString();
-      updatedRecord.completed_by = userID;
-    } else {
-      updatedRecord.completed_at = null;
-      updatedRecord.completed_by = null;
-    }
-    await powerSync.execute(
-      `UPDATE ${TODOS_TABLE}
-              SET completed = ?,
-                  completed_at = ?,
-                  completed_by = ?
-              WHERE id = ?`,
-      [completed, updatedRecord.completed_at, updatedRecord.completed_by, record.id]
-    );
-  };
-
   const createNewTodo = async (description: string) => {
     const userID = supabase?.currentSession?.user.id;
     if (!userID) {
       throw new Error(`Could not get user ID.`);
     }
 
     await powerSync.execute(
-      `INSERT INTO
-                ${TODOS_TABLE}
-                    (id, created_at, created_by, description, list_id)
-                VALUES
-                    (uuid(), datetime(), ?, ?, ?)`,
+      /* sql */ `
+        INSERT INTO
+          ${TODOS_TABLE} (id, created_at, created_by, description, list_id)
+        VALUES
+          (uuid (), datetime (), ?, ?, ?)
+      `,
       [userID, description, listID!]
     );
   };
 
-  const deleteTodo = async (id: string) => {
-    await powerSync.writeTransaction(async (tx) => {
-      await tx.execute(`DELETE FROM ${TODOS_TABLE} WHERE id = ?`, [id]);
-    });
-  };
-
   if (!listRecord) {
     return (
       <Box>
@@ -106,13 +98,7 @@ const TodoEditSection = () => {
         <Box>
           <List dense={false}>
             {todos.map((r) => (
-              <TodoItemWidget
-                key={r.id}
-                description={r.description}
-                onDelete={() => deleteTodo(r.id)}
-                isComplete={r.completed == 1}
-                toggleCompletion={() => toggleCompletion(r, !r.completed)}
-              />
+              <TodoItemWidget key={r.id} id={r.id} description={r.description} isComplete={r.completed == 1} />
             ))}
           </List>
         </Box>
@@ -129,8 +115,7 @@ const TodoEditSection = () => {
               await createNewTodo(nameInputRef.current!.value);
               setShowPrompt(false);
             }
-          }}
-        >
+          }}>
           <DialogTitle id="alert-dialog-title">{'Create Todo Item'}</DialogTitle>
           <DialogContent>
             <DialogContentText id="alert-dialog-description">Enter a description for a new todo item</DialogContentText>

demos/react-supabase-todolist/src/app/views/todo-lists/page.tsx

@@ -1,4 +1,9 @@
-import { usePowerSync, useStatus } from '@powersync/react';
+import { NavigationPage } from '@/components/navigation/NavigationPage';
+import { useSupabase } from '@/components/providers/SystemProvider';
+import { GuardBySync } from '@/components/widgets/GuardBySync';
+import { SearchBarWidget } from '@/components/widgets/SearchBarWidget';
+import { TodoListsWidget } from '@/components/widgets/TodoListsWidget';
+import { LISTS_TABLE } from '@/library/powersync/AppSchema';
 import AddIcon from '@mui/icons-material/Add';
 import {
   Box,
@@ -12,18 +17,12 @@ import {
   styled
 } from '@mui/material';
 import Fab from '@mui/material/Fab';
+import { usePowerSync } from '@powersync/react';
 import React from 'react';
-import { useSupabase } from '@/components/providers/SystemProvider';
-import { LISTS_TABLE } from '@/library/powersync/AppSchema';
-import { NavigationPage } from '@/components/navigation/NavigationPage';
-import { SearchBarWidget } from '@/components/widgets/SearchBarWidget';
-import { TodoListsWidget } from '@/components/widgets/TodoListsWidget';
-import { GuardBySync } from '@/components/widgets/GuardBySync';
 
 export default function TodoListsPage() {
   const powerSync = usePowerSync();
   const supabase = useSupabase();
-  const status = useStatus();
 
   const [showPrompt, setShowPrompt] = React.useState(false);
   const nameInputRef = React.createRef<HTMLInputElement>();
@@ -36,7 +35,12 @@ export default function TodoListsPage() {
     }
 
     const res = await powerSync.execute(
-      `INSERT INTO ${LISTS_TABLE} (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?) RETURNING *`,
+      /* sql */ `
+        INSERT INTO
+          ${LISTS_TABLE} (id, created_at, name, owner_id)
+        VALUES
+          (uuid (), datetime (), ?, ?) RETURNING *
+      `,
       [name, userID]
     );
 
@@ -71,8 +75,7 @@ export default function TodoListsPage() {
             }
           }}
           aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
+          aria-describedby="alert-dialog-description">
           <DialogTitle id="alert-dialog-title">{'Create Todo List'}</DialogTitle>
           <DialogContent>
             <DialogContentText id="alert-dialog-description">Enter a name for a new todo list</DialogContentText>