fix(Vue): nullish params in useLiveQueryImpl (#466)

* fix(Vue): nullish params * fix(Vue): simplify live `params` manipulations * Changeset * Formatting * Add test --------- Co-authored-by: Sam Willis <[email protected]>
electric-sql · Jan 13, 2025 · 7ce9f04 · 7ce9f04
1 parent e037883
commit 7ce9f04
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/.changeset/weak-pigs-begin.md b/.changeset/weak-pigs-begin.md
@@ -0,0 +1,5 @@
+---
+'@electric-sql/pglite-vue': patch
+---
+
+Fix Vue useLiveQuery to allow no parameters to be provided
diff --git a/packages/pglite-vue/src/hooks.ts b/packages/pglite-vue/src/hooks.ts
@@ -44,10 +44,10 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
 
   const querySource = typeof query === 'string' ? ref(query) : query
   const paramsSources = !params
-    ? [ref(params)]
+    ? []
     : Array.isArray(params)
       ? params.map(ref)
-      : [params]
+      : [ref(params)]
 
   const keySource = typeof key === 'string' ? ref(key) : key
 
@@ -68,13 +68,11 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
 
       const query = isRef(querySource) ? unref(querySource) : querySource()
 
-      const paramVals = isRef(params)
-        ? unref(params)
+      const paramVals = Array.isArray(params)
+        ? params.map((p) => (typeof p === 'function' ? p() : unref(p)))
         : typeof params === 'function'
           ? params()
-          : Array.isArray(params)
-            ? params.map(unref)
-            : [params]
+          : unref(params)
 
       const key = isRef(keySource) ? keySource.value : keySource?.()
 

diff --git a/packages/pglite-vue/test/hooks.test.ts b/packages/pglite-vue/test/hooks.test.ts
@@ -43,6 +43,35 @@ describe('hooks', () => {
       `)
     })
 
+    it('updates when query without parameters is provided', async () => {
+      const { useLiveQuery } = await import('../src')
+      await db.exec(`INSERT INTO test (name) VALUES ('test1');`)
+
+      const result = useLiveQuery('SELECT * FROM test;')
+
+      await flushPromises()
+      expect(result?.rows?.value).toEqual([
+        {
+          id: 1,
+          name: 'test1',
+        },
+      ])
+
+      await db.exec(`INSERT INTO test (name) VALUES ('test2');`)
+
+      await flushPromises()
+      expect(result?.rows?.value).toEqual([
+        {
+          id: 1,
+          name: 'test1',
+        },
+        {
+          id: 2,
+          name: 'test2',
+        },
+      ])
+    })
+
     it('updates when query parameter ref changes', async () => {
       const { useLiveQuery } = await import('../src')
       await db.exec(`INSERT INTO test (name) VALUES ('test1'),('test2');`)

diff --git a/packages/pglite-vue/vitest.config.ts b/packages/pglite-vue/vitest.config.ts
@@ -5,7 +5,7 @@ export default defineConfig({
   // @ts-ignore type mismsatch but works?
   plugins: [vue()],
   test: {
-    name: 'pglite-react',
+    name: 'pglite-vue',
     dir: './test',
     watch: false,
     environment: 'jsdom',