Use example

Author: simolus3

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

@@ -19,8 +19,7 @@ import {
 } from '@mui/material';
 import Fab from '@mui/material/Fab';
 import { usePowerSync, useQuery } from '@powersync/react';
-import { SyncStreamSubscription } from '@powersync/web';
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 
 /**
@@ -33,29 +32,6 @@ const TodoEditSection = () => {
   const supabase = useSupabase();
   const { id: listID } = useParams();
 
-  if (import.meta.env.VITE_USE_SYNC_STREAMS == 'true') {
-    useEffect(() => {
-      let active = true;
-      let subscription: SyncStreamSubscription | null = null;
-
-      powerSync
-        .syncStream('todos', { list: listID })
-        .subscribe()
-        .then((sub) => {
-          if (!active) {
-            sub.unsubscribe();
-          } else {
-            subscription = sub;
-          }
-        });
-
-      return () => {
-        active = false;
-        subscription?.unsubscribe();
-      };
-    }, [listID]);
-  }
-
   const {
     data: [listRecord]
   } = useQuery<{ name: string }>(
@@ -70,7 +46,7 @@ const TodoEditSection = () => {
     [listID]
   );
 
-  const { data: todos } = useQuery<TodoRecord>(
+  const secondQuery = useQuery<TodoRecord>(
     /* sql */ `
       SELECT
         *
@@ -82,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 };