From de6f1c3390ba567e3d30edfb69c70e3296a43689 Mon Sep 17 00:00:00 2001
From: Christiaan Landman <chriz.ek@gmail.com>
Date: Mon, 28 Oct 2024 16:40:24 +0200
Subject: [PATCH 1/2] Fixed issue with queries not reacting to local data
 changes or causing an infinite loop on certain sql parameters.

---
 .changeset/gorgeous-pens-give.md                    |  5 +++++
 packages/tanstack-react-query/src/hooks/useQuery.ts | 11 +++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/gorgeous-pens-give.md

diff --git a/.changeset/gorgeous-pens-give.md b/.changeset/gorgeous-pens-give.md
new file mode 100644
index 000000000..2f92b7b98
--- /dev/null
+++ b/.changeset/gorgeous-pens-give.md
@@ -0,0 +1,5 @@
+---
+'@powersync/tanstack-react-query': patch
+---
+
+Fixed issue with queries not reacting to local data changes or causing an infinite loop on certain sql parameters.
diff --git a/packages/tanstack-react-query/src/hooks/useQuery.ts b/packages/tanstack-react-query/src/hooks/useQuery.ts
index fc2c3dc96..bb51eeef4 100644
--- a/packages/tanstack-react-query/src/hooks/useQuery.ts
+++ b/packages/tanstack-react-query/src/hooks/useQuery.ts
@@ -89,6 +89,9 @@ function useQueryCore<
     }
   }
 
+  const memoizedParams = React.useMemo(() => queryParameters, [JSON.stringify(queryParameters)]);
+  const memoizedKey = React.useMemo(() => options.queryKey, [JSON.stringify(options.queryKey)]);
+
   const fetchTables = async () => {
     try {
       const tables = await powerSync.resolveTables(sqlStatement, queryParameters);
@@ -104,7 +107,7 @@ function useQueryCore<
     (async () => {
       await fetchTables();
     })();
-  }, [powerSync, sqlStatement, queryParameters]);
+  }, [powerSync, sqlStatement, memoizedParams]);
 
   const queryFn = React.useCallback(async () => {
     if (error) {
@@ -116,7 +119,7 @@ function useQueryCore<
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [powerSync, query, parameters, options.queryKey, error]);
+  }, [powerSync, query, parameters, memoizedKey, error]);
 
   React.useEffect(() => {
     if (error || !query) return () => {};
@@ -126,7 +129,7 @@ function useQueryCore<
       {
         onChange: () => {
           queryClient.invalidateQueries({
-            queryKey: options.queryKey
+            queryKey: memoizedKey
           });
         },
         onError: (e) => {
@@ -139,7 +142,7 @@ function useQueryCore<
       }
     );
     return () => abort.abort();
-  }, [powerSync, options.queryKey, queryClient, tables, error]);
+  }, [powerSync, memoizedKey, queryClient, tables, error]);
 
   return useQueryFn(
     {

From ecd50c3c6ddf6b8d872eaa8423b749e85795a7e5 Mon Sep 17 00:00:00 2001
From: Christiaan Landman <chriz.ek@gmail.com>
Date: Mon, 28 Oct 2024 17:41:02 +0200
Subject: [PATCH 2/2] Removed redundant useMemo calls.

---
 packages/tanstack-react-query/src/hooks/useQuery.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/tanstack-react-query/src/hooks/useQuery.ts b/packages/tanstack-react-query/src/hooks/useQuery.ts
index bb51eeef4..e47d7388c 100644
--- a/packages/tanstack-react-query/src/hooks/useQuery.ts
+++ b/packages/tanstack-react-query/src/hooks/useQuery.ts
@@ -89,8 +89,8 @@ function useQueryCore<
     }
   }
 
-  const memoizedParams = React.useMemo(() => queryParameters, [JSON.stringify(queryParameters)]);
-  const memoizedKey = React.useMemo(() => options.queryKey, [JSON.stringify(options.queryKey)]);
+  const stringifiedParams = JSON.stringify(queryParameters);
+  const stringifiedKey = JSON.stringify(options.queryKey);
 
   const fetchTables = async () => {
     try {
@@ -107,7 +107,7 @@ function useQueryCore<
     (async () => {
       await fetchTables();
     })();
-  }, [powerSync, sqlStatement, memoizedParams]);
+  }, [powerSync, sqlStatement, stringifiedParams]);
 
   const queryFn = React.useCallback(async () => {
     if (error) {
@@ -119,7 +119,7 @@ function useQueryCore<
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [powerSync, query, parameters, memoizedKey, error]);
+  }, [powerSync, query, parameters, stringifiedKey, error]);
 
   React.useEffect(() => {
     if (error || !query) return () => {};
@@ -129,7 +129,7 @@ function useQueryCore<
       {
         onChange: () => {
           queryClient.invalidateQueries({
-            queryKey: memoizedKey
+            queryKey: options.queryKey
           });
         },
         onError: (e) => {
@@ -142,7 +142,7 @@ function useQueryCore<
       }
     );
     return () => abort.abort();
-  }, [powerSync, memoizedKey, queryClient, tables, error]);
+  }, [powerSync, queryClient, stringifiedKey, tables, error]);
 
   return useQueryFn(
     {