Fix useQuery race condition for initial query. (#525)

Author: Chriztiaan

.changeset/slimy-glasses-jog.md

@@ -0,0 +1,6 @@
+---
+'@powersync/react': patch
+'@powersync/react-native': patch
+---
+
+Fixed an issue with `useQuery` where initial query/parameter changes could cause a race condition if the first query took long.

packages/react/src/hooks/useQuery.ts

@@ -20,7 +20,7 @@ export type QueryResult<T> = {
   /**
    * Function used to run the query again.
    */
-  refresh?: () => Promise<void>;
+  refresh?: (signal?: AbortSignal) => Promise<void>;
 };
 
 /**
@@ -95,21 +95,31 @@ export const useQuery = <T = any>(
     setError(wrappedError);
   };
 
-  const fetchData = async () => {
+  const fetchData = async (signal?: AbortSignal) => {
     setIsFetching(true);
     try {
       const result =
         typeof query == 'string' ? await powerSync.getAll<T>(sqlStatement, queryParameters) : await query.execute();
+
+      if (signal?.aborted) {
+        return;
+      }
+
       handleResult(result);
     } catch (e) {
       console.error('Failed to fetch data:', e);
       handleError(e);
     }
   };
 
-  const fetchTables = async () => {
+  const fetchTables = async (signal?: AbortSignal) => {
     try {
       const tables = await powerSync.resolveTables(sqlStatement, memoizedParams, memoizedOptions);
+
+      if (signal?.aborted) {
+        return;
+      }
+
       setTables(tables);
     } catch (e) {
       console.error('Failed to fetch tables:', e);
@@ -118,9 +128,10 @@ export const useQuery = <T = any>(
   };
 
   React.useEffect(() => {
+    const abortController = new AbortController();
     const updateData = async () => {
-      await fetchTables();
-      await fetchData();
+      await fetchTables(abortController.signal);
+      await fetchData(abortController.signal);
     };
 
     updateData();
@@ -129,7 +140,10 @@ export const useQuery = <T = any>(
       schemaChanged: updateData
     });
 
-    return () => l?.();
+    return () => {
+      abortController.abort();
+      l?.();
+    };
   }, [powerSync, memoizedParams, sqlStatement]);
 
   React.useEffect(() => {
@@ -141,7 +155,7 @@ export const useQuery = <T = any>(
       powerSync.onChangeWithCallback(
         {
           onChange: async () => {
-            await fetchData();
+            await fetchData(abortController.current.signal);
           },
           onError(e) {
             handleError(e);