@pyreon/query 0.11.5 → 0.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -56
- package/lib/index.js.map +1 -1
- package/lib/types/index.d.ts +7 -7
- package/package.json +16 -16
- package/src/index.ts +21 -33
- package/src/query-client.ts +5 -5
- package/src/tests/query-additional.test.tsx +59 -59
- package/src/tests/query.test.tsx +243 -243
- package/src/tests/sse.test.tsx +131 -131
- package/src/tests/subscription.test.tsx +97 -97
- package/src/use-infinite-query.ts +7 -7
- package/src/use-is-fetching.ts +5 -5
- package/src/use-mutation.ts +8 -8
- package/src/use-queries.ts +6 -6
- package/src/use-query-error-reset-boundary.ts +6 -6
- package/src/use-query.ts +8 -8
- package/src/use-sse.ts +19 -19
- package/src/use-subscription.ts +18 -18
- package/src/use-suspense-query.ts +12 -12
package/src/tests/query.test.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { signal } from
|
|
2
|
-
import { mount } from
|
|
3
|
-
import { QueryClient } from
|
|
1
|
+
import { signal } from '@pyreon/reactivity'
|
|
2
|
+
import { mount } from '@pyreon/runtime-dom'
|
|
3
|
+
import { QueryClient } from '@tanstack/query-core'
|
|
4
4
|
import {
|
|
5
5
|
dehydrate,
|
|
6
6
|
hydrate,
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
useQueryErrorResetBoundary,
|
|
18
18
|
useSuspenseInfiniteQuery,
|
|
19
19
|
useSuspenseQuery,
|
|
20
|
-
} from
|
|
20
|
+
} from '../index'
|
|
21
21
|
|
|
22
22
|
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
|
23
23
|
|
|
@@ -29,7 +29,7 @@ function makeClient() {
|
|
|
29
29
|
|
|
30
30
|
/** Mount a component inside a QueryClientProvider, return unmount fn. */
|
|
31
31
|
function _withProvider(client: QueryClient, component: () => void): () => void {
|
|
32
|
-
const el = document.createElement(
|
|
32
|
+
const el = document.createElement('div')
|
|
33
33
|
document.body.appendChild(el)
|
|
34
34
|
const unmount = mount(
|
|
35
35
|
<QueryClientProvider client={client}>
|
|
@@ -59,16 +59,16 @@ function deferred<T>() {
|
|
|
59
59
|
|
|
60
60
|
// ─── QueryClientProvider / useQueryClient ────────────────────────────────────
|
|
61
61
|
|
|
62
|
-
describe(
|
|
63
|
-
it(
|
|
62
|
+
describe('QueryClientProvider / useQueryClient', () => {
|
|
63
|
+
it('useQueryClient throws when no provider is present', () => {
|
|
64
64
|
// Call directly outside any renderer — context stack is empty so it must throw.
|
|
65
|
-
expect(() => useQueryClient()).toThrow(
|
|
65
|
+
expect(() => useQueryClient()).toThrow('[@pyreon/query]')
|
|
66
66
|
})
|
|
67
67
|
|
|
68
|
-
it(
|
|
68
|
+
it('provides the QueryClient to descendants', () => {
|
|
69
69
|
const client = makeClient()
|
|
70
70
|
let received: QueryClient | null = null
|
|
71
|
-
const el = document.createElement(
|
|
71
|
+
const el = document.createElement('div')
|
|
72
72
|
document.body.appendChild(el)
|
|
73
73
|
const unmount = mount(
|
|
74
74
|
<QueryClientProvider client={client}>
|
|
@@ -84,11 +84,11 @@ describe("QueryClientProvider / useQueryClient", () => {
|
|
|
84
84
|
expect(received).toBe(client)
|
|
85
85
|
})
|
|
86
86
|
|
|
87
|
-
it(
|
|
87
|
+
it('inner provider overrides outer', () => {
|
|
88
88
|
const outer = makeClient()
|
|
89
89
|
const inner = makeClient()
|
|
90
90
|
let received: QueryClient | null = null
|
|
91
|
-
const el = document.createElement(
|
|
91
|
+
const el = document.createElement('div')
|
|
92
92
|
document.body.appendChild(el)
|
|
93
93
|
const unmount = mount(
|
|
94
94
|
<QueryClientProvider client={outer}>
|
|
@@ -109,22 +109,22 @@ describe("QueryClientProvider / useQueryClient", () => {
|
|
|
109
109
|
|
|
110
110
|
// ─── useQuery ─────────────────────────────────────────────────────────────────
|
|
111
111
|
|
|
112
|
-
describe(
|
|
112
|
+
describe('useQuery', () => {
|
|
113
113
|
let client: QueryClient
|
|
114
114
|
|
|
115
115
|
beforeEach(() => {
|
|
116
116
|
client = makeClient()
|
|
117
117
|
})
|
|
118
118
|
|
|
119
|
-
it(
|
|
119
|
+
it('starts in pending state when cache is empty', () => {
|
|
120
120
|
let query: ReturnType<typeof useQuery> | undefined
|
|
121
|
-
const el = document.createElement(
|
|
121
|
+
const el = document.createElement('div')
|
|
122
122
|
document.body.appendChild(el)
|
|
123
123
|
const unmount = mount(
|
|
124
124
|
<QueryClientProvider client={client}>
|
|
125
125
|
{() => {
|
|
126
126
|
query = useQuery(() => ({
|
|
127
|
-
queryKey: [
|
|
127
|
+
queryKey: ['test-pending'],
|
|
128
128
|
queryFn: () =>
|
|
129
129
|
new Promise(() => {
|
|
130
130
|
/* never resolves */
|
|
@@ -141,17 +141,17 @@ describe("useQuery", () => {
|
|
|
141
141
|
el.remove()
|
|
142
142
|
})
|
|
143
143
|
|
|
144
|
-
it(
|
|
144
|
+
it('resolves to success state with data', async () => {
|
|
145
145
|
const { promise, resolve } = deferred<{ name: string }>()
|
|
146
146
|
let query: ReturnType<typeof useQuery<{ name: string }>> | undefined
|
|
147
147
|
|
|
148
|
-
const el = document.createElement(
|
|
148
|
+
const el = document.createElement('div')
|
|
149
149
|
document.body.appendChild(el)
|
|
150
150
|
const unmount = mount(
|
|
151
151
|
<QueryClientProvider client={client}>
|
|
152
152
|
{() => {
|
|
153
153
|
query = useQuery(() => ({
|
|
154
|
-
queryKey: [
|
|
154
|
+
queryKey: ['test-success'],
|
|
155
155
|
queryFn: () => promise,
|
|
156
156
|
}))
|
|
157
157
|
return null
|
|
@@ -160,29 +160,29 @@ describe("useQuery", () => {
|
|
|
160
160
|
el,
|
|
161
161
|
)
|
|
162
162
|
|
|
163
|
-
resolve({ name:
|
|
163
|
+
resolve({ name: 'Pyreon' })
|
|
164
164
|
await promise
|
|
165
165
|
|
|
166
166
|
// Let the observer's internal promise chain flush
|
|
167
167
|
await new Promise((r) => setTimeout(r, 0))
|
|
168
168
|
|
|
169
169
|
expect(query!.isSuccess()).toBe(true)
|
|
170
|
-
expect(query!.data()).toEqual({ name:
|
|
170
|
+
expect(query!.data()).toEqual({ name: 'Pyreon' })
|
|
171
171
|
unmount()
|
|
172
172
|
el.remove()
|
|
173
173
|
})
|
|
174
174
|
|
|
175
|
-
it(
|
|
175
|
+
it('captures errors in isError state', async () => {
|
|
176
176
|
const { promise, reject } = deferred<never>()
|
|
177
177
|
let query: ReturnType<typeof useQuery> | undefined
|
|
178
178
|
|
|
179
|
-
const el = document.createElement(
|
|
179
|
+
const el = document.createElement('div')
|
|
180
180
|
document.body.appendChild(el)
|
|
181
181
|
const unmount = mount(
|
|
182
182
|
<QueryClientProvider client={client}>
|
|
183
183
|
{() => {
|
|
184
184
|
query = useQuery(() => ({
|
|
185
|
-
queryKey: [
|
|
185
|
+
queryKey: ['test-error'],
|
|
186
186
|
queryFn: () => promise,
|
|
187
187
|
}))
|
|
188
188
|
return null
|
|
@@ -191,29 +191,29 @@ describe("useQuery", () => {
|
|
|
191
191
|
el,
|
|
192
192
|
)
|
|
193
193
|
|
|
194
|
-
reject(new Error(
|
|
194
|
+
reject(new Error('fetch failed'))
|
|
195
195
|
await promise.catch(() => {
|
|
196
196
|
/* expected */
|
|
197
197
|
})
|
|
198
198
|
await new Promise((r) => setTimeout(r, 0))
|
|
199
199
|
|
|
200
200
|
expect(query!.isError()).toBe(true)
|
|
201
|
-
expect((query!.error() as Error).message).toBe(
|
|
201
|
+
expect((query!.error() as Error).message).toBe('fetch failed')
|
|
202
202
|
unmount()
|
|
203
203
|
el.remove()
|
|
204
204
|
})
|
|
205
205
|
|
|
206
|
-
it(
|
|
207
|
-
const queryFn = vi.fn(() => Promise.resolve(
|
|
206
|
+
it('respects enabled: false — does not fetch', async () => {
|
|
207
|
+
const queryFn = vi.fn(() => Promise.resolve('should not run'))
|
|
208
208
|
let query: ReturnType<typeof useQuery<string>> | undefined
|
|
209
209
|
|
|
210
|
-
const el = document.createElement(
|
|
210
|
+
const el = document.createElement('div')
|
|
211
211
|
document.body.appendChild(el)
|
|
212
212
|
const unmount = mount(
|
|
213
213
|
<QueryClientProvider client={client}>
|
|
214
214
|
{() => {
|
|
215
215
|
query = useQuery(() => ({
|
|
216
|
-
queryKey: [
|
|
216
|
+
queryKey: ['test-disabled'],
|
|
217
217
|
queryFn,
|
|
218
218
|
enabled: false,
|
|
219
219
|
}))
|
|
@@ -231,18 +231,18 @@ describe("useQuery", () => {
|
|
|
231
231
|
el.remove()
|
|
232
232
|
})
|
|
233
233
|
|
|
234
|
-
it(
|
|
234
|
+
it('reactive query key — refetches when signal changes', async () => {
|
|
235
235
|
const calls: number[] = []
|
|
236
236
|
const userId = signal(1)
|
|
237
237
|
let query: ReturnType<typeof useQuery<string>> | undefined
|
|
238
238
|
|
|
239
|
-
const el = document.createElement(
|
|
239
|
+
const el = document.createElement('div')
|
|
240
240
|
document.body.appendChild(el)
|
|
241
241
|
const unmount = mount(
|
|
242
242
|
<QueryClientProvider client={client}>
|
|
243
243
|
{() => {
|
|
244
244
|
query = useQuery(() => ({
|
|
245
|
-
queryKey: [
|
|
245
|
+
queryKey: ['user', userId()],
|
|
246
246
|
queryFn: async () => {
|
|
247
247
|
const id = userId()
|
|
248
248
|
calls.push(id)
|
|
@@ -262,20 +262,20 @@ describe("useQuery", () => {
|
|
|
262
262
|
await new Promise((r) => setTimeout(r, 10))
|
|
263
263
|
expect(calls).toContain(2)
|
|
264
264
|
|
|
265
|
-
expect(query!.data()).toBe(
|
|
265
|
+
expect(query!.data()).toBe('user-2')
|
|
266
266
|
unmount()
|
|
267
267
|
el.remove()
|
|
268
268
|
})
|
|
269
269
|
|
|
270
|
-
it(
|
|
270
|
+
it('invalidateQueries triggers a refetch', async () => {
|
|
271
271
|
let callCount = 0
|
|
272
|
-
const el = document.createElement(
|
|
272
|
+
const el = document.createElement('div')
|
|
273
273
|
document.body.appendChild(el)
|
|
274
274
|
const unmount = mount(
|
|
275
275
|
<QueryClientProvider client={client}>
|
|
276
276
|
{() => {
|
|
277
277
|
useQuery(() => ({
|
|
278
|
-
queryKey: [
|
|
278
|
+
queryKey: ['invalidate-test'],
|
|
279
279
|
queryFn: async () => {
|
|
280
280
|
callCount++
|
|
281
281
|
return callCount
|
|
@@ -289,7 +289,7 @@ describe("useQuery", () => {
|
|
|
289
289
|
|
|
290
290
|
await new Promise((r) => setTimeout(r, 10))
|
|
291
291
|
const before = callCount
|
|
292
|
-
await client.invalidateQueries({ queryKey: [
|
|
292
|
+
await client.invalidateQueries({ queryKey: ['invalidate-test'] })
|
|
293
293
|
await new Promise((r) => setTimeout(r, 10))
|
|
294
294
|
expect(callCount).toBeGreaterThan(before)
|
|
295
295
|
unmount()
|
|
@@ -299,20 +299,20 @@ describe("useQuery", () => {
|
|
|
299
299
|
|
|
300
300
|
// ─── useMutation ──────────────────────────────────────────────────────────────
|
|
301
301
|
|
|
302
|
-
describe(
|
|
302
|
+
describe('useMutation', () => {
|
|
303
303
|
let client: QueryClient
|
|
304
304
|
beforeEach(() => {
|
|
305
305
|
client = makeClient()
|
|
306
306
|
})
|
|
307
307
|
|
|
308
|
-
it(
|
|
308
|
+
it('starts in idle state', () => {
|
|
309
309
|
let mut: ReturnType<typeof useMutation> | undefined
|
|
310
|
-
const el = document.createElement(
|
|
310
|
+
const el = document.createElement('div')
|
|
311
311
|
document.body.appendChild(el)
|
|
312
312
|
const unmount = mount(
|
|
313
313
|
<QueryClientProvider client={client}>
|
|
314
314
|
{() => {
|
|
315
|
-
mut = useMutation({ mutationFn: () => Promise.resolve(
|
|
315
|
+
mut = useMutation({ mutationFn: () => Promise.resolve('ok') })
|
|
316
316
|
return null
|
|
317
317
|
}}
|
|
318
318
|
</QueryClientProvider>,
|
|
@@ -324,9 +324,9 @@ describe("useMutation", () => {
|
|
|
324
324
|
el.remove()
|
|
325
325
|
})
|
|
326
326
|
|
|
327
|
-
it(
|
|
327
|
+
it('goes pending then success', async () => {
|
|
328
328
|
let mut: ReturnType<typeof useMutation<string, Error, string>> | undefined
|
|
329
|
-
const el = document.createElement(
|
|
329
|
+
const el = document.createElement('div')
|
|
330
330
|
document.body.appendChild(el)
|
|
331
331
|
const unmount = mount(
|
|
332
332
|
<QueryClientProvider client={client}>
|
|
@@ -340,25 +340,25 @@ describe("useMutation", () => {
|
|
|
340
340
|
el,
|
|
341
341
|
)
|
|
342
342
|
|
|
343
|
-
mut!.mutate(
|
|
343
|
+
mut!.mutate('hello')
|
|
344
344
|
await new Promise((r) => setTimeout(r, 10))
|
|
345
345
|
|
|
346
346
|
expect(mut!.isSuccess()).toBe(true)
|
|
347
|
-
expect(mut!.data()).toBe(
|
|
347
|
+
expect(mut!.data()).toBe('result:hello')
|
|
348
348
|
unmount()
|
|
349
349
|
el.remove()
|
|
350
350
|
})
|
|
351
351
|
|
|
352
|
-
it(
|
|
352
|
+
it('captures mutation error', async () => {
|
|
353
353
|
let mut: ReturnType<typeof useMutation> | undefined
|
|
354
|
-
const el = document.createElement(
|
|
354
|
+
const el = document.createElement('div')
|
|
355
355
|
document.body.appendChild(el)
|
|
356
356
|
const unmount = mount(
|
|
357
357
|
<QueryClientProvider client={client}>
|
|
358
358
|
{() => {
|
|
359
359
|
mut = useMutation({
|
|
360
360
|
mutationFn: async () => {
|
|
361
|
-
throw new Error(
|
|
361
|
+
throw new Error('mutation failed')
|
|
362
362
|
},
|
|
363
363
|
})
|
|
364
364
|
return null
|
|
@@ -371,20 +371,20 @@ describe("useMutation", () => {
|
|
|
371
371
|
await new Promise((r) => setTimeout(r, 10))
|
|
372
372
|
|
|
373
373
|
expect(mut!.isError()).toBe(true)
|
|
374
|
-
expect((mut!.error() as Error).message).toBe(
|
|
374
|
+
expect((mut!.error() as Error).message).toBe('mutation failed')
|
|
375
375
|
unmount()
|
|
376
376
|
el.remove()
|
|
377
377
|
})
|
|
378
378
|
|
|
379
|
-
it(
|
|
379
|
+
it('reset() clears mutation state', async () => {
|
|
380
380
|
let mut: ReturnType<typeof useMutation<string, Error, void>> | undefined
|
|
381
|
-
const el = document.createElement(
|
|
381
|
+
const el = document.createElement('div')
|
|
382
382
|
document.body.appendChild(el)
|
|
383
383
|
const unmount = mount(
|
|
384
384
|
<QueryClientProvider client={client}>
|
|
385
385
|
{() => {
|
|
386
386
|
mut = useMutation<string, Error, void>({
|
|
387
|
-
mutationFn: async () =>
|
|
387
|
+
mutationFn: async () => 'done',
|
|
388
388
|
})
|
|
389
389
|
return null
|
|
390
390
|
}}
|
|
@@ -407,11 +407,11 @@ describe("useMutation", () => {
|
|
|
407
407
|
|
|
408
408
|
// ─── useIsFetching / useIsMutating ────────────────────────────────────────────
|
|
409
409
|
|
|
410
|
-
describe(
|
|
411
|
-
it(
|
|
410
|
+
describe('useIsFetching', () => {
|
|
411
|
+
it('returns 0 when no queries are in-flight', () => {
|
|
412
412
|
const client = makeClient()
|
|
413
413
|
let count: (() => number) | undefined
|
|
414
|
-
const el = document.createElement(
|
|
414
|
+
const el = document.createElement('div')
|
|
415
415
|
document.body.appendChild(el)
|
|
416
416
|
const unmount = mount(
|
|
417
417
|
<QueryClientProvider client={client}>
|
|
@@ -427,20 +427,20 @@ describe("useIsFetching", () => {
|
|
|
427
427
|
el.remove()
|
|
428
428
|
})
|
|
429
429
|
|
|
430
|
-
it(
|
|
430
|
+
it('increments while a query is fetching', async () => {
|
|
431
431
|
const client = makeClient()
|
|
432
432
|
const { promise, resolve } = deferred<string>()
|
|
433
433
|
const counts: number[] = []
|
|
434
434
|
let isFetching: (() => number) | undefined
|
|
435
435
|
|
|
436
|
-
const el = document.createElement(
|
|
436
|
+
const el = document.createElement('div')
|
|
437
437
|
document.body.appendChild(el)
|
|
438
438
|
const unmount = mount(
|
|
439
439
|
<QueryClientProvider client={client}>
|
|
440
440
|
{() => {
|
|
441
441
|
isFetching = useIsFetching()
|
|
442
442
|
useQuery(() => ({
|
|
443
|
-
queryKey: [
|
|
443
|
+
queryKey: ['fetch-count'],
|
|
444
444
|
queryFn: () => promise,
|
|
445
445
|
}))
|
|
446
446
|
return null
|
|
@@ -453,7 +453,7 @@ describe("useIsFetching", () => {
|
|
|
453
453
|
await new Promise((r) => setTimeout(r, 0))
|
|
454
454
|
counts.push(isFetching!())
|
|
455
455
|
|
|
456
|
-
resolve(
|
|
456
|
+
resolve('done')
|
|
457
457
|
await promise
|
|
458
458
|
await new Promise((r) => setTimeout(r, 10))
|
|
459
459
|
counts.push(isFetching!())
|
|
@@ -465,14 +465,14 @@ describe("useIsFetching", () => {
|
|
|
465
465
|
})
|
|
466
466
|
})
|
|
467
467
|
|
|
468
|
-
describe(
|
|
469
|
-
it(
|
|
468
|
+
describe('useIsMutating', () => {
|
|
469
|
+
it('returns 0 when idle, >0 while mutating', async () => {
|
|
470
470
|
const client = makeClient()
|
|
471
471
|
const { promise, resolve } = deferred<void>()
|
|
472
472
|
let isMutating: (() => number) | undefined
|
|
473
473
|
let mut: ReturnType<typeof useMutation<void, Error, void>> | undefined
|
|
474
474
|
|
|
475
|
-
const el = document.createElement(
|
|
475
|
+
const el = document.createElement('div')
|
|
476
476
|
document.body.appendChild(el)
|
|
477
477
|
const unmount = mount(
|
|
478
478
|
<QueryClientProvider client={client}>
|
|
@@ -500,13 +500,13 @@ describe("useIsMutating", () => {
|
|
|
500
500
|
|
|
501
501
|
// ─── SSR: dehydrate / hydrate ─────────────────────────────────────────────────
|
|
502
502
|
|
|
503
|
-
describe(
|
|
504
|
-
it(
|
|
503
|
+
describe('dehydrate / hydrate', () => {
|
|
504
|
+
it('round-trips query data — prefetched data available without refetching', async () => {
|
|
505
505
|
// Server: prefetch + serialize
|
|
506
506
|
const serverClient = makeClient()
|
|
507
507
|
await serverClient.prefetchQuery({
|
|
508
|
-
queryKey: [
|
|
509
|
-
queryFn: async () => ({ name:
|
|
508
|
+
queryKey: ['ssr-user'],
|
|
509
|
+
queryFn: async () => ({ name: 'SSR User' }),
|
|
510
510
|
})
|
|
511
511
|
const state = dehydrate(serverClient)
|
|
512
512
|
|
|
@@ -517,16 +517,16 @@ describe("dehydrate / hydrate", () => {
|
|
|
517
517
|
let query: ReturnType<typeof useQuery<{ name: string }>> | undefined
|
|
518
518
|
let callCount = 0
|
|
519
519
|
|
|
520
|
-
const el = document.createElement(
|
|
520
|
+
const el = document.createElement('div')
|
|
521
521
|
document.body.appendChild(el)
|
|
522
522
|
const unmount = mount(
|
|
523
523
|
<QueryClientProvider client={clientClient}>
|
|
524
524
|
{() => {
|
|
525
525
|
query = useQuery(() => ({
|
|
526
|
-
queryKey: [
|
|
526
|
+
queryKey: ['ssr-user'],
|
|
527
527
|
queryFn: async () => {
|
|
528
528
|
callCount++
|
|
529
|
-
return { name:
|
|
529
|
+
return { name: 'fresh' }
|
|
530
530
|
},
|
|
531
531
|
staleTime: Infinity, // treat hydrated data as fresh
|
|
532
532
|
}))
|
|
@@ -538,7 +538,7 @@ describe("dehydrate / hydrate", () => {
|
|
|
538
538
|
|
|
539
539
|
// Data should be immediately available from the hydrated cache
|
|
540
540
|
expect(query!.isSuccess()).toBe(true)
|
|
541
|
-
expect(query!.data()).toEqual({ name:
|
|
541
|
+
expect(query!.data()).toEqual({ name: 'SSR User' })
|
|
542
542
|
// queryFn should NOT have been called (data was in cache)
|
|
543
543
|
expect(callCount).toBe(0)
|
|
544
544
|
unmount()
|
|
@@ -548,19 +548,19 @@ describe("dehydrate / hydrate", () => {
|
|
|
548
548
|
|
|
549
549
|
// ─── useQueries ───────────────────────────────────────────────────────────────
|
|
550
550
|
|
|
551
|
-
describe(
|
|
552
|
-
it(
|
|
551
|
+
describe('useQueries', () => {
|
|
552
|
+
it('returns results for all queries in the array', async () => {
|
|
553
553
|
const client = makeClient()
|
|
554
554
|
let results: ReturnType<typeof useQueries> | undefined
|
|
555
555
|
|
|
556
|
-
const el = document.createElement(
|
|
556
|
+
const el = document.createElement('div')
|
|
557
557
|
document.body.appendChild(el)
|
|
558
558
|
const unmount = mount(
|
|
559
559
|
<QueryClientProvider client={client}>
|
|
560
560
|
{() => {
|
|
561
561
|
results = useQueries(() => [
|
|
562
|
-
{ queryKey: [
|
|
563
|
-
{ queryKey: [
|
|
562
|
+
{ queryKey: ['a'], queryFn: async () => 'alpha' },
|
|
563
|
+
{ queryKey: ['b'], queryFn: async () => 'beta' },
|
|
564
564
|
])
|
|
565
565
|
return null
|
|
566
566
|
}}
|
|
@@ -571,26 +571,26 @@ describe("useQueries", () => {
|
|
|
571
571
|
await new Promise((r) => setTimeout(r, 20))
|
|
572
572
|
const res = results?.() ?? []
|
|
573
573
|
expect(res).toHaveLength(2)
|
|
574
|
-
expect(res[0]!.data).toBe(
|
|
575
|
-
expect(res[1]!.data).toBe(
|
|
574
|
+
expect(res[0]!.data).toBe('alpha')
|
|
575
|
+
expect(res[1]!.data).toBe('beta')
|
|
576
576
|
unmount()
|
|
577
577
|
el.remove()
|
|
578
578
|
})
|
|
579
579
|
|
|
580
|
-
it(
|
|
580
|
+
it('reactive — updates when the queries signal changes', async () => {
|
|
581
581
|
const client = makeClient()
|
|
582
|
-
const { signal: sig } = await import(
|
|
582
|
+
const { signal: sig } = await import('@pyreon/reactivity')
|
|
583
583
|
const ids = sig([1])
|
|
584
584
|
let results: ReturnType<typeof useQueries> | undefined
|
|
585
585
|
|
|
586
|
-
const el = document.createElement(
|
|
586
|
+
const el = document.createElement('div')
|
|
587
587
|
document.body.appendChild(el)
|
|
588
588
|
const unmount = mount(
|
|
589
589
|
<QueryClientProvider client={client}>
|
|
590
590
|
{() => {
|
|
591
591
|
results = useQueries(() =>
|
|
592
592
|
ids().map((id) => ({
|
|
593
|
-
queryKey: [
|
|
593
|
+
queryKey: ['item', id],
|
|
594
594
|
queryFn: async () => `item-${id}`,
|
|
595
595
|
})),
|
|
596
596
|
)
|
|
@@ -606,7 +606,7 @@ describe("useQueries", () => {
|
|
|
606
606
|
ids.set([1, 2])
|
|
607
607
|
await new Promise((r) => setTimeout(r, 20))
|
|
608
608
|
expect(results?.()).toHaveLength(2)
|
|
609
|
-
expect(results!()[1]!.data).toBe(
|
|
609
|
+
expect(results!()[1]!.data).toBe('item-2')
|
|
610
610
|
unmount()
|
|
611
611
|
el.remove()
|
|
612
612
|
})
|
|
@@ -614,23 +614,23 @@ describe("useQueries", () => {
|
|
|
614
614
|
|
|
615
615
|
// ─── useSuspenseQuery / QuerySuspense ─────────────────────────────────────────
|
|
616
616
|
|
|
617
|
-
describe(
|
|
617
|
+
describe('useSuspenseQuery + QuerySuspense', () => {
|
|
618
618
|
let client: QueryClient
|
|
619
619
|
beforeEach(() => {
|
|
620
620
|
client = makeClient()
|
|
621
621
|
})
|
|
622
622
|
|
|
623
|
-
it(
|
|
623
|
+
it('QuerySuspense shows fallback while pending, then children on success', async () => {
|
|
624
624
|
const { promise, resolve } = deferred<string>()
|
|
625
625
|
const rendered: string[] = []
|
|
626
626
|
|
|
627
|
-
const el = document.createElement(
|
|
627
|
+
const el = document.createElement('div')
|
|
628
628
|
document.body.appendChild(el)
|
|
629
629
|
const unmount = mount(
|
|
630
630
|
<QueryClientProvider client={client}>
|
|
631
631
|
{() => {
|
|
632
632
|
const q = useSuspenseQuery(() => ({
|
|
633
|
-
queryKey: [
|
|
633
|
+
queryKey: ['sq-pending'],
|
|
634
634
|
queryFn: () => promise,
|
|
635
635
|
}))
|
|
636
636
|
return (
|
|
@@ -650,25 +650,25 @@ describe("useSuspenseQuery + QuerySuspense", () => {
|
|
|
650
650
|
await new Promise((r) => setTimeout(r, 0))
|
|
651
651
|
expect(rendered).toHaveLength(0)
|
|
652
652
|
|
|
653
|
-
resolve(
|
|
653
|
+
resolve('done')
|
|
654
654
|
await promise
|
|
655
655
|
await new Promise((r) => setTimeout(r, 10))
|
|
656
|
-
expect(rendered.at(-1)).toBe(
|
|
656
|
+
expect(rendered.at(-1)).toBe('done')
|
|
657
657
|
unmount()
|
|
658
658
|
el.remove()
|
|
659
659
|
})
|
|
660
660
|
|
|
661
|
-
it(
|
|
661
|
+
it('QuerySuspense shows error fallback on query failure', async () => {
|
|
662
662
|
const { promise, reject } = deferred<never>()
|
|
663
663
|
let errorMsg: string | undefined
|
|
664
664
|
|
|
665
|
-
const el = document.createElement(
|
|
665
|
+
const el = document.createElement('div')
|
|
666
666
|
document.body.appendChild(el)
|
|
667
667
|
const unmount = mount(
|
|
668
668
|
<QueryClientProvider client={client}>
|
|
669
669
|
{() => {
|
|
670
670
|
const q = useSuspenseQuery(() => ({
|
|
671
|
-
queryKey: [
|
|
671
|
+
queryKey: ['sq-error'],
|
|
672
672
|
queryFn: () => promise,
|
|
673
673
|
}))
|
|
674
674
|
return (
|
|
@@ -688,32 +688,32 @@ describe("useSuspenseQuery + QuerySuspense", () => {
|
|
|
688
688
|
el,
|
|
689
689
|
)
|
|
690
690
|
|
|
691
|
-
reject(new Error(
|
|
691
|
+
reject(new Error('sq failed'))
|
|
692
692
|
await promise.catch(() => {
|
|
693
693
|
/* expected */
|
|
694
694
|
})
|
|
695
695
|
await new Promise((r) => setTimeout(r, 10))
|
|
696
|
-
expect(errorMsg).toBe(
|
|
696
|
+
expect(errorMsg).toBe('sq failed')
|
|
697
697
|
unmount()
|
|
698
698
|
el.remove()
|
|
699
699
|
})
|
|
700
700
|
|
|
701
|
-
it(
|
|
701
|
+
it('multiple queries — children only render when all succeed', async () => {
|
|
702
702
|
const d1 = deferred<string>()
|
|
703
703
|
const d2 = deferred<string>()
|
|
704
704
|
let childrenRendered = false
|
|
705
705
|
|
|
706
|
-
const el = document.createElement(
|
|
706
|
+
const el = document.createElement('div')
|
|
707
707
|
document.body.appendChild(el)
|
|
708
708
|
const unmount = mount(
|
|
709
709
|
<QueryClientProvider client={client}>
|
|
710
710
|
{() => {
|
|
711
711
|
const q1 = useSuspenseQuery(() => ({
|
|
712
|
-
queryKey: [
|
|
712
|
+
queryKey: ['mq1'],
|
|
713
713
|
queryFn: () => d1.promise,
|
|
714
714
|
}))
|
|
715
715
|
const q2 = useSuspenseQuery(() => ({
|
|
716
|
-
queryKey: [
|
|
716
|
+
queryKey: ['mq2'],
|
|
717
717
|
queryFn: () => d2.promise,
|
|
718
718
|
}))
|
|
719
719
|
return (
|
|
@@ -729,13 +729,13 @@ describe("useSuspenseQuery + QuerySuspense", () => {
|
|
|
729
729
|
el,
|
|
730
730
|
)
|
|
731
731
|
|
|
732
|
-
d1.resolve(
|
|
732
|
+
d1.resolve('first')
|
|
733
733
|
await d1.promise
|
|
734
734
|
await new Promise((r) => setTimeout(r, 10))
|
|
735
735
|
// q2 still pending — children should not render
|
|
736
736
|
expect(childrenRendered).toBe(false)
|
|
737
737
|
|
|
738
|
-
d2.resolve(
|
|
738
|
+
d2.resolve('second')
|
|
739
739
|
await d2.promise
|
|
740
740
|
await new Promise((r) => setTimeout(r, 10))
|
|
741
741
|
expect(childrenRendered).toBe(true)
|
|
@@ -746,14 +746,14 @@ describe("useSuspenseQuery + QuerySuspense", () => {
|
|
|
746
746
|
|
|
747
747
|
// ─── QueryErrorResetBoundary / useQueryErrorResetBoundary ─────────────────────
|
|
748
748
|
|
|
749
|
-
describe(
|
|
750
|
-
it(
|
|
749
|
+
describe('QueryErrorResetBoundary', () => {
|
|
750
|
+
it('reset() re-triggers fetch for errored queries', async () => {
|
|
751
751
|
const client = makeClient()
|
|
752
752
|
let callCount = 0
|
|
753
753
|
let shouldFail = true
|
|
754
754
|
let resetFn: (() => void) | undefined
|
|
755
755
|
|
|
756
|
-
const el = document.createElement(
|
|
756
|
+
const el = document.createElement('div')
|
|
757
757
|
document.body.appendChild(el)
|
|
758
758
|
const unmount = mount(
|
|
759
759
|
<QueryClientProvider client={client}>
|
|
@@ -762,11 +762,11 @@ describe("QueryErrorResetBoundary", () => {
|
|
|
762
762
|
const { reset } = useQueryErrorResetBoundary()
|
|
763
763
|
resetFn = reset
|
|
764
764
|
useQuery(() => ({
|
|
765
|
-
queryKey: [
|
|
765
|
+
queryKey: ['reset-test'],
|
|
766
766
|
queryFn: async () => {
|
|
767
767
|
callCount++
|
|
768
|
-
if (shouldFail) throw new Error(
|
|
769
|
-
return
|
|
768
|
+
if (shouldFail) throw new Error('fail')
|
|
769
|
+
return 'ok'
|
|
770
770
|
},
|
|
771
771
|
}))
|
|
772
772
|
return null
|
|
@@ -787,11 +787,11 @@ describe("QueryErrorResetBoundary", () => {
|
|
|
787
787
|
el.remove()
|
|
788
788
|
})
|
|
789
789
|
|
|
790
|
-
it(
|
|
790
|
+
it('useQueryErrorResetBoundary works without explicit boundary', () => {
|
|
791
791
|
const client = makeClient()
|
|
792
792
|
let reset: (() => void) | undefined
|
|
793
793
|
|
|
794
|
-
const el = document.createElement(
|
|
794
|
+
const el = document.createElement('div')
|
|
795
795
|
document.body.appendChild(el)
|
|
796
796
|
const unmount = mount(
|
|
797
797
|
<QueryClientProvider client={client}>
|
|
@@ -813,21 +813,21 @@ describe("QueryErrorResetBoundary", () => {
|
|
|
813
813
|
|
|
814
814
|
// ─── useInfiniteQuery ─────────────────────────────────────────────────────────
|
|
815
815
|
|
|
816
|
-
describe(
|
|
816
|
+
describe('useInfiniteQuery', () => {
|
|
817
817
|
let client: QueryClient
|
|
818
818
|
beforeEach(() => {
|
|
819
819
|
client = makeClient()
|
|
820
820
|
})
|
|
821
821
|
|
|
822
|
-
it(
|
|
822
|
+
it('starts in pending state', () => {
|
|
823
823
|
let query: ReturnType<typeof useInfiniteQuery> | undefined
|
|
824
|
-
const el = document.createElement(
|
|
824
|
+
const el = document.createElement('div')
|
|
825
825
|
document.body.appendChild(el)
|
|
826
826
|
const unmount = mount(
|
|
827
827
|
<QueryClientProvider client={client}>
|
|
828
828
|
{() => {
|
|
829
829
|
query = useInfiniteQuery(() => ({
|
|
830
|
-
queryKey: [
|
|
830
|
+
queryKey: ['inf-pending'],
|
|
831
831
|
queryFn: () =>
|
|
832
832
|
new Promise(() => {
|
|
833
833
|
/* never resolves */
|
|
@@ -843,7 +843,7 @@ describe("useInfiniteQuery", () => {
|
|
|
843
843
|
expect(query!.isPending()).toBe(true)
|
|
844
844
|
expect(query!.isLoading()).toBe(true)
|
|
845
845
|
expect(query!.data()).toBeUndefined()
|
|
846
|
-
expect(query!.status()).toBe(
|
|
846
|
+
expect(query!.status()).toBe('pending')
|
|
847
847
|
expect(query!.isSuccess()).toBe(false)
|
|
848
848
|
expect(query!.isError()).toBe(false)
|
|
849
849
|
expect(query!.error()).toBeNull()
|
|
@@ -855,15 +855,15 @@ describe("useInfiniteQuery", () => {
|
|
|
855
855
|
el.remove()
|
|
856
856
|
})
|
|
857
857
|
|
|
858
|
-
it(
|
|
858
|
+
it('resolves to success with pages data', async () => {
|
|
859
859
|
let query: ReturnType<typeof useInfiniteQuery<string>> | undefined
|
|
860
|
-
const el = document.createElement(
|
|
860
|
+
const el = document.createElement('div')
|
|
861
861
|
document.body.appendChild(el)
|
|
862
862
|
const unmount = mount(
|
|
863
863
|
<QueryClientProvider client={client}>
|
|
864
864
|
{() => {
|
|
865
865
|
query = useInfiniteQuery(() => ({
|
|
866
|
-
queryKey: [
|
|
866
|
+
queryKey: ['inf-success'],
|
|
867
867
|
queryFn: ({ pageParam }: { pageParam: number }) => Promise.resolve(`page-${pageParam}`),
|
|
868
868
|
initialPageParam: 0,
|
|
869
869
|
getNextPageParam: (_last: string, _all: string[], lastParam: number) =>
|
|
@@ -877,8 +877,8 @@ describe("useInfiniteQuery", () => {
|
|
|
877
877
|
|
|
878
878
|
await new Promise((r) => setTimeout(r, 20))
|
|
879
879
|
expect(query!.isSuccess()).toBe(true)
|
|
880
|
-
expect(query!.status()).toBe(
|
|
881
|
-
expect(query!.data()?.pages).toEqual([
|
|
880
|
+
expect(query!.status()).toBe('success')
|
|
881
|
+
expect(query!.data()?.pages).toEqual(['page-0'])
|
|
882
882
|
expect(query!.hasNextPage()).toBe(true)
|
|
883
883
|
expect(query!.isPending()).toBe(false)
|
|
884
884
|
expect(query!.isFetching()).toBe(false)
|
|
@@ -886,15 +886,15 @@ describe("useInfiniteQuery", () => {
|
|
|
886
886
|
el.remove()
|
|
887
887
|
})
|
|
888
888
|
|
|
889
|
-
it(
|
|
889
|
+
it('fetchNextPage loads the next page', async () => {
|
|
890
890
|
let query: ReturnType<typeof useInfiniteQuery<string>> | undefined
|
|
891
|
-
const el = document.createElement(
|
|
891
|
+
const el = document.createElement('div')
|
|
892
892
|
document.body.appendChild(el)
|
|
893
893
|
const unmount = mount(
|
|
894
894
|
<QueryClientProvider client={client}>
|
|
895
895
|
{() => {
|
|
896
896
|
query = useInfiniteQuery(() => ({
|
|
897
|
-
queryKey: [
|
|
897
|
+
queryKey: ['inf-next'],
|
|
898
898
|
queryFn: ({ pageParam }: { pageParam: number }) => Promise.resolve(`page-${pageParam}`),
|
|
899
899
|
initialPageParam: 0,
|
|
900
900
|
getNextPageParam: (_last: string, _all: string[], lastParam: number) =>
|
|
@@ -907,30 +907,30 @@ describe("useInfiniteQuery", () => {
|
|
|
907
907
|
)
|
|
908
908
|
|
|
909
909
|
await new Promise((r) => setTimeout(r, 20))
|
|
910
|
-
expect(query!.data()?.pages).toEqual([
|
|
910
|
+
expect(query!.data()?.pages).toEqual(['page-0'])
|
|
911
911
|
|
|
912
912
|
await query!.fetchNextPage()
|
|
913
913
|
await new Promise((r) => setTimeout(r, 20))
|
|
914
|
-
expect(query!.data()?.pages).toEqual([
|
|
914
|
+
expect(query!.data()?.pages).toEqual(['page-0', 'page-1'])
|
|
915
915
|
expect(query!.hasNextPage()).toBe(true)
|
|
916
916
|
|
|
917
917
|
await query!.fetchNextPage()
|
|
918
918
|
await new Promise((r) => setTimeout(r, 20))
|
|
919
|
-
expect(query!.data()?.pages).toEqual([
|
|
919
|
+
expect(query!.data()?.pages).toEqual(['page-0', 'page-1', 'page-2'])
|
|
920
920
|
expect(query!.hasNextPage()).toBe(false)
|
|
921
921
|
unmount()
|
|
922
922
|
el.remove()
|
|
923
923
|
})
|
|
924
924
|
|
|
925
|
-
it(
|
|
925
|
+
it('fetchPreviousPage loads the previous page', async () => {
|
|
926
926
|
let query: ReturnType<typeof useInfiniteQuery<string>> | undefined
|
|
927
|
-
const el = document.createElement(
|
|
927
|
+
const el = document.createElement('div')
|
|
928
928
|
document.body.appendChild(el)
|
|
929
929
|
const unmount = mount(
|
|
930
930
|
<QueryClientProvider client={client}>
|
|
931
931
|
{() => {
|
|
932
932
|
query = useInfiniteQuery(() => ({
|
|
933
|
-
queryKey: [
|
|
933
|
+
queryKey: ['inf-prev'],
|
|
934
934
|
queryFn: ({ pageParam }: { pageParam: number }) => Promise.resolve(`page-${pageParam}`),
|
|
935
935
|
initialPageParam: 5,
|
|
936
936
|
getNextPageParam: () => undefined,
|
|
@@ -948,21 +948,21 @@ describe("useInfiniteQuery", () => {
|
|
|
948
948
|
|
|
949
949
|
await query!.fetchPreviousPage()
|
|
950
950
|
await new Promise((r) => setTimeout(r, 20))
|
|
951
|
-
expect(query!.data()?.pages).toContain(
|
|
951
|
+
expect(query!.data()?.pages).toContain('page-4')
|
|
952
952
|
unmount()
|
|
953
953
|
el.remove()
|
|
954
954
|
})
|
|
955
955
|
|
|
956
|
-
it(
|
|
956
|
+
it('captures error state', async () => {
|
|
957
957
|
let query: ReturnType<typeof useInfiniteQuery> | undefined
|
|
958
|
-
const el = document.createElement(
|
|
958
|
+
const el = document.createElement('div')
|
|
959
959
|
document.body.appendChild(el)
|
|
960
960
|
const unmount = mount(
|
|
961
961
|
<QueryClientProvider client={client}>
|
|
962
962
|
{() => {
|
|
963
963
|
query = useInfiniteQuery(() => ({
|
|
964
|
-
queryKey: [
|
|
965
|
-
queryFn: () => Promise.reject(new Error(
|
|
964
|
+
queryKey: ['inf-error'],
|
|
965
|
+
queryFn: () => Promise.reject(new Error('inf failed')),
|
|
966
966
|
initialPageParam: 0,
|
|
967
967
|
getNextPageParam: () => undefined,
|
|
968
968
|
}))
|
|
@@ -974,25 +974,25 @@ describe("useInfiniteQuery", () => {
|
|
|
974
974
|
|
|
975
975
|
await new Promise((r) => setTimeout(r, 20))
|
|
976
976
|
expect(query!.isError()).toBe(true)
|
|
977
|
-
expect(query!.status()).toBe(
|
|
978
|
-
expect((query!.error() as Error).message).toBe(
|
|
977
|
+
expect(query!.status()).toBe('error')
|
|
978
|
+
expect((query!.error() as Error).message).toBe('inf failed')
|
|
979
979
|
unmount()
|
|
980
980
|
el.remove()
|
|
981
981
|
})
|
|
982
982
|
|
|
983
|
-
it(
|
|
983
|
+
it('refetch re-fetches the query', async () => {
|
|
984
984
|
let callCount = 0
|
|
985
985
|
let query: ReturnType<typeof useInfiniteQuery<string>> | undefined
|
|
986
|
-
const el = document.createElement(
|
|
986
|
+
const el = document.createElement('div')
|
|
987
987
|
document.body.appendChild(el)
|
|
988
988
|
const unmount = mount(
|
|
989
989
|
<QueryClientProvider client={client}>
|
|
990
990
|
{() => {
|
|
991
991
|
query = useInfiniteQuery(() => ({
|
|
992
|
-
queryKey: [
|
|
992
|
+
queryKey: ['inf-refetch'],
|
|
993
993
|
queryFn: () => {
|
|
994
994
|
callCount++
|
|
995
|
-
return Promise.resolve(
|
|
995
|
+
return Promise.resolve('data')
|
|
996
996
|
},
|
|
997
997
|
initialPageParam: 0,
|
|
998
998
|
getNextPageParam: () => undefined,
|
|
@@ -1012,16 +1012,16 @@ describe("useInfiniteQuery", () => {
|
|
|
1012
1012
|
el.remove()
|
|
1013
1013
|
})
|
|
1014
1014
|
|
|
1015
|
-
it(
|
|
1015
|
+
it('result signal contains full observer result', async () => {
|
|
1016
1016
|
let query: ReturnType<typeof useInfiniteQuery<string>> | undefined
|
|
1017
|
-
const el = document.createElement(
|
|
1017
|
+
const el = document.createElement('div')
|
|
1018
1018
|
document.body.appendChild(el)
|
|
1019
1019
|
const unmount = mount(
|
|
1020
1020
|
<QueryClientProvider client={client}>
|
|
1021
1021
|
{() => {
|
|
1022
1022
|
query = useInfiniteQuery(() => ({
|
|
1023
|
-
queryKey: [
|
|
1024
|
-
queryFn: () => Promise.resolve(
|
|
1023
|
+
queryKey: ['inf-result'],
|
|
1024
|
+
queryFn: () => Promise.resolve('val'),
|
|
1025
1025
|
initialPageParam: 0,
|
|
1026
1026
|
getNextPageParam: () => undefined,
|
|
1027
1027
|
}))
|
|
@@ -1033,22 +1033,22 @@ describe("useInfiniteQuery", () => {
|
|
|
1033
1033
|
|
|
1034
1034
|
await new Promise((resolve) => setTimeout(resolve, 20))
|
|
1035
1035
|
const r = query!.result()
|
|
1036
|
-
expect(r.status).toBe(
|
|
1037
|
-
expect(r.data?.pages).toEqual([
|
|
1036
|
+
expect(r.status).toBe('success')
|
|
1037
|
+
expect(r.data?.pages).toEqual(['val'])
|
|
1038
1038
|
unmount()
|
|
1039
1039
|
el.remove()
|
|
1040
1040
|
})
|
|
1041
1041
|
|
|
1042
|
-
it(
|
|
1043
|
-
const key = signal(
|
|
1042
|
+
it('reactive options update observer', async () => {
|
|
1043
|
+
const key = signal('a')
|
|
1044
1044
|
let query: ReturnType<typeof useInfiniteQuery<string>> | undefined
|
|
1045
|
-
const el = document.createElement(
|
|
1045
|
+
const el = document.createElement('div')
|
|
1046
1046
|
document.body.appendChild(el)
|
|
1047
1047
|
const unmount = mount(
|
|
1048
1048
|
<QueryClientProvider client={client}>
|
|
1049
1049
|
{() => {
|
|
1050
1050
|
query = useInfiniteQuery(() => ({
|
|
1051
|
-
queryKey: [
|
|
1051
|
+
queryKey: ['inf-reactive', key()],
|
|
1052
1052
|
queryFn: () => Promise.resolve(`data-${key()}`),
|
|
1053
1053
|
initialPageParam: 0,
|
|
1054
1054
|
getNextPageParam: () => undefined,
|
|
@@ -1060,11 +1060,11 @@ describe("useInfiniteQuery", () => {
|
|
|
1060
1060
|
)
|
|
1061
1061
|
|
|
1062
1062
|
await new Promise((r) => setTimeout(r, 20))
|
|
1063
|
-
expect(query!.data()?.pages).toEqual([
|
|
1063
|
+
expect(query!.data()?.pages).toEqual(['data-a'])
|
|
1064
1064
|
|
|
1065
|
-
key.set(
|
|
1065
|
+
key.set('b')
|
|
1066
1066
|
await new Promise((r) => setTimeout(r, 20))
|
|
1067
|
-
expect(query!.data()?.pages).toEqual([
|
|
1067
|
+
expect(query!.data()?.pages).toEqual(['data-b'])
|
|
1068
1068
|
unmount()
|
|
1069
1069
|
el.remove()
|
|
1070
1070
|
})
|
|
@@ -1072,21 +1072,21 @@ describe("useInfiniteQuery", () => {
|
|
|
1072
1072
|
|
|
1073
1073
|
// ─── useSuspenseInfiniteQuery ────────────────────────────────────────────────
|
|
1074
1074
|
|
|
1075
|
-
describe(
|
|
1075
|
+
describe('useSuspenseInfiniteQuery', () => {
|
|
1076
1076
|
let client: QueryClient
|
|
1077
1077
|
beforeEach(() => {
|
|
1078
1078
|
client = makeClient()
|
|
1079
1079
|
})
|
|
1080
1080
|
|
|
1081
|
-
it(
|
|
1081
|
+
it('returns all fine-grained signals and resolves to success', async () => {
|
|
1082
1082
|
let query: ReturnType<typeof useSuspenseInfiniteQuery<string>> | undefined
|
|
1083
|
-
const el = document.createElement(
|
|
1083
|
+
const el = document.createElement('div')
|
|
1084
1084
|
document.body.appendChild(el)
|
|
1085
1085
|
const unmount = mount(
|
|
1086
1086
|
<QueryClientProvider client={client}>
|
|
1087
1087
|
{() => {
|
|
1088
1088
|
query = useSuspenseInfiniteQuery(() => ({
|
|
1089
|
-
queryKey: [
|
|
1089
|
+
queryKey: ['sinf-1'],
|
|
1090
1090
|
queryFn: ({ pageParam }: { pageParam: number }) => Promise.resolve(`p${pageParam}`),
|
|
1091
1091
|
initialPageParam: 0,
|
|
1092
1092
|
getNextPageParam: (_l: string, _a: string[], lp: number) =>
|
|
@@ -1100,8 +1100,8 @@ describe("useSuspenseInfiniteQuery", () => {
|
|
|
1100
1100
|
|
|
1101
1101
|
await new Promise((r) => setTimeout(r, 20))
|
|
1102
1102
|
expect(query!.isSuccess()).toBe(true)
|
|
1103
|
-
expect(query!.status()).toBe(
|
|
1104
|
-
expect(query!.data()?.pages).toEqual([
|
|
1103
|
+
expect(query!.status()).toBe('success')
|
|
1104
|
+
expect(query!.data()?.pages).toEqual(['p0'])
|
|
1105
1105
|
expect(query!.error()).toBeNull()
|
|
1106
1106
|
expect(query!.isError()).toBe(false)
|
|
1107
1107
|
expect(query!.isFetching()).toBe(false)
|
|
@@ -1113,15 +1113,15 @@ describe("useSuspenseInfiniteQuery", () => {
|
|
|
1113
1113
|
el.remove()
|
|
1114
1114
|
})
|
|
1115
1115
|
|
|
1116
|
-
it(
|
|
1116
|
+
it('fetchNextPage and fetchPreviousPage work', async () => {
|
|
1117
1117
|
let query: ReturnType<typeof useSuspenseInfiniteQuery<string>> | undefined
|
|
1118
|
-
const el = document.createElement(
|
|
1118
|
+
const el = document.createElement('div')
|
|
1119
1119
|
document.body.appendChild(el)
|
|
1120
1120
|
const unmount = mount(
|
|
1121
1121
|
<QueryClientProvider client={client}>
|
|
1122
1122
|
{() => {
|
|
1123
1123
|
query = useSuspenseInfiniteQuery(() => ({
|
|
1124
|
-
queryKey: [
|
|
1124
|
+
queryKey: ['sinf-pages'],
|
|
1125
1125
|
queryFn: ({ pageParam }: { pageParam: number }) => Promise.resolve(`p${pageParam}`),
|
|
1126
1126
|
initialPageParam: 1,
|
|
1127
1127
|
getNextPageParam: (_l: string, _a: string[], lp: number) =>
|
|
@@ -1138,28 +1138,28 @@ describe("useSuspenseInfiniteQuery", () => {
|
|
|
1138
1138
|
await new Promise((r) => setTimeout(r, 20))
|
|
1139
1139
|
await query!.fetchNextPage()
|
|
1140
1140
|
await new Promise((r) => setTimeout(r, 20))
|
|
1141
|
-
expect(query!.data()?.pages).toContain(
|
|
1141
|
+
expect(query!.data()?.pages).toContain('p2')
|
|
1142
1142
|
|
|
1143
1143
|
await query!.fetchPreviousPage()
|
|
1144
1144
|
await new Promise((r) => setTimeout(r, 20))
|
|
1145
|
-
expect(query!.data()?.pages).toContain(
|
|
1145
|
+
expect(query!.data()?.pages).toContain('p0')
|
|
1146
1146
|
unmount()
|
|
1147
1147
|
el.remove()
|
|
1148
1148
|
})
|
|
1149
1149
|
|
|
1150
|
-
it(
|
|
1150
|
+
it('refetch works', async () => {
|
|
1151
1151
|
let callCount = 0
|
|
1152
1152
|
let query: ReturnType<typeof useSuspenseInfiniteQuery<string>> | undefined
|
|
1153
|
-
const el = document.createElement(
|
|
1153
|
+
const el = document.createElement('div')
|
|
1154
1154
|
document.body.appendChild(el)
|
|
1155
1155
|
const unmount = mount(
|
|
1156
1156
|
<QueryClientProvider client={client}>
|
|
1157
1157
|
{() => {
|
|
1158
1158
|
query = useSuspenseInfiniteQuery(() => ({
|
|
1159
|
-
queryKey: [
|
|
1159
|
+
queryKey: ['sinf-refetch'],
|
|
1160
1160
|
queryFn: () => {
|
|
1161
1161
|
callCount++
|
|
1162
|
-
return Promise.resolve(
|
|
1162
|
+
return Promise.resolve('d')
|
|
1163
1163
|
},
|
|
1164
1164
|
initialPageParam: 0,
|
|
1165
1165
|
getNextPageParam: () => undefined,
|
|
@@ -1179,16 +1179,16 @@ describe("useSuspenseInfiniteQuery", () => {
|
|
|
1179
1179
|
el.remove()
|
|
1180
1180
|
})
|
|
1181
1181
|
|
|
1182
|
-
it(
|
|
1182
|
+
it('result signal contains full observer result', async () => {
|
|
1183
1183
|
let query: ReturnType<typeof useSuspenseInfiniteQuery<string>> | undefined
|
|
1184
|
-
const el = document.createElement(
|
|
1184
|
+
const el = document.createElement('div')
|
|
1185
1185
|
document.body.appendChild(el)
|
|
1186
1186
|
const unmount = mount(
|
|
1187
1187
|
<QueryClientProvider client={client}>
|
|
1188
1188
|
{() => {
|
|
1189
1189
|
query = useSuspenseInfiniteQuery(() => ({
|
|
1190
|
-
queryKey: [
|
|
1191
|
-
queryFn: () => Promise.resolve(
|
|
1190
|
+
queryKey: ['sinf-result'],
|
|
1191
|
+
queryFn: () => Promise.resolve('v'),
|
|
1192
1192
|
initialPageParam: 0,
|
|
1193
1193
|
getNextPageParam: () => undefined,
|
|
1194
1194
|
}))
|
|
@@ -1199,21 +1199,21 @@ describe("useSuspenseInfiniteQuery", () => {
|
|
|
1199
1199
|
)
|
|
1200
1200
|
|
|
1201
1201
|
await new Promise((r) => setTimeout(r, 20))
|
|
1202
|
-
expect(query!.result().status).toBe(
|
|
1202
|
+
expect(query!.result().status).toBe('success')
|
|
1203
1203
|
unmount()
|
|
1204
1204
|
el.remove()
|
|
1205
1205
|
})
|
|
1206
1206
|
|
|
1207
|
-
it(
|
|
1208
|
-
const key = signal(
|
|
1207
|
+
it('reactive options update observer', async () => {
|
|
1208
|
+
const key = signal('x')
|
|
1209
1209
|
let query: ReturnType<typeof useSuspenseInfiniteQuery<string>> | undefined
|
|
1210
|
-
const el = document.createElement(
|
|
1210
|
+
const el = document.createElement('div')
|
|
1211
1211
|
document.body.appendChild(el)
|
|
1212
1212
|
const unmount = mount(
|
|
1213
1213
|
<QueryClientProvider client={client}>
|
|
1214
1214
|
{() => {
|
|
1215
1215
|
query = useSuspenseInfiniteQuery(() => ({
|
|
1216
|
-
queryKey: [
|
|
1216
|
+
queryKey: ['sinf-reactive', key()],
|
|
1217
1217
|
queryFn: () => Promise.resolve(`val-${key()}`),
|
|
1218
1218
|
initialPageParam: 0,
|
|
1219
1219
|
getNextPageParam: () => undefined,
|
|
@@ -1225,10 +1225,10 @@ describe("useSuspenseInfiniteQuery", () => {
|
|
|
1225
1225
|
)
|
|
1226
1226
|
|
|
1227
1227
|
await new Promise((r) => setTimeout(r, 20))
|
|
1228
|
-
expect(query!.data()?.pages).toEqual([
|
|
1229
|
-
key.set(
|
|
1228
|
+
expect(query!.data()?.pages).toEqual(['val-x'])
|
|
1229
|
+
key.set('y')
|
|
1230
1230
|
await new Promise((r) => setTimeout(r, 20))
|
|
1231
|
-
expect(query!.data()?.pages).toEqual([
|
|
1231
|
+
expect(query!.data()?.pages).toEqual(['val-y'])
|
|
1232
1232
|
unmount()
|
|
1233
1233
|
el.remove()
|
|
1234
1234
|
})
|
|
@@ -1236,22 +1236,22 @@ describe("useSuspenseInfiniteQuery", () => {
|
|
|
1236
1236
|
|
|
1237
1237
|
// ─── useSuspenseQuery — additional coverage ──────────────────────────────────
|
|
1238
1238
|
|
|
1239
|
-
describe(
|
|
1239
|
+
describe('useSuspenseQuery — additional', () => {
|
|
1240
1240
|
let client: QueryClient
|
|
1241
1241
|
beforeEach(() => {
|
|
1242
1242
|
client = makeClient()
|
|
1243
1243
|
})
|
|
1244
1244
|
|
|
1245
|
-
it(
|
|
1245
|
+
it('data is typed as TData (never undefined) after success', async () => {
|
|
1246
1246
|
let query: ReturnType<typeof useSuspenseQuery<{ name: string }>> | undefined
|
|
1247
|
-
const el = document.createElement(
|
|
1247
|
+
const el = document.createElement('div')
|
|
1248
1248
|
document.body.appendChild(el)
|
|
1249
1249
|
const unmount = mount(
|
|
1250
1250
|
<QueryClientProvider client={client}>
|
|
1251
1251
|
{() => {
|
|
1252
1252
|
query = useSuspenseQuery(() => ({
|
|
1253
|
-
queryKey: [
|
|
1254
|
-
queryFn: () => Promise.resolve({ name:
|
|
1253
|
+
queryKey: ['sq-data-type'],
|
|
1254
|
+
queryFn: () => Promise.resolve({ name: 'test' }),
|
|
1255
1255
|
}))
|
|
1256
1256
|
return null
|
|
1257
1257
|
}}
|
|
@@ -1260,30 +1260,30 @@ describe("useSuspenseQuery — additional", () => {
|
|
|
1260
1260
|
)
|
|
1261
1261
|
|
|
1262
1262
|
await new Promise((r) => setTimeout(r, 20))
|
|
1263
|
-
expect(query!.data().name).toBe(
|
|
1263
|
+
expect(query!.data().name).toBe('test')
|
|
1264
1264
|
expect(query!.isSuccess()).toBe(true)
|
|
1265
1265
|
expect(query!.isFetching()).toBe(false)
|
|
1266
1266
|
expect(query!.isError()).toBe(false)
|
|
1267
1267
|
expect(query!.error()).toBeNull()
|
|
1268
|
-
expect(query!.status()).toBe(
|
|
1269
|
-
expect(query!.result().status).toBe(
|
|
1268
|
+
expect(query!.status()).toBe('success')
|
|
1269
|
+
expect(query!.result().status).toBe('success')
|
|
1270
1270
|
unmount()
|
|
1271
1271
|
el.remove()
|
|
1272
1272
|
})
|
|
1273
1273
|
|
|
1274
|
-
it(
|
|
1274
|
+
it('refetch re-fetches the query', async () => {
|
|
1275
1275
|
let callCount = 0
|
|
1276
1276
|
let query: ReturnType<typeof useSuspenseQuery<string>> | undefined
|
|
1277
|
-
const el = document.createElement(
|
|
1277
|
+
const el = document.createElement('div')
|
|
1278
1278
|
document.body.appendChild(el)
|
|
1279
1279
|
const unmount = mount(
|
|
1280
1280
|
<QueryClientProvider client={client}>
|
|
1281
1281
|
{() => {
|
|
1282
1282
|
query = useSuspenseQuery(() => ({
|
|
1283
|
-
queryKey: [
|
|
1283
|
+
queryKey: ['sq-refetch'],
|
|
1284
1284
|
queryFn: () => {
|
|
1285
1285
|
callCount++
|
|
1286
|
-
return Promise.resolve(
|
|
1286
|
+
return Promise.resolve('ok')
|
|
1287
1287
|
},
|
|
1288
1288
|
}))
|
|
1289
1289
|
return null
|
|
@@ -1301,16 +1301,16 @@ describe("useSuspenseQuery — additional", () => {
|
|
|
1301
1301
|
el.remove()
|
|
1302
1302
|
})
|
|
1303
1303
|
|
|
1304
|
-
it(
|
|
1305
|
-
const key = signal(
|
|
1304
|
+
it('reactive key changes trigger re-fetch', async () => {
|
|
1305
|
+
const key = signal('k1')
|
|
1306
1306
|
let query: ReturnType<typeof useSuspenseQuery<string>> | undefined
|
|
1307
|
-
const el = document.createElement(
|
|
1307
|
+
const el = document.createElement('div')
|
|
1308
1308
|
document.body.appendChild(el)
|
|
1309
1309
|
const unmount = mount(
|
|
1310
1310
|
<QueryClientProvider client={client}>
|
|
1311
1311
|
{() => {
|
|
1312
1312
|
query = useSuspenseQuery(() => ({
|
|
1313
|
-
queryKey: [
|
|
1313
|
+
queryKey: ['sq-reactive', key()],
|
|
1314
1314
|
queryFn: () => Promise.resolve(`data-${key()}`),
|
|
1315
1315
|
}))
|
|
1316
1316
|
return null
|
|
@@ -1320,19 +1320,19 @@ describe("useSuspenseQuery — additional", () => {
|
|
|
1320
1320
|
)
|
|
1321
1321
|
|
|
1322
1322
|
await new Promise((r) => setTimeout(r, 20))
|
|
1323
|
-
expect(query!.data()).toBe(
|
|
1323
|
+
expect(query!.data()).toBe('data-k1')
|
|
1324
1324
|
|
|
1325
|
-
key.set(
|
|
1325
|
+
key.set('k2')
|
|
1326
1326
|
await new Promise((r) => setTimeout(r, 20))
|
|
1327
|
-
expect(query!.data()).toBe(
|
|
1327
|
+
expect(query!.data()).toBe('data-k2')
|
|
1328
1328
|
unmount()
|
|
1329
1329
|
el.remove()
|
|
1330
1330
|
})
|
|
1331
1331
|
|
|
1332
|
-
it(
|
|
1332
|
+
it('captures error state in suspense query', async () => {
|
|
1333
1333
|
const { promise, reject } = deferred<never>()
|
|
1334
1334
|
|
|
1335
|
-
const el = document.createElement(
|
|
1335
|
+
const el = document.createElement('div')
|
|
1336
1336
|
document.body.appendChild(el)
|
|
1337
1337
|
|
|
1338
1338
|
let query: ReturnType<typeof useSuspenseQuery> | undefined
|
|
@@ -1340,7 +1340,7 @@ describe("useSuspenseQuery — additional", () => {
|
|
|
1340
1340
|
<QueryClientProvider client={client}>
|
|
1341
1341
|
{() => {
|
|
1342
1342
|
query = useSuspenseQuery(() => ({
|
|
1343
|
-
queryKey: [
|
|
1343
|
+
queryKey: ['sq-rethrow2'],
|
|
1344
1344
|
queryFn: () => promise,
|
|
1345
1345
|
}))
|
|
1346
1346
|
return null
|
|
@@ -1349,7 +1349,7 @@ describe("useSuspenseQuery — additional", () => {
|
|
|
1349
1349
|
el,
|
|
1350
1350
|
)
|
|
1351
1351
|
|
|
1352
|
-
reject(new Error(
|
|
1352
|
+
reject(new Error('rethrow test'))
|
|
1353
1353
|
await promise.catch(() => {
|
|
1354
1354
|
/* expected */
|
|
1355
1355
|
})
|
|
@@ -1360,22 +1360,22 @@ describe("useSuspenseQuery — additional", () => {
|
|
|
1360
1360
|
el.remove()
|
|
1361
1361
|
})
|
|
1362
1362
|
|
|
1363
|
-
it(
|
|
1363
|
+
it('QuerySuspense handles fallback as function', async () => {
|
|
1364
1364
|
let query: ReturnType<typeof useSuspenseQuery<string>> | undefined
|
|
1365
|
-
const el = document.createElement(
|
|
1365
|
+
const el = document.createElement('div')
|
|
1366
1366
|
document.body.appendChild(el)
|
|
1367
1367
|
const unmount = mount(
|
|
1368
1368
|
<QueryClientProvider client={client}>
|
|
1369
1369
|
{() => {
|
|
1370
1370
|
query = useSuspenseQuery(() => ({
|
|
1371
|
-
queryKey: [
|
|
1371
|
+
queryKey: ['sq-fn-fallback'],
|
|
1372
1372
|
queryFn: () =>
|
|
1373
1373
|
new Promise(() => {
|
|
1374
1374
|
/* never resolves */
|
|
1375
1375
|
}),
|
|
1376
1376
|
}))
|
|
1377
1377
|
return (
|
|
1378
|
-
<QuerySuspense query={query!} fallback={() =>
|
|
1378
|
+
<QuerySuspense query={query!} fallback={() => 'loading fn'}>
|
|
1379
1379
|
{() => null}
|
|
1380
1380
|
</QuerySuspense>
|
|
1381
1381
|
)
|
|
@@ -1394,11 +1394,11 @@ describe("useSuspenseQuery — additional", () => {
|
|
|
1394
1394
|
|
|
1395
1395
|
// ─── Coverage gap tests ──────────────────────────────────────────────────────
|
|
1396
1396
|
|
|
1397
|
-
describe(
|
|
1398
|
-
it(
|
|
1397
|
+
describe('QueryClientProvider — VNode children branch', () => {
|
|
1398
|
+
it('renders when children is a VNode (not a function)', () => {
|
|
1399
1399
|
const client = makeClient()
|
|
1400
1400
|
let received: QueryClient | null = null
|
|
1401
|
-
const el = document.createElement(
|
|
1401
|
+
const el = document.createElement('div')
|
|
1402
1402
|
document.body.appendChild(el)
|
|
1403
1403
|
// Pass children as a direct VNode, not wrapped in a function
|
|
1404
1404
|
const unmount = mount(
|
|
@@ -1415,10 +1415,10 @@ describe("QueryClientProvider — VNode children branch", () => {
|
|
|
1415
1415
|
el.remove()
|
|
1416
1416
|
})
|
|
1417
1417
|
|
|
1418
|
-
it(
|
|
1418
|
+
it('renders when children is passed as a function returning VNode', () => {
|
|
1419
1419
|
const client = makeClient()
|
|
1420
1420
|
let received: QueryClient | null = null
|
|
1421
|
-
const el = document.createElement(
|
|
1421
|
+
const el = document.createElement('div')
|
|
1422
1422
|
document.body.appendChild(el)
|
|
1423
1423
|
const unmount = mount(
|
|
1424
1424
|
<QueryClientProvider client={client}>
|
|
@@ -1437,15 +1437,15 @@ describe("QueryClientProvider — VNode children branch", () => {
|
|
|
1437
1437
|
})
|
|
1438
1438
|
})
|
|
1439
1439
|
|
|
1440
|
-
describe(
|
|
1440
|
+
describe('useMutation — mutateAsync', () => {
|
|
1441
1441
|
let client: QueryClient
|
|
1442
1442
|
beforeEach(() => {
|
|
1443
1443
|
client = makeClient()
|
|
1444
1444
|
})
|
|
1445
1445
|
|
|
1446
|
-
it(
|
|
1446
|
+
it('mutateAsync returns a promise that resolves with data', async () => {
|
|
1447
1447
|
let mut: ReturnType<typeof useMutation<string, Error, string>> | undefined
|
|
1448
|
-
const el = document.createElement(
|
|
1448
|
+
const el = document.createElement('div')
|
|
1449
1449
|
document.body.appendChild(el)
|
|
1450
1450
|
const unmount = mount(
|
|
1451
1451
|
<QueryClientProvider client={client}>
|
|
@@ -1459,24 +1459,24 @@ describe("useMutation — mutateAsync", () => {
|
|
|
1459
1459
|
el,
|
|
1460
1460
|
)
|
|
1461
1461
|
|
|
1462
|
-
const result = await mut!.mutateAsync(
|
|
1463
|
-
expect(result).toBe(
|
|
1462
|
+
const result = await mut!.mutateAsync('test')
|
|
1463
|
+
expect(result).toBe('async-result:test')
|
|
1464
1464
|
expect(mut!.isSuccess()).toBe(true)
|
|
1465
|
-
expect(mut!.data()).toBe(
|
|
1465
|
+
expect(mut!.data()).toBe('async-result:test')
|
|
1466
1466
|
unmount()
|
|
1467
1467
|
el.remove()
|
|
1468
1468
|
})
|
|
1469
1469
|
|
|
1470
|
-
it(
|
|
1470
|
+
it('mutateAsync rejects when mutation fails', async () => {
|
|
1471
1471
|
let mut: ReturnType<typeof useMutation<string, Error, void>> | undefined
|
|
1472
|
-
const el = document.createElement(
|
|
1472
|
+
const el = document.createElement('div')
|
|
1473
1473
|
document.body.appendChild(el)
|
|
1474
1474
|
const unmount = mount(
|
|
1475
1475
|
<QueryClientProvider client={client}>
|
|
1476
1476
|
{() => {
|
|
1477
1477
|
mut = useMutation<string, Error, void>({
|
|
1478
1478
|
mutationFn: async () => {
|
|
1479
|
-
throw new Error(
|
|
1479
|
+
throw new Error('async-fail')
|
|
1480
1480
|
},
|
|
1481
1481
|
})
|
|
1482
1482
|
return null
|
|
@@ -1485,31 +1485,31 @@ describe("useMutation — mutateAsync", () => {
|
|
|
1485
1485
|
el,
|
|
1486
1486
|
)
|
|
1487
1487
|
|
|
1488
|
-
await expect(mut!.mutateAsync(undefined)).rejects.toThrow(
|
|
1488
|
+
await expect(mut!.mutateAsync(undefined)).rejects.toThrow('async-fail')
|
|
1489
1489
|
await new Promise((r) => setTimeout(r, 0))
|
|
1490
1490
|
expect(mut!.isError()).toBe(true)
|
|
1491
|
-
expect((mut!.error() as Error).message).toBe(
|
|
1491
|
+
expect((mut!.error() as Error).message).toBe('async-fail')
|
|
1492
1492
|
unmount()
|
|
1493
1493
|
el.remove()
|
|
1494
1494
|
})
|
|
1495
1495
|
})
|
|
1496
1496
|
|
|
1497
|
-
describe(
|
|
1497
|
+
describe('useQuery — refetch', () => {
|
|
1498
1498
|
let client: QueryClient
|
|
1499
1499
|
beforeEach(() => {
|
|
1500
1500
|
client = makeClient()
|
|
1501
1501
|
})
|
|
1502
1502
|
|
|
1503
|
-
it(
|
|
1503
|
+
it('refetch re-fetches the query and returns updated result', async () => {
|
|
1504
1504
|
let callCount = 0
|
|
1505
1505
|
let query: ReturnType<typeof useQuery<string>> | undefined
|
|
1506
|
-
const el = document.createElement(
|
|
1506
|
+
const el = document.createElement('div')
|
|
1507
1507
|
document.body.appendChild(el)
|
|
1508
1508
|
const unmount = mount(
|
|
1509
1509
|
<QueryClientProvider client={client}>
|
|
1510
1510
|
{() => {
|
|
1511
1511
|
query = useQuery(() => ({
|
|
1512
|
-
queryKey: [
|
|
1512
|
+
queryKey: ['refetch-test'],
|
|
1513
1513
|
queryFn: async () => {
|
|
1514
1514
|
callCount++
|
|
1515
1515
|
return `call-${callCount}`
|
|
@@ -1522,24 +1522,24 @@ describe("useQuery — refetch", () => {
|
|
|
1522
1522
|
)
|
|
1523
1523
|
|
|
1524
1524
|
await new Promise((r) => setTimeout(r, 10))
|
|
1525
|
-
expect(query!.data()).toBe(
|
|
1525
|
+
expect(query!.data()).toBe('call-1')
|
|
1526
1526
|
|
|
1527
1527
|
const result = await query!.refetch()
|
|
1528
1528
|
await new Promise((r) => setTimeout(r, 10))
|
|
1529
1529
|
expect(callCount).toBe(2)
|
|
1530
|
-
expect(result.data).toBe(
|
|
1531
|
-
expect(query!.data()).toBe(
|
|
1530
|
+
expect(result.data).toBe('call-2')
|
|
1531
|
+
expect(query!.data()).toBe('call-2')
|
|
1532
1532
|
unmount()
|
|
1533
1533
|
el.remove()
|
|
1534
1534
|
})
|
|
1535
1535
|
})
|
|
1536
1536
|
|
|
1537
|
-
describe(
|
|
1538
|
-
it(
|
|
1537
|
+
describe('QueryErrorResetBoundary — VNode children branch', () => {
|
|
1538
|
+
it('renders when children is a VNode (not a function)', async () => {
|
|
1539
1539
|
const client = makeClient()
|
|
1540
1540
|
let resetFn: (() => void) | undefined
|
|
1541
1541
|
|
|
1542
|
-
const el = document.createElement(
|
|
1542
|
+
const el = document.createElement('div')
|
|
1543
1543
|
document.body.appendChild(el)
|
|
1544
1544
|
// Pass children as a direct VNode, not a function
|
|
1545
1545
|
const unmount = mount(
|
|
@@ -1562,16 +1562,16 @@ describe("QueryErrorResetBoundary — VNode children branch", () => {
|
|
|
1562
1562
|
})
|
|
1563
1563
|
})
|
|
1564
1564
|
|
|
1565
|
-
describe(
|
|
1565
|
+
describe('useSuspenseQuery — error without handler (QuerySuspense throw branch)', () => {
|
|
1566
1566
|
let client: QueryClient
|
|
1567
1567
|
beforeEach(() => {
|
|
1568
1568
|
client = makeClient()
|
|
1569
1569
|
})
|
|
1570
1570
|
|
|
1571
|
-
it(
|
|
1571
|
+
it('QuerySuspense throws error when no error handler is provided', async () => {
|
|
1572
1572
|
const { promise, reject } = deferred<never>()
|
|
1573
1573
|
|
|
1574
|
-
const el = document.createElement(
|
|
1574
|
+
const el = document.createElement('div')
|
|
1575
1575
|
document.body.appendChild(el)
|
|
1576
1576
|
|
|
1577
1577
|
const _thrownError: unknown = null
|
|
@@ -1581,7 +1581,7 @@ describe("useSuspenseQuery — error without handler (QuerySuspense throw branch
|
|
|
1581
1581
|
<QueryClientProvider client={client}>
|
|
1582
1582
|
{() => {
|
|
1583
1583
|
query = useSuspenseQuery(() => ({
|
|
1584
|
-
queryKey: [
|
|
1584
|
+
queryKey: ['sq-throw-no-handler'],
|
|
1585
1585
|
queryFn: () => promise,
|
|
1586
1586
|
}))
|
|
1587
1587
|
// QuerySuspense with NO error handler — should throw
|
|
@@ -1595,7 +1595,7 @@ describe("useSuspenseQuery — error without handler (QuerySuspense throw branch
|
|
|
1595
1595
|
el,
|
|
1596
1596
|
)
|
|
1597
1597
|
|
|
1598
|
-
reject(new Error(
|
|
1598
|
+
reject(new Error('unhandled suspense error'))
|
|
1599
1599
|
await promise.catch(() => {
|
|
1600
1600
|
/* expected */
|
|
1601
1601
|
})
|
|
@@ -1603,7 +1603,7 @@ describe("useSuspenseQuery — error without handler (QuerySuspense throw branch
|
|
|
1603
1603
|
|
|
1604
1604
|
// The error state should be set on the query
|
|
1605
1605
|
expect(query!.isError()).toBe(true)
|
|
1606
|
-
expect((query!.error() as Error).message).toBe(
|
|
1606
|
+
expect((query!.error() as Error).message).toBe('unhandled suspense error')
|
|
1607
1607
|
|
|
1608
1608
|
// Verify that calling the QuerySuspense render function directly would throw
|
|
1609
1609
|
// by checking the query is in error state without an error handler
|
|
@@ -1612,10 +1612,10 @@ describe("useSuspenseQuery — error without handler (QuerySuspense throw branch
|
|
|
1612
1612
|
el.remove()
|
|
1613
1613
|
})
|
|
1614
1614
|
|
|
1615
|
-
it(
|
|
1615
|
+
it('QuerySuspense re-throws error to be caught externally', async () => {
|
|
1616
1616
|
const { promise, reject } = deferred<never>()
|
|
1617
1617
|
|
|
1618
|
-
const el = document.createElement(
|
|
1618
|
+
const el = document.createElement('div')
|
|
1619
1619
|
document.body.appendChild(el)
|
|
1620
1620
|
|
|
1621
1621
|
let query: ReturnType<typeof useSuspenseQuery> | undefined
|
|
@@ -1624,7 +1624,7 @@ describe("useSuspenseQuery — error without handler (QuerySuspense throw branch
|
|
|
1624
1624
|
<QueryClientProvider client={client}>
|
|
1625
1625
|
{() => {
|
|
1626
1626
|
query = useSuspenseQuery(() => ({
|
|
1627
|
-
queryKey: [
|
|
1627
|
+
queryKey: ['sq-rethrow-direct'],
|
|
1628
1628
|
queryFn: () => promise,
|
|
1629
1629
|
}))
|
|
1630
1630
|
return null
|
|
@@ -1633,7 +1633,7 @@ describe("useSuspenseQuery — error without handler (QuerySuspense throw branch
|
|
|
1633
1633
|
el,
|
|
1634
1634
|
)
|
|
1635
1635
|
|
|
1636
|
-
reject(new Error(
|
|
1636
|
+
reject(new Error('direct throw'))
|
|
1637
1637
|
await promise.catch(() => {
|
|
1638
1638
|
/* expected */
|
|
1639
1639
|
})
|
|
@@ -1643,11 +1643,11 @@ describe("useSuspenseQuery — error without handler (QuerySuspense throw branch
|
|
|
1643
1643
|
expect(() => {
|
|
1644
1644
|
const renderFn = QuerySuspense({
|
|
1645
1645
|
query: query!,
|
|
1646
|
-
fallback:
|
|
1646
|
+
fallback: 'loading',
|
|
1647
1647
|
children: () => null,
|
|
1648
1648
|
}) as () => unknown
|
|
1649
1649
|
renderFn()
|
|
1650
|
-
}).toThrow(
|
|
1650
|
+
}).toThrow('direct throw')
|
|
1651
1651
|
|
|
1652
1652
|
unmount()
|
|
1653
1653
|
el.remove()
|