From 7ce9f045789cb4da2d1bbf91aa03c85239c9a4fb Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Mon, 13 Jan 2025 18:50:28 +0100
Subject: [PATCH] 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 <sam.willis@gmail.com>
---
 .changeset/weak-pigs-begin.md          |  5 +++++
 packages/pglite-vue/src/hooks.ts       | 12 +++++------
 packages/pglite-vue/test/hooks.test.ts | 29 ++++++++++++++++++++++++++
 packages/pglite-vue/vitest.config.ts   |  2 +-
 4 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/weak-pigs-begin.md

diff --git a/.changeset/weak-pigs-begin.md b/.changeset/weak-pigs-begin.md
new file mode 100644
index 000000000..c29988598
--- /dev/null
+++ 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
index 5db43b438..fa4fb71da 100644
--- 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
index d1debcfec..6abf3c79d 100644
--- 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
index e41124086..39360a47a 100644
--- 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',