Use example

Author: simolus3

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

@@ -46,7 +46,7 @@ const TodoEditSection = () => {
     [listID]
   );
 
-  const { data: todos } = useQuery<TodoRecord>(
+  const secondQuery = useQuery<TodoRecord>(
     /* sql */ `
       SELECT
         *
@@ -58,8 +58,12 @@ const TodoEditSection = () => {
         created_at DESC,
         id
     `,
-    [listID]
+    [listID],
+    {
+      streams: import.meta.env.VITE_USE_SYNC_STREAMS == 'true' ? [{ name: 'todos', parameters: { list: listID } }] : []
+    }
   );
+  const { data: todos } = secondQuery;
 
   const [showPrompt, setShowPrompt] = React.useState(false);
   const nameInputRef = React.createRef<HTMLInputElement>();

packages/react/src/hooks/watched/useQuery.ts

@@ -60,9 +60,8 @@ export function useQuery<RowType = any>(
   const powerSync = usePowerSync();
   if (!powerSync) {
     return {
+      ..._loadingState,
       isLoading: false,
-      isFetching: false,
-      data: [],
       error: new Error('PowerSync not configured.')
     };
   }
@@ -90,8 +89,10 @@ export function useQuery<RowType = any>(
   });
 
   if (!streamsHaveSynced) {
-    return { isLoading: true, isFetching: false, data: [], error: undefined };
+    return { ..._loadingState };
   }
 
-  return runOnce ? single : watched;
+  return (runOnce ? single : watched) ?? _loadingState;
 }
+
+const _loadingState = { isLoading: true, isFetching: false, data: [], error: undefined };