feat: add offset and limit to live query.

Author: MAST1999

packages/pglite-solid/src/hooks.ts

@@ -25,13 +25,18 @@ function paramsEqual(
 }
 
 type Params = unknown[] | undefined | null
+type LimitAndOffset =
+  | { offset?: never; limit?: never }
+  | { offset: number; limit: number }
 
 function useLiveQueryImpl<T = { [key: string]: unknown }>(
-  opts: Accessor<{
-    query: string | LiveQuery<T> | Promise<LiveQuery<T>>
-    params?: Params
-    key?: string
-  }>,
+  opts: Accessor<
+    {
+      query: string | LiveQuery<T> | Promise<LiveQuery<T>>
+      params?: Params
+      key?: string
+    } & LimitAndOffset
+  >,
 ): Accessor<Omit<LiveQueryResults<T>, 'affectedRows'> | undefined> {
   const db = usePGlite()
   const liveQuery = createMemo(
@@ -67,12 +72,12 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
   )
 
   const params = createMemo(
-    (prev) => {
-      if (!paramsEqual(opts().params, prev as Params)) {
+    (prev: Params) => {
+      if (!paramsEqual(opts().params, prev)) {
         return opts().params
       }
 
-      return prev as Params
+      return prev
     },
     opts().params,
     { name: 'PGLiteLiveQueryParamsMemo' },
@@ -86,8 +91,19 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
         const key = opts.key
         const ret =
           key != undefined
-            ? db.live.incrementalQuery<T>(query, params(), key, setResults)
-            : db.live.query<T>(query, params(), setResults)
+            ? db.live.incrementalQuery<T>({
+                query,
+                callback: setResults,
+                params: params(),
+                key,
+              })
+            : db.live.query({
+                query,
+                callback: setResults,
+                params: params(),
+                limit: opts.limit,
+                offset: opts.offset,
+              })
 
         const res = await ret
         return res
@@ -137,10 +153,12 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
 }
 
 export function useLiveQuery<T = { [key: string]: unknown }>(
-  opts: Accessor<{
-    query: string
-    params: unknown[] | undefined | null
-  }>,
+  opts: Accessor<
+    {
+      query: string
+      params?: unknown[] | undefined | null
+    } & LimitAndOffset
+  >,
 ): Accessor<LiveQueryResults<T> | undefined>
 
 export function useLiveQuery<T = { [key: string]: unknown }>(
@@ -156,10 +174,12 @@ export function useLiveQuery<T = { [key: string]: unknown }>(
 ): Accessor<LiveQueryResults<T> | undefined>
 
 export function useLiveQuery<T = { [key: string]: unknown }>(
-  opts: Accessor<{
-    query: string | LiveQuery<T> | Promise<LiveQuery<T>>
-    params?: unknown[] | undefined | null
-  }>,
+  opts: Accessor<
+    {
+      query: string | LiveQuery<T> | Promise<LiveQuery<T>>
+      params?: unknown[] | undefined | null
+    } & LimitAndOffset
+  >,
 ): Accessor<LiveQueryResults<T> | undefined> {
   return useLiveQueryImpl<T>(opts)
 }

packages/pglite-solid/test/hooks.test.tsx

@@ -12,6 +12,57 @@ describe('hooks', () => {
 
   testLiveQuery('useLiveIncrementalQuery')
 
+  describe('useLiveQuery with limit and offset', () => {
+    let db: PGliteWithLive
+    let wrapper: (props: { children: JSX.Element }) => JSX.Element
+
+    beforeEach(async () => {
+      db = await PGlite.create({
+        extensions: {
+          live,
+        },
+      })
+      wrapper = (props) => {
+        return <PGliteProvider db={db}>{props.children}</PGliteProvider>
+      }
+
+      await db.exec(`
+        CREATE TABLE IF NOT EXISTS test (
+          id SERIAL PRIMARY KEY,
+          name TEXT
+        );
+      `)
+      await db.exec(`TRUNCATE test;`)
+    })
+
+    it.only('query with limit and offset', async () => {
+      db.exec(`INSERT INTO test (name) VALUES ('test1'),('test2');`)
+
+      const [opts, setOpts] = createSignal({ limit: 1, offset: 0 })
+      const { result } = renderHook(
+        (props: { pagination: Accessor<{ limit: number; offset: number }> }) =>
+          useLiveQuery(() => ({
+            query: `SELECT * FROM test`,
+            ...props.pagination(),
+          })),
+        { wrapper, initialProps: [{ pagination: opts }] },
+      )
+
+      waitFor(() => expect(result()?.rows).toEqual([{ id: 1, name: 'test1' }]))
+
+      setOpts({ limit: 1, offset: 1 })
+      waitFor(() => expect(result()?.rows).toEqual([{ id: 2, name: 'test2' }]))
+
+      setOpts({ limit: 2, offset: 0 })
+      waitFor(() =>
+        expect(result()?.rows).toEqual([
+          { id: 1, name: 'test1' },
+          { id: 2, name: 'test2' },
+        ]),
+      )
+    })
+  })
+
   describe('useLiveQuery.sql', () => {
     let db: PGliteWithLive
     let wrapper: (props: { children: JSX.Element }) => JSX.Element