@tanstack/solid-query 5.0.0-alpha.20 → 5.0.0-alpha.22

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.
@@ -158,10 +158,6 @@ describe('useQueries', () => {
158
158
  expectTypeNotAny(a)
159
159
  return a.toLowerCase()
160
160
  },
161
- onSuccess: (a) => {
162
- expectType<string>(a)
163
- expectTypeNotAny(a)
164
- },
165
161
  placeholderData: 'string',
166
162
  // @ts-expect-error (initialData: string)
167
163
  initialData: 123,
@@ -174,14 +170,6 @@ describe('useQueries', () => {
174
170
  expectTypeNotAny(a)
175
171
  return parseInt(a)
176
172
  },
177
- onSuccess: (a) => {
178
- expectType<number>(a)
179
- expectTypeNotAny(a)
180
- },
181
- onError: (e) => {
182
- expectType<boolean>(e)
183
- expectTypeNotAny(e)
184
- },
185
173
  placeholderData: 'string',
186
174
  // @ts-expect-error (initialData: string)
187
175
  initialData: 123,
@@ -319,10 +307,6 @@ describe('useQueries', () => {
319
307
  expectTypeNotAny(a)
320
308
  return a.toLowerCase()
321
309
  },
322
- onSuccess: (a) => {
323
- expectType<string>(a)
324
- expectTypeNotAny(a)
325
- },
326
310
  placeholderData: 'string',
327
311
  // @ts-expect-error (initialData: string)
328
312
  initialData: 123,
@@ -335,14 +319,6 @@ describe('useQueries', () => {
335
319
  expectTypeNotAny(a)
336
320
  return parseInt(a)
337
321
  },
338
- onSuccess: (a) => {
339
- expectType<number>(a)
340
- expectTypeNotAny(a)
341
- },
342
- onError: (e) => {
343
- expectType<boolean>(e)
344
- expectTypeNotAny(e)
345
- },
346
322
  placeholderData: 'string',
347
323
  // @ts-expect-error (initialData: string)
348
324
  initialData: 123,
@@ -436,60 +412,38 @@ describe('useQueries', () => {
436
412
  ],
437
413
  }))
438
414
 
439
- // select / onSuccess / onSettled params are "indirectly" enforced
415
+ // select params are "indirectly" enforced
440
416
  createQueries(() => ({
441
417
  queries: [
442
418
  // unfortunately TS will not suggest the type for you
443
419
  {
444
420
  queryKey: key1,
445
421
  queryFn: () => 'string',
446
- // @ts-expect-error (noImplicitAny)
447
- onSuccess: (a) => null,
448
- // @ts-expect-error (noImplicitAny)
449
- onSettled: (a) => null,
450
422
  },
451
423
  // however you can add a type to the callback
452
424
  {
453
425
  queryKey: key2,
454
426
  queryFn: () => 'string',
455
- onSuccess: (a: string) => {
456
- expectType<string>(a)
457
- expectTypeNotAny(a)
458
- },
459
- onSettled: (a: string | undefined) => {
460
- expectType<string | undefined>(a)
461
- expectTypeNotAny(a)
462
- },
463
427
  },
464
428
  // the type you do pass is enforced
465
429
  {
466
430
  queryKey: key3,
467
431
  queryFn: () => 'string',
468
- // @ts-expect-error (only accepts string)
469
- onSuccess: (a: number) => null,
470
432
  },
471
433
  {
472
434
  queryKey: key4,
473
435
  queryFn: () => 'string',
474
436
  select: (a: string) => parseInt(a),
475
- // @ts-expect-error (select is defined => only accepts number)
476
- onSuccess: (a: string) => null,
477
- onSettled: (a: number | undefined) => {
478
- expectType<number | undefined>(a)
479
- expectTypeNotAny(a)
480
- },
481
437
  },
482
438
  ],
483
439
  }))
484
440
 
485
441
  // callbacks are also indirectly enforced with Array.map
486
442
  createQueries(() => ({
487
- // @ts-expect-error (onSuccess only accepts string)
488
443
  queries: Array(50).map((_, i) => ({
489
444
  queryKey: ['key', i] as const,
490
445
  queryFn: () => i + 10,
491
446
  select: (data: number) => data.toString(),
492
- onSuccess: (_data: number) => null,
493
447
  })),
494
448
  }))
495
449
 
@@ -498,7 +452,6 @@ describe('useQueries', () => {
498
452
  queryKey: ['key', i] as const,
499
453
  queryFn: () => i + 10,
500
454
  select: (data: number) => data.toString(),
501
- onSuccess: (_data: string) => null,
502
455
  })),
503
456
  }))
504
457
 
@@ -508,32 +461,15 @@ describe('useQueries', () => {
508
461
  {
509
462
  queryKey: key1,
510
463
  queryFn: () => 'string',
511
- // @ts-expect-error (noImplicitAny)
512
- onSuccess: (a) => null,
513
- // @ts-expect-error (noImplicitAny)
514
- onSettled: (a) => null,
515
464
  },
516
465
  {
517
466
  queryKey: key2,
518
467
  queryFn: () => 'string',
519
- onSuccess: (a: string) => {
520
- expectType<string>(a)
521
- expectTypeNotAny(a)
522
- },
523
- onSettled: (a: string | undefined) => {
524
- expectType<string | undefined>(a)
525
- expectTypeNotAny(a)
526
- },
527
468
  },
528
469
  {
529
470
  queryKey: key4,
530
471
  queryFn: () => 'string',
531
472
  select: (a: string) => parseInt(a),
532
- onSuccess: (_a: number) => null,
533
- onSettled: (a: number | undefined) => {
534
- expectType<number | undefined>(a)
535
- expectTypeNotAny(a)
536
- },
537
473
  },
538
474
  ],
539
475
  }))
@@ -547,12 +483,6 @@ describe('useQueries', () => {
547
483
  {
548
484
  queryKey: key1,
549
485
  queryFn: () => Promise.resolve('string'),
550
- onSuccess: (a: string) => {
551
- expectType<string>(a)
552
- expectTypeNotAny(a)
553
- },
554
- // @ts-expect-error (refuses to accept a Promise)
555
- onSettled: (a: Promise<string>) => null,
556
486
  },
557
487
  ],
558
488
  }))
@@ -658,11 +588,10 @@ describe('useQueries', () => {
658
588
  queries: queries.map(
659
589
  // no need to type the mapped query
660
590
  (query) => {
661
- const { queryFn: fn, queryKey: key, onError: err } = query
591
+ const { queryFn: fn, queryKey: key } = query
662
592
  expectType<QueryFunction<TQueryFnData, TQueryKey> | undefined>(fn)
663
593
  return {
664
594
  queryKey: key,
665
- onError: err,
666
595
  queryFn: fn
667
596
  ? (ctx: QueryFunctionContext<TQueryKey>) => {
668
597
  expectType<TQueryKey>(ctx.queryKey)
@@ -80,21 +80,17 @@ describe('createQuery', () => {
80
80
  createQuery(() => ({
81
81
  queryKey: [key],
82
82
  queryFn: async () => true,
83
- onSuccess: (data) => expectType<boolean>(data),
84
- onSettled: (data) => expectType<boolean | undefined>(data),
85
83
  }))
86
84
 
87
85
  // it should be possible to specify a union type as result type
88
86
  const unionTypeSync = createQuery(() => ({
89
87
  queryKey: key,
90
88
  queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
91
- onSuccess: (data) => expectType<'a' | 'b'>(data),
92
89
  }))
93
90
  expectType<'a' | 'b' | undefined>(unionTypeSync.data)
94
91
  const unionTypeAsync = createQuery<'a' | 'b'>(() => ({
95
92
  queryKey: key,
96
93
  queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
97
- onSuccess: (data) => expectType<'a' | 'b'>(data),
98
94
  }))
99
95
  expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
100
96
 
@@ -491,241 +487,6 @@ describe('createQuery', () => {
491
487
  })
492
488
  })
493
489
 
494
- it('should call onSuccess after a query has been fetched', async () => {
495
- const key = queryKey()
496
- const states: CreateQueryResult<string>[] = []
497
- const onSuccess = vi.fn()
498
-
499
- function Page() {
500
- const state = createQuery(() => ({
501
- queryKey: key,
502
- queryFn: async () => {
503
- await sleep(10)
504
- return 'data'
505
- },
506
- onSuccess,
507
- }))
508
- createRenderEffect(() => {
509
- states.push({ ...state })
510
- })
511
- return <div>data: {state.data}</div>
512
- }
513
-
514
- render(() => (
515
- <QueryClientProvider client={queryClient}>
516
- <Page />
517
- </QueryClientProvider>
518
- ))
519
-
520
- await screen.findByText('data: data')
521
- expect(states.length).toBe(2)
522
- expect(onSuccess).toHaveBeenCalledTimes(1)
523
- expect(onSuccess).toHaveBeenCalledWith('data')
524
- })
525
-
526
- it('should call onSuccess after a disabled query has been fetched', async () => {
527
- const key = queryKey()
528
- const states: CreateQueryResult<string>[] = []
529
- const onSuccess = vi.fn()
530
-
531
- function Page() {
532
- const state = createQuery(() => ({
533
- queryKey: key,
534
- queryFn: () => 'data',
535
- enabled: false,
536
- onSuccess,
537
- }))
538
-
539
- createRenderEffect(() => {
540
- states.push({ ...state })
541
- })
542
-
543
- createEffect(() => {
544
- const refetch = state.refetch
545
- setActTimeout(() => {
546
- refetch()
547
- }, 10)
548
- })
549
-
550
- return null
551
- }
552
-
553
- render(() => (
554
- <QueryClientProvider client={queryClient}>
555
- <Page />
556
- </QueryClientProvider>
557
- ))
558
-
559
- await sleep(50)
560
- expect(onSuccess).toHaveBeenCalledTimes(1)
561
- expect(onSuccess).toHaveBeenCalledWith('data')
562
- })
563
-
564
- it('should not call onSuccess if a component has unmounted', async () => {
565
- const key = queryKey()
566
- const states: CreateQueryResult<string>[] = []
567
- const onSuccess = vi.fn()
568
-
569
- function Page() {
570
- const [show, setShow] = createSignal(true)
571
-
572
- createEffect(() => {
573
- setShow(false)
574
- })
575
- return <>{show() && <Component />}</>
576
- }
577
-
578
- function Component() {
579
- const state = createQuery(() => ({
580
- queryKey: key,
581
- queryFn: async () => {
582
- await sleep(10)
583
- return 'data'
584
- },
585
- onSuccess,
586
- }))
587
- createRenderEffect(() => {
588
- states.push({ ...state })
589
- })
590
- return null
591
- }
592
-
593
- render(() => (
594
- <QueryClientProvider client={queryClient}>
595
- <Page />
596
- </QueryClientProvider>
597
- ))
598
-
599
- await sleep(50)
600
- expect(states.length).toBe(1)
601
- expect(onSuccess).toHaveBeenCalledTimes(0)
602
- })
603
-
604
- it('should call onError after a query has been fetched with an error', async () => {
605
- const key = queryKey()
606
- const states: CreateQueryResult<unknown>[] = []
607
- const onError = vi.fn()
608
-
609
- function Page() {
610
- const state = createQuery(() => ({
611
- queryKey: key,
612
- queryFn: () => Promise.reject(new Error('error')),
613
- retry: false,
614
- onError,
615
- }))
616
-
617
- createRenderEffect(() => {
618
- states.push({ ...state })
619
- })
620
-
621
- return null
622
- }
623
-
624
- render(() => (
625
- <QueryClientProvider client={queryClient}>
626
- <Page />
627
- </QueryClientProvider>
628
- ))
629
-
630
- await sleep(10)
631
- expect(states.length).toBe(2)
632
- expect(onError).toHaveBeenCalledTimes(1)
633
- expect(onError).toHaveBeenCalledWith(new Error('error'))
634
- })
635
-
636
- it('should not call onError when receiving a CancelledError', async () => {
637
- const key = queryKey()
638
- const onError = vi.fn()
639
-
640
- function Page() {
641
- const state = createQuery(() => ({
642
- queryKey: key,
643
- queryFn: async () => {
644
- await sleep(10)
645
- return 23
646
- },
647
- onError,
648
- }))
649
- return (
650
- <span>
651
- status: {state.status}, fetchStatus: {state.fetchStatus}
652
- </span>
653
- )
654
- }
655
-
656
- render(() => (
657
- <QueryClientProvider client={queryClient}>
658
- <Page />
659
- </QueryClientProvider>
660
- ))
661
-
662
- await sleep(5)
663
- await queryClient.cancelQueries({ queryKey: key })
664
- // query cancellation will reset the query to it's initial state
665
- await waitFor(() => screen.getByText('status: pending, fetchStatus: idle'))
666
- expect(onError).not.toHaveBeenCalled()
667
- })
668
-
669
- it('should call onSettled after a query has been fetched', async () => {
670
- const key = queryKey()
671
- const states: CreateQueryResult<string>[] = []
672
- const onSettled = vi.fn()
673
-
674
- function Page() {
675
- const state = createQuery(() => ({
676
- queryKey: key,
677
- queryFn: () => 'data',
678
- onSettled,
679
- }))
680
-
681
- createRenderEffect(() => {
682
- states.push({ ...state })
683
- })
684
- return null
685
- }
686
-
687
- render(() => (
688
- <QueryClientProvider client={queryClient}>
689
- <Page />
690
- </QueryClientProvider>
691
- ))
692
-
693
- await sleep(10)
694
- expect(states.length).toBe(2)
695
- expect(onSettled).toHaveBeenCalledTimes(1)
696
- expect(onSettled).toHaveBeenCalledWith('data', null)
697
- })
698
-
699
- it('should call onSettled after a query has been fetched with an error', async () => {
700
- const key = queryKey()
701
- const states: CreateQueryResult<string>[] = []
702
- const onSettled = vi.fn()
703
-
704
- function Page() {
705
- const state = createQuery(() => ({
706
- queryKey: key,
707
- queryFn: () => Promise.reject<unknown>('error'),
708
- retry: false,
709
- onSettled,
710
- }))
711
- createRenderEffect(() => {
712
- states.push({ ...state })
713
- })
714
- return null
715
- }
716
-
717
- render(() => (
718
- <QueryClientProvider client={queryClient}>
719
- <Page />
720
- </QueryClientProvider>
721
- ))
722
-
723
- await sleep(10)
724
- expect(states.length).toBe(2)
725
- expect(onSettled).toHaveBeenCalledTimes(1)
726
- expect(onSettled).toHaveBeenCalledWith(undefined, 'error')
727
- })
728
-
729
490
  it('should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', async () => {
730
491
  const key = queryKey()
731
492
  let fetchCount = 0
@@ -2274,56 +2035,6 @@ describe('createQuery', () => {
2274
2035
  expect(renders).toBe(1)
2275
2036
  })
2276
2037
 
2277
- it('should batch re-renders including hook callbacks', async () => {
2278
- const key = queryKey()
2279
-
2280
- let renders = 0
2281
- let callbackCount = 0
2282
-
2283
- const queryFn = async () => {
2284
- await sleep(10)
2285
- return 'data'
2286
- }
2287
-
2288
- function Page() {
2289
- const [count, setCount] = createSignal(0)
2290
- createQuery(() => ({
2291
- queryKey: key,
2292
- queryFn,
2293
- onSuccess: () => {
2294
- setCount((x) => x + 1)
2295
- },
2296
- }))
2297
- createQuery(() => ({
2298
- queryKey: key,
2299
- queryFn,
2300
- onSuccess: () => {
2301
- setCount((x) => x + 1)
2302
- },
2303
- }))
2304
-
2305
- createEffect(() => {
2306
- renders++
2307
- callbackCount = count()
2308
- })
2309
-
2310
- return <div>count: {count()}</div>
2311
- }
2312
-
2313
- render(() => (
2314
- <QueryClientProvider client={queryClient}>
2315
- <Page />
2316
- </QueryClientProvider>
2317
- ))
2318
-
2319
- await waitFor(() => screen.getByText('count: 2'))
2320
-
2321
- // Should be 3 instead of 5
2322
- expect(renders).toBe(3)
2323
- // Both callbacks should have been executed
2324
- expect(callbackCount).toBe(2)
2325
- })
2326
-
2327
2038
  it('should render latest data even if react has discarded certain renders', async () => {
2328
2039
  const key = queryKey()
2329
2040
 
@@ -6107,40 +5818,6 @@ describe('createQuery', () => {
6107
5818
  })
6108
5819
  })
6109
5820
 
6110
- it('setQueryData - should not call onSuccess callback of active observers', async () => {
6111
- const key = queryKey()
6112
- const onSuccess = vi.fn()
6113
-
6114
- function Page() {
6115
- const state = createQuery(() => ({
6116
- queryKey: key,
6117
- queryFn: () => 'data',
6118
- onSuccess,
6119
- }))
6120
- return (
6121
- <div>
6122
- <div>data: {state.data}</div>
6123
- <button onClick={() => queryClient.setQueryData(key, 'newData')}>
6124
- setQueryData
6125
- </button>
6126
- </div>
6127
- )
6128
- }
6129
-
6130
- render(() => (
6131
- <QueryClientProvider client={queryClient}>
6132
- <Page />
6133
- </QueryClientProvider>
6134
- ))
6135
-
6136
- await waitFor(() => screen.getByText('data: data'))
6137
- fireEvent.click(screen.getByRole('button', { name: /setQueryData/i }))
6138
- await waitFor(() => screen.getByText('data: newData'))
6139
-
6140
- expect(onSuccess).toHaveBeenCalledTimes(1)
6141
- expect(onSuccess).toHaveBeenCalledWith('data')
6142
- })
6143
-
6144
5821
  it('setQueryData - should respect updatedAt', async () => {
6145
5822
  const key = queryKey()
6146
5823
 
@@ -217,89 +217,6 @@ describe("useQuery's in Suspense mode", () => {
217
217
  expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0)
218
218
  })
219
219
 
220
- it('should call onSuccess on the first successful call', async () => {
221
- const key = queryKey()
222
-
223
- const successFn = vi.fn()
224
-
225
- function Page() {
226
- createQuery(() => ({
227
- queryKey: [key],
228
- queryFn: async () => {
229
- await sleep(10)
230
- return key
231
- },
232
-
233
- suspense: true,
234
- select: () => 'selected',
235
- onSuccess: successFn,
236
- }))
237
-
238
- return <>rendered</>
239
- }
240
-
241
- render(() => (
242
- <QueryClientProvider client={queryClient}>
243
- <Suspense fallback="loading">
244
- <Page />
245
- </Suspense>
246
- </QueryClientProvider>
247
- ))
248
-
249
- await waitFor(() => screen.getByText('rendered'))
250
-
251
- await waitFor(() => expect(successFn).toHaveBeenCalledTimes(1))
252
- await waitFor(() => expect(successFn).toHaveBeenCalledWith('selected'))
253
- })
254
-
255
- it('should call every onSuccess handler within a suspense boundary', async () => {
256
- const key = queryKey()
257
-
258
- const successFn1 = vi.fn()
259
- const successFn2 = vi.fn()
260
-
261
- function FirstComponent() {
262
- createQuery(() => ({
263
- queryKey: key,
264
- queryFn: () => {
265
- sleep(10)
266
- return 'data'
267
- },
268
- onSuccess: successFn1,
269
- }))
270
-
271
- return <span>first</span>
272
- }
273
-
274
- function SecondComponent() {
275
- createQuery(() => ({
276
- queryKey: key,
277
- queryFn: () => {
278
- sleep(10)
279
- return 'data'
280
- },
281
- onSuccess: successFn2,
282
- }))
283
-
284
- return <span>second</span>
285
- }
286
-
287
- render(() => (
288
- <QueryClientProvider client={queryClient}>
289
- <Suspense fallback="loading">
290
- <FirstComponent />
291
- <SecondComponent />
292
- </Suspense>
293
- ,
294
- </QueryClientProvider>
295
- ))
296
-
297
- await waitFor(() => screen.getByText('second'))
298
-
299
- await waitFor(() => expect(successFn1).toHaveBeenCalledTimes(1))
300
- await waitFor(() => expect(successFn2).toHaveBeenCalledTimes(1))
301
- })
302
-
303
220
  // https://github.com/tannerlinsley/react-query/issues/468
304
221
  it('should reset error state if new component instances are mounted', async () => {
305
222
  const key = queryKey()
@@ -91,8 +91,9 @@ export function createBaseQuery<
91
91
  // copying over the missing properties from state in order to support hydration
92
92
  dataUpdateCount: query.state.dataUpdateCount,
93
93
  fetchFailureCount: query.state.fetchFailureCount,
94
- fetchFailureReason: query.state.fetchFailureReason,
95
- fetchMeta: query.state.fetchMeta,
94
+ // Removing these properties since they might not be serializable
95
+ // fetchFailureReason: query.state.fetchFailureReason,
96
+ // fetchMeta: query.state.fetchMeta,
96
97
  isInvalidated: query.state.isInvalidated,
97
98
  }
98
99