Fix React Parameters Update (#678)

Author: stevensJourney

.changeset/dull-days-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@powersync/react': patch
+---
+
+Fix regression in useQuery where updating the supplied query parameters would not update the underlaying query.

packages/react/package.json

@@ -44,6 +44,7 @@
     "jsdom": "^24.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-error-boundary": "^4.1.0"
+    "react-error-boundary": "^4.1.0",
+    "@powersync/drizzle-driver": "workspace:*"
   }
 }

packages/react/src/hooks/watched/watch-utils.ts

@@ -68,7 +68,7 @@ export const constructCompatibleQuery = <RowType>(
         execute: () => query.execute()
       };
     }
-  }, [query, powerSync]);
+  }, [query, powerSync, ...parameters]);
 
   const queryChanged = checkQueryChanged(parsedQuery, options);
 

packages/react/tests/useQuery.test.tsx

@@ -1,8 +1,11 @@
 import * as commonSdk from '@powersync/common';
+import { toCompilableQuery, wrapPowerSyncWithDrizzle } from '@powersync/drizzle-driver';
 import { PowerSyncDatabase } from '@powersync/web';
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react';
+import { eq } from 'drizzle-orm';
+import { sqliteTable, text } from 'drizzle-orm/sqlite-core';
 import pDefer from 'p-defer';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { beforeEach, describe, expect, it, onTestFinished, vi } from 'vitest';
 import { PowerSyncContext } from '../src/hooks/PowerSyncContext';
 import { useQuery } from '../src/hooks/watched/useQuery';
@@ -168,6 +171,178 @@ describe('useQuery', () => {
     );
   });
 
+  it('should react to updated queries (Explicit Drizzle DB)', async () => {
+    const db = openPowerSync();
+
+    const lists = sqliteTable('lists', {
+      id: text('id'),
+      name: text('name')
+    });
+
+    const drizzleDb = wrapPowerSyncWithDrizzle(db, {
+      schema: {
+        lists
+      }
+    });
+
+    const wrapper = ({ children }) => <PowerSyncContext.Provider value={db}>{children}</PowerSyncContext.Provider>;
+
+    let updateParameters = (params: string): void => {};
+    const newParametersPromise = new Promise<string>((resolve) => {
+      updateParameters = resolve;
+    });
+
+    await db.execute(/* sql */ `
+      INSERT INTO
+        lists (id, name)
+      VALUES
+        (uuid (), 'first'),
+        (uuid (), 'second')
+    `);
+
+    const query = () => {
+      const [name, setName] = React.useState<string>('first');
+      const drizzleQuery = drizzleDb.select().from(lists).where(eq(lists.name, name));
+
+      useEffect(() => {
+        // allow updating the parameters externally
+        newParametersPromise.then((params) => setName(params));
+      }, []);
+
+      return useQuery(toCompilableQuery(drizzleQuery));
+    };
+
+    const { result } = renderHook(query, { wrapper });
+
+    // We should only receive the first list due to the WHERE clause
+    await vi.waitFor(
+      () => {
+        expect(result.current.data[0]?.name).toEqual('first');
+      },
+      { timeout: 500, interval: 100 }
+    );
+
+    // Now update the parameter
+    updateParameters('second');
+
+    // We should now only receive the second list due to the WHERE clause and updated parameter
+    await vi.waitFor(
+      () => {
+        expect(result.current.data[0]?.name).toEqual('second');
+      },
+      { timeout: 500, interval: 100 }
+    );
+  });
+
+  it('should react to updated queries', async () => {
+    const db = openPowerSync();
+
+    const wrapper = ({ children }) => <PowerSyncContext.Provider value={db}>{children}</PowerSyncContext.Provider>;
+
+    let updateParameters = (params: string[]): void => {};
+    const newParametersPromise = new Promise<string[]>((resolve) => {
+      updateParameters = resolve;
+    });
+
+    await db.execute(/* sql */ `
+      INSERT INTO
+        lists (id, name)
+      VALUES
+        (uuid (), 'first'),
+        (uuid (), 'second')
+    `);
+
+    const query = () => {
+      const [parameters, setParameters] = React.useState<string[]>(['first']);
+
+      useEffect(() => {
+        // allow updating the parameters externally
+        newParametersPromise.then((params) => setParameters(params));
+      }, []);
+
+      const query = React.useMemo(() => {
+        return {
+          execute: () => db.getAll<{ name: string }>('SELECT * FROM lists WHERE name = ?', parameters),
+          compile: () => ({ sql: 'SELECT * FROM lists WHERE name = ?', parameters })
+        };
+      }, [parameters]);
+
+      return useQuery(query);
+    };
+
+    const { result } = renderHook(query, { wrapper });
+
+    // We should only receive the first list due to the WHERE clause
+    await vi.waitFor(
+      () => {
+        expect(result.current.data[0]?.name).toEqual('first');
+      },
+      { timeout: 500, interval: 100 }
+    );
+
+    // Now update the parameter
+    updateParameters(['second']);
+
+    // We should now only receive the second list due to the WHERE clause and updated parameter
+    await vi.waitFor(
+      () => {
+        expect(result.current.data[0]?.name).toEqual('second');
+      },
+      { timeout: 500, interval: 100 }
+    );
+  });
+
+  it('should react to updated queries (simple update)', async () => {
+    const db = openPowerSync();
+
+    const wrapper = ({ children }) => <PowerSyncContext.Provider value={db}>{children}</PowerSyncContext.Provider>;
+
+    let updateParameters = (params: string[]): void => {};
+    const newParametersPromise = new Promise<string[]>((resolve) => {
+      updateParameters = resolve;
+    });
+
+    await db.execute(/* sql */ `
+      INSERT INTO
+        lists (id, name)
+      VALUES
+        (uuid (), 'first'),
+        (uuid (), 'second')
+    `);
+
+    const query = () => {
+      const [parameters, setParameters] = React.useState<string[]>(['first']);
+
+      useEffect(() => {
+        // allow updating the parameters externally
+        newParametersPromise.then((params) => setParameters(params));
+      }, []);
+
+      return useQuery('SELECT * FROM lists WHERE name = ?', parameters);
+    };
+
+    const { result } = renderHook(query, { wrapper });
+
+    // We should only receive the first list due to the WHERE clause
+    await vi.waitFor(
+      () => {
+        expect(result.current.data[0]?.name).toEqual('first');
+      },
+      { timeout: 500, interval: 100 }
+    );
+
+    // Now update the parameter
+    updateParameters(['second']);
+
+    // We should now only receive the second list due to the WHERE clause and updated parameter
+    await vi.waitFor(
+      () => {
+        expect(result.current.data[0]?.name).toEqual('second');
+      },
+      { timeout: 500, interval: 100 }
+    );
+  });
+
   it('should show an error if parsing the query results in an error', async () => {
     const db = openPowerSync();