Skip to content

Commit 300fb2e

Browse files
committed
feat: make each input a separate function to improve pagination with limit and offset.
1 parent 2c85ae5 commit 300fb2e

2 files changed

Lines changed: 86 additions & 114 deletions

File tree

packages/pglite-solid/src/hooks.ts

Lines changed: 57 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,19 @@ import {
1010
onCleanup,
1111
} from 'solid-js'
1212

13-
function paramsEqual(
14-
a1: unknown[] | undefined | null,
15-
a2: unknown[] | undefined | null,
16-
) {
17-
if (!a1 && !a2) return true
18-
if (a1?.length !== a2?.length) return false
19-
for (let i = 0; i < a1!.length; i++) {
20-
if (!Object.is(a1![i], a2![i])) {
21-
return false
22-
}
23-
}
24-
return true
25-
}
26-
2713
type Params = unknown[] | undefined | null
28-
type LimitAndOffset =
29-
| { offset?: never; limit?: never }
30-
| { offset: number; limit: number }
31-
32-
function useLiveQueryImpl<T = { [key: string]: unknown }>(
33-
opts: Accessor<
34-
{
35-
query: string | LiveQuery<T> | Promise<LiveQuery<T>>
36-
params?: Params
37-
key?: string
38-
} & LimitAndOffset
39-
>,
40-
): Accessor<Omit<LiveQueryResults<T>, 'affectedRows'> | undefined> {
14+
type Pagination = { limit: number; offset: number }
15+
16+
function useLiveQueryImpl<T = { [key: string]: unknown }>(opts: {
17+
query: Accessor<string | LiveQuery<T> | Promise<LiveQuery<T>>>
18+
params?: Accessor<Params>
19+
key?: Accessor<string>
20+
pagination?: Accessor<Pagination>
21+
}): Accessor<Omit<LiveQueryResults<T>, 'affectedRows'> | undefined> {
4122
const db = usePGlite()
4223
const liveQuery = createMemo(
4324
() => {
44-
const originalQuery = opts().query
25+
const originalQuery = opts.query()
4526
if (
4627
!(typeof originalQuery === 'string') &&
4728
!(originalQuery instanceof Promise)
@@ -71,20 +52,9 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
7152
{ name: 'PGLiteLiveQueryInitialSyncComputed' },
7253
)
7354

74-
const params = createMemo(
75-
(prev: Params) => {
76-
if (!paramsEqual(opts().params, prev)) {
77-
return opts().params
78-
}
79-
80-
return prev
81-
},
82-
opts().params,
83-
{ name: 'PGLiteLiveQueryParamsMemo' },
84-
)
85-
55+
const initialPagination = opts.pagination?.()
8656
const [queryRan] = createResource(
87-
opts,
57+
() => ({ query: opts.query(), key: opts.key?.(), params: opts.params?.() }),
8858
async (opts) => {
8959
const query = opts.query
9060
if (typeof query === 'string') {
@@ -94,15 +64,14 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
9464
? db.live.incrementalQuery<T>({
9565
query,
9666
callback: setResults,
97-
params: params(),
67+
params: opts.params,
9868
key,
9969
})
10070
: db.live.query({
10171
query,
10272
callback: setResults,
103-
params: params(),
104-
limit: opts.limit,
105-
offset: opts.offset,
73+
params: opts.params,
74+
...initialPagination,
10675
})
10776

10877
const res = await ret
@@ -125,6 +94,21 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
12594
{ name: 'PGLiteLiveQueryResource' },
12695
)
12796

97+
createComputed((oldPagination: Pagination | undefined) => {
98+
const pagination = opts.pagination?.()
99+
100+
if (
101+
pagination &&
102+
(pagination.limit !== oldPagination?.limit ||
103+
pagination.offset !== oldPagination?.offset)
104+
) {
105+
queryRan()?.refresh(pagination)
106+
return pagination
107+
}
108+
109+
return undefined
110+
}, opts.pagination?.())
111+
128112
onCleanup(() => {
129113
queryRan()?.unsubscribe()
130114
})
@@ -152,35 +136,25 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
152136
return aggregatedResult
153137
}
154138

155-
export function useLiveQuery<T = { [key: string]: unknown }>(
156-
opts: Accessor<
157-
{
158-
query: string
159-
params?: unknown[] | undefined | null
160-
} & LimitAndOffset
161-
>,
162-
): Accessor<LiveQueryResults<T> | undefined>
163-
164-
export function useLiveQuery<T = { [key: string]: unknown }>(
165-
opts: Accessor<{
166-
query: LiveQuery<T>
167-
}>,
168-
): Accessor<LiveQueryResults<T>>
169-
170-
export function useLiveQuery<T = { [key: string]: unknown }>(
171-
opts: Accessor<{
172-
query: Promise<LiveQuery<T>>
173-
}>,
174-
): Accessor<LiveQueryResults<T> | undefined>
175-
176-
export function useLiveQuery<T = { [key: string]: unknown }>(
177-
opts: Accessor<
178-
{
179-
query: string | LiveQuery<T> | Promise<LiveQuery<T>>
180-
params?: unknown[] | undefined | null
181-
} & LimitAndOffset
182-
>,
183-
): Accessor<LiveQueryResults<T> | undefined> {
139+
export function useLiveQuery<T = { [key: string]: unknown }>(opts: {
140+
query: Accessor<string>
141+
params?: Accessor<unknown[] | undefined | null>
142+
pagination?: Accessor<Pagination>
143+
}): Accessor<LiveQueryResults<T> | undefined>
144+
145+
export function useLiveQuery<T = { [key: string]: unknown }>(opts: {
146+
query: Accessor<LiveQuery<T>>
147+
}): Accessor<LiveQueryResults<T>>
148+
149+
export function useLiveQuery<T = { [key: string]: unknown }>(opts: {
150+
query: Accessor<Promise<LiveQuery<T>>>
151+
}): Accessor<LiveQueryResults<T> | undefined>
152+
153+
export function useLiveQuery<T = { [key: string]: unknown }>(opts: {
154+
query: Accessor<string | LiveQuery<T> | Promise<LiveQuery<T>>>
155+
params?: Accessor<unknown[] | undefined | null>
156+
pagination?: Accessor<Pagination>
157+
}): Accessor<LiveQueryResults<T> | undefined> {
184158
return useLiveQueryImpl<T>(opts)
185159
}
186160

@@ -189,18 +163,16 @@ useLiveQuery.sql = function <T = { [key: string]: unknown }>(
189163
...values: any[]
190164
): Accessor<LiveQueryResults<T> | undefined> {
191165
const { query, params } = buildQuery(strings, ...values)
192-
return useLiveQueryImpl<T>(() => ({
193-
params: params.map((p) => (typeof p === 'function' ? p() : p)),
194-
query,
195-
}))
166+
return useLiveQueryImpl<T>({
167+
params: () => params.map((p) => (typeof p === 'function' ? p() : p)),
168+
query: () => query,
169+
})
196170
}
197171

198-
export function useLiveIncrementalQuery<T = { [key: string]: unknown }>(
199-
opts: Accessor<{
200-
query: string | LiveQuery<T> | Promise<LiveQuery<T>>
201-
params: unknown[] | undefined | null
202-
key?: string
203-
}>,
204-
): Accessor<LiveQueryResults<T> | undefined> {
172+
export function useLiveIncrementalQuery<T = { [key: string]: unknown }>(opts: {
173+
query: Accessor<string | LiveQuery<T> | Promise<LiveQuery<T>>>
174+
params: Accessor<unknown[] | undefined | null>
175+
key?: Accessor<string>
176+
}): Accessor<LiveQueryResults<T> | undefined> {
205177
return useLiveQueryImpl<T>(opts)
206178
}

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

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ describe('hooks', () => {
4141
const [opts, setOpts] = createSignal({ limit: 1, offset: 0 })
4242
const { result } = renderHook(
4343
(props: { pagination: Accessor<{ limit: number; offset: number }> }) =>
44-
useLiveQuery(() => ({
45-
query: `SELECT * FROM test`,
46-
...props.pagination(),
47-
})),
44+
useLiveQuery({
45+
query: () => `SELECT * FROM test`,
46+
pagination: props.pagination,
47+
}),
4848
{ wrapper, initialProps: [{ pagination: opts }] },
4949
)
5050

@@ -150,11 +150,11 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
150150

151151
const { result } = renderHook(
152152
() =>
153-
hookFn(() => ({
154-
query: `SELECT * FROM test`,
155-
params: [],
156-
key: incKey,
157-
})),
153+
hookFn({
154+
query: () => `SELECT * FROM test`,
155+
params: () => [],
156+
key: () => incKey,
157+
}),
158158
{ wrapper },
159159
)
160160

@@ -188,11 +188,11 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
188188

189189
const { result } = renderHook(
190190
() =>
191-
hookFn(() => ({
192-
query: `SELECT * FROM test`,
193-
params: [],
194-
key: incKey,
195-
})),
191+
hookFn({
192+
query: () => `SELECT * FROM test`,
193+
params: () => [],
194+
key: () => incKey,
195+
}),
196196
{ wrapper },
197197
)
198198

@@ -270,11 +270,11 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
270270
const [query, setQuery] = createSignal(`SELECT * FROM test`)
271271
const { result } = renderHook(
272272
(props: { query: Accessor<string> }) => {
273-
return hookFn(() => ({
274-
query: props.query(),
275-
params: [],
276-
key: incKey,
277-
}))
273+
return hookFn({
274+
query: () => props.query(),
275+
params: () => [],
276+
key: () => incKey,
277+
})
278278
},
279279
{ wrapper, initialProps: [{ query }] },
280280
)
@@ -293,11 +293,11 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
293293

294294
const { result } = renderHook(
295295
(props: { params: Accessor<Array<string>> }) =>
296-
hookFn(() => ({
297-
query: `SELECT * FROM test WHERE name = $1;`,
298-
params: [props.params()[props.params().length - 1]],
299-
key: incKey,
300-
})),
296+
hookFn({
297+
query: () => `SELECT * FROM test WHERE name = $1;`,
298+
params: () => [props.params()[props.params().length - 1]],
299+
key: () => incKey,
300+
}),
301301
{ wrapper, initialProps: [{ params: paramsArr }] },
302302
)
303303

@@ -345,7 +345,7 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
345345
`SELECT * FROM live_test ORDER BY id DESC LIMIT 1;`,
346346
)
347347
const { result } = renderHook(
348-
() => useLiveQuery(() => ({ query: liveQuery })),
348+
() => useLiveQuery({ query: () => liveQuery }),
349349
{ wrapper },
350350
)
351351

@@ -371,7 +371,7 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
371371
`SELECT * FROM live_test ORDER BY id DESC LIMIT 1;`,
372372
)
373373
const { result } = renderHook(
374-
() => useLiveQuery(() => ({ query: liveQueryPromise })),
374+
() => useLiveQuery({ query: () => liveQueryPromise }),
375375
{
376376
wrapper,
377377
},
@@ -405,7 +405,7 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
405405
incKey,
406406
)
407407
const { result } = renderHook(
408-
() => useLiveQuery(() => ({ query: liveQuery })),
408+
() => useLiveQuery({ query: () => liveQuery }),
409409
{ wrapper },
410410
)
411411

@@ -433,7 +433,7 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
433433
incKey,
434434
)
435435
const { result } = renderHook(
436-
() => useLiveQuery(() => ({ query: liveQueryPromise })),
436+
() => useLiveQuery({ query: () => liveQueryPromise }),
437437
{
438438
wrapper,
439439
},
@@ -470,7 +470,7 @@ function testLiveQuery(queryHook: 'useLiveQuery' | 'useLiveIncrementalQuery') {
470470
)
471471

472472
const { result } = renderHook(
473-
() => useLiveQuery(() => ({ query: liveQueryPromise })),
473+
() => useLiveQuery({ query: () => liveQueryPromise }),
474474
{
475475
wrapper,
476476
},

0 commit comments

Comments
 (0)