@tanstack/react-query-devtools 4.3.4 → 4.3.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/build/lib/__tests__/Explorer.test.d.ts +1 -0
- package/build/lib/__tests__/devtools.test.d.ts +6 -0
- package/build/lib/__tests__/utils.d.ts +22 -0
- package/build/lib/devtools.js +11 -6
- package/build/lib/devtools.js.map +1 -1
- package/build/lib/devtools.mjs +11 -6
- package/build/lib/devtools.mjs.map +1 -1
- package/build/lib/index.prod.js +11 -6
- package/build/lib/index.prod.js.map +1 -1
- package/build/lib/index.prod.mjs +11 -6
- package/build/lib/index.prod.mjs.map +1 -1
- package/build/umd/index.development.js +11 -6
- package/build/umd/index.development.js.map +1 -1
- package/package.json +2 -2
- package/src/devtools.tsx +177 -159
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-query-devtools",
|
|
3
|
-
"version": "4.3.
|
|
3
|
+
"version": "4.3.6",
|
|
4
4
|
"description": "TODO",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -50,6 +50,6 @@
|
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
52
52
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
53
|
-
"@tanstack/react-query": "4.3.
|
|
53
|
+
"@tanstack/react-query": "4.3.6"
|
|
54
54
|
}
|
|
55
55
|
}
|
package/src/devtools.tsx
CHANGED
|
@@ -377,12 +377,18 @@ export function ReactQueryDevtools({
|
|
|
377
377
|
const useSubscribeToQueryCache = <T,>(
|
|
378
378
|
queryCache: QueryCache,
|
|
379
379
|
getSnapshot: () => T,
|
|
380
|
+
skip: boolean = false,
|
|
380
381
|
): T => {
|
|
381
382
|
return useSyncExternalStore(
|
|
382
383
|
React.useCallback(
|
|
383
|
-
(onStoreChange) =>
|
|
384
|
-
|
|
385
|
-
|
|
384
|
+
(onStoreChange) => {
|
|
385
|
+
if (!skip)
|
|
386
|
+
return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))
|
|
387
|
+
return () => {
|
|
388
|
+
return
|
|
389
|
+
}
|
|
390
|
+
},
|
|
391
|
+
[queryCache, skip],
|
|
386
392
|
),
|
|
387
393
|
getSnapshot,
|
|
388
394
|
getSnapshot,
|
|
@@ -422,6 +428,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
|
|
|
422
428
|
const queriesCount = useSubscribeToQueryCache(
|
|
423
429
|
queryCache,
|
|
424
430
|
() => queryCache.getAll().length,
|
|
431
|
+
!isOpen,
|
|
425
432
|
)
|
|
426
433
|
|
|
427
434
|
const [activeQueryHash, setActiveQueryHash] = useLocalStorage(
|
|
@@ -501,188 +508,199 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
|
|
|
501
508
|
}}
|
|
502
509
|
onMouseDown={handleDragStart}
|
|
503
510
|
></div>
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
flex: '1 1 500px',
|
|
507
|
-
minHeight: '40%',
|
|
508
|
-
maxHeight: '100%',
|
|
509
|
-
overflow: 'auto',
|
|
510
|
-
borderRight: `1px solid ${theme.grayAlt}`,
|
|
511
|
-
display: isOpen ? 'flex' : 'none',
|
|
512
|
-
flexDirection: 'column',
|
|
513
|
-
}}
|
|
514
|
-
>
|
|
511
|
+
|
|
512
|
+
{isOpen && (
|
|
515
513
|
<div
|
|
516
514
|
style={{
|
|
517
|
-
|
|
518
|
-
|
|
515
|
+
flex: '1 1 500px',
|
|
516
|
+
minHeight: '40%',
|
|
517
|
+
maxHeight: '100%',
|
|
518
|
+
overflow: 'auto',
|
|
519
|
+
borderRight: `1px solid ${theme.grayAlt}`,
|
|
519
520
|
display: 'flex',
|
|
520
|
-
|
|
521
|
-
alignItems: 'center',
|
|
521
|
+
flexDirection: 'column',
|
|
522
522
|
}}
|
|
523
523
|
>
|
|
524
|
-
<button
|
|
525
|
-
type="button"
|
|
526
|
-
aria-label="Close React Query Devtools"
|
|
527
|
-
aria-controls="ReactQueryDevtoolsPanel"
|
|
528
|
-
aria-haspopup="true"
|
|
529
|
-
aria-expanded="true"
|
|
530
|
-
onClick={() => setIsOpen(false)}
|
|
531
|
-
style={{
|
|
532
|
-
display: 'inline-flex',
|
|
533
|
-
background: 'none',
|
|
534
|
-
border: 0,
|
|
535
|
-
padding: 0,
|
|
536
|
-
marginRight: '.5em',
|
|
537
|
-
cursor: 'pointer',
|
|
538
|
-
}}
|
|
539
|
-
>
|
|
540
|
-
<Logo aria-hidden />
|
|
541
|
-
<ScreenReader text="Close React Query Devtools" />
|
|
542
|
-
</button>
|
|
543
524
|
<div
|
|
544
525
|
style={{
|
|
526
|
+
padding: '.5em',
|
|
527
|
+
background: theme.backgroundAlt,
|
|
545
528
|
display: 'flex',
|
|
546
|
-
|
|
529
|
+
justifyContent: 'space-between',
|
|
530
|
+
alignItems: 'center',
|
|
547
531
|
}}
|
|
548
532
|
>
|
|
549
|
-
<
|
|
533
|
+
<button
|
|
534
|
+
type="button"
|
|
535
|
+
aria-label="Close React Query Devtools"
|
|
536
|
+
aria-controls="ReactQueryDevtoolsPanel"
|
|
537
|
+
aria-haspopup="true"
|
|
538
|
+
aria-expanded="true"
|
|
539
|
+
onClick={() => setIsOpen(false)}
|
|
540
|
+
style={{
|
|
541
|
+
display: 'inline-flex',
|
|
542
|
+
background: 'none',
|
|
543
|
+
border: 0,
|
|
544
|
+
padding: 0,
|
|
545
|
+
marginRight: '.5em',
|
|
546
|
+
cursor: 'pointer',
|
|
547
|
+
}}
|
|
548
|
+
>
|
|
549
|
+
<Logo aria-hidden />
|
|
550
|
+
<ScreenReader text="Close React Query Devtools" />
|
|
551
|
+
</button>
|
|
550
552
|
<div
|
|
551
553
|
style={{
|
|
552
554
|
display: 'flex',
|
|
553
|
-
|
|
555
|
+
flexDirection: 'column',
|
|
554
556
|
}}
|
|
555
557
|
>
|
|
556
|
-
<
|
|
557
|
-
|
|
558
|
-
aria-label="Filter by queryhash"
|
|
559
|
-
value={filter ?? ''}
|
|
560
|
-
onChange={(e) => setFilter(e.target.value)}
|
|
561
|
-
onKeyDown={(e) => {
|
|
562
|
-
if (e.key === 'Escape') setFilter('')
|
|
563
|
-
}}
|
|
558
|
+
<QueryStatusCount queryCache={queryCache} />
|
|
559
|
+
<div
|
|
564
560
|
style={{
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
width: '100%',
|
|
561
|
+
display: 'flex',
|
|
562
|
+
alignItems: 'center',
|
|
568
563
|
}}
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
}
|
|
609
|
-
}}
|
|
610
|
-
aria-label={
|
|
611
|
-
isMockOffline
|
|
612
|
-
? 'Restore offline mock'
|
|
613
|
-
: 'Mock offline behavior'
|
|
614
|
-
}
|
|
615
|
-
title={
|
|
616
|
-
isMockOffline
|
|
617
|
-
? 'Restore offline mock'
|
|
618
|
-
: 'Mock offline behavior'
|
|
619
|
-
}
|
|
620
|
-
style={{
|
|
621
|
-
padding: '0',
|
|
622
|
-
height: '2em',
|
|
623
|
-
}}
|
|
624
|
-
>
|
|
625
|
-
<svg
|
|
626
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
627
|
-
width="2em"
|
|
628
|
-
height="2em"
|
|
629
|
-
viewBox="0 0 24 24"
|
|
630
|
-
stroke={isMockOffline ? theme.danger : 'currentColor'}
|
|
631
|
-
fill="none"
|
|
564
|
+
>
|
|
565
|
+
<Input
|
|
566
|
+
placeholder="Filter"
|
|
567
|
+
aria-label="Filter by queryhash"
|
|
568
|
+
value={filter ?? ''}
|
|
569
|
+
onChange={(e) => setFilter(e.target.value)}
|
|
570
|
+
onKeyDown={(e) => {
|
|
571
|
+
if (e.key === 'Escape') setFilter('')
|
|
572
|
+
}}
|
|
573
|
+
style={{
|
|
574
|
+
flex: '1',
|
|
575
|
+
marginRight: '.5em',
|
|
576
|
+
width: '100%',
|
|
577
|
+
}}
|
|
578
|
+
/>
|
|
579
|
+
{!filter ? (
|
|
580
|
+
<>
|
|
581
|
+
<Select
|
|
582
|
+
aria-label="Sort queries"
|
|
583
|
+
value={sort}
|
|
584
|
+
onChange={(e) => setSort(e.target.value)}
|
|
585
|
+
style={{
|
|
586
|
+
flex: '1',
|
|
587
|
+
minWidth: 75,
|
|
588
|
+
marginRight: '.5em',
|
|
589
|
+
}}
|
|
590
|
+
>
|
|
591
|
+
{Object.keys(sortFns).map((key) => (
|
|
592
|
+
<option key={key} value={key}>
|
|
593
|
+
Sort by {key}
|
|
594
|
+
</option>
|
|
595
|
+
))}
|
|
596
|
+
</Select>
|
|
597
|
+
<Button
|
|
598
|
+
type="button"
|
|
599
|
+
onClick={() => setSortDesc((old) => !old)}
|
|
600
|
+
style={{
|
|
601
|
+
padding: '.3em .4em',
|
|
602
|
+
marginRight: '.5em',
|
|
603
|
+
}}
|
|
632
604
|
>
|
|
633
|
-
{
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
|
|
649
|
-
</>
|
|
650
|
-
)}
|
|
651
|
-
</svg>
|
|
652
|
-
<ScreenReader
|
|
653
|
-
text={
|
|
605
|
+
{sortDesc ? '⬇ Desc' : '⬆ Asc'}
|
|
606
|
+
</Button>
|
|
607
|
+
<Button
|
|
608
|
+
type="button"
|
|
609
|
+
onClick={() => {
|
|
610
|
+
if (isMockOffline) {
|
|
611
|
+
onlineManager.setOnline(undefined)
|
|
612
|
+
setMockOffline(false)
|
|
613
|
+
window.dispatchEvent(new Event('online'))
|
|
614
|
+
} else {
|
|
615
|
+
onlineManager.setOnline(false)
|
|
616
|
+
setMockOffline(true)
|
|
617
|
+
}
|
|
618
|
+
}}
|
|
619
|
+
aria-label={
|
|
654
620
|
isMockOffline
|
|
655
621
|
? 'Restore offline mock'
|
|
656
622
|
: 'Mock offline behavior'
|
|
657
623
|
}
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
624
|
+
title={
|
|
625
|
+
isMockOffline
|
|
626
|
+
? 'Restore offline mock'
|
|
627
|
+
: 'Mock offline behavior'
|
|
628
|
+
}
|
|
629
|
+
style={{
|
|
630
|
+
padding: '0',
|
|
631
|
+
height: '2em',
|
|
632
|
+
}}
|
|
633
|
+
>
|
|
634
|
+
<svg
|
|
635
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
636
|
+
width="2em"
|
|
637
|
+
height="2em"
|
|
638
|
+
viewBox="0 0 24 24"
|
|
639
|
+
stroke={isMockOffline ? theme.danger : 'currentColor'}
|
|
640
|
+
fill="none"
|
|
641
|
+
>
|
|
642
|
+
{isMockOffline ? (
|
|
643
|
+
<>
|
|
644
|
+
<path
|
|
645
|
+
stroke="none"
|
|
646
|
+
d="M0 0h24v24H0z"
|
|
647
|
+
fill="none"
|
|
648
|
+
/>
|
|
649
|
+
<line x1="12" y1="18" x2="12.01" y2="18" />
|
|
650
|
+
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
|
|
651
|
+
<path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
|
|
652
|
+
<path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
|
|
653
|
+
<line x1="3" y1="3" x2="21" y2="21" />
|
|
654
|
+
</>
|
|
655
|
+
) : (
|
|
656
|
+
<>
|
|
657
|
+
<path
|
|
658
|
+
stroke="none"
|
|
659
|
+
d="M0 0h24v24H0z"
|
|
660
|
+
fill="none"
|
|
661
|
+
/>
|
|
662
|
+
<line x1="12" y1="18" x2="12.01" y2="18" />
|
|
663
|
+
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
|
|
664
|
+
<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
|
|
665
|
+
<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
|
|
666
|
+
</>
|
|
667
|
+
)}
|
|
668
|
+
</svg>
|
|
669
|
+
<ScreenReader
|
|
670
|
+
text={
|
|
671
|
+
isMockOffline
|
|
672
|
+
? 'Restore offline mock'
|
|
673
|
+
: 'Mock offline behavior'
|
|
674
|
+
}
|
|
675
|
+
/>
|
|
676
|
+
</Button>
|
|
677
|
+
</>
|
|
678
|
+
) : null}
|
|
679
|
+
</div>
|
|
662
680
|
</div>
|
|
663
681
|
</div>
|
|
682
|
+
<div
|
|
683
|
+
style={{
|
|
684
|
+
overflowY: 'auto',
|
|
685
|
+
flex: '1',
|
|
686
|
+
}}
|
|
687
|
+
>
|
|
688
|
+
{queries.map((query) => {
|
|
689
|
+
return (
|
|
690
|
+
<QueryRow
|
|
691
|
+
queryKey={query.queryKey}
|
|
692
|
+
activeQueryHash={activeQueryHash}
|
|
693
|
+
setActiveQueryHash={setActiveQueryHash}
|
|
694
|
+
key={query.queryHash}
|
|
695
|
+
queryCache={queryCache}
|
|
696
|
+
/>
|
|
697
|
+
)
|
|
698
|
+
})}
|
|
699
|
+
</div>
|
|
664
700
|
</div>
|
|
665
|
-
|
|
666
|
-
style={{
|
|
667
|
-
overflowY: 'auto',
|
|
668
|
-
flex: '1',
|
|
669
|
-
}}
|
|
670
|
-
>
|
|
671
|
-
{queries.map((query) => {
|
|
672
|
-
return (
|
|
673
|
-
<QueryRow
|
|
674
|
-
queryKey={query.queryKey}
|
|
675
|
-
activeQueryHash={activeQueryHash}
|
|
676
|
-
setActiveQueryHash={setActiveQueryHash}
|
|
677
|
-
key={query.queryHash}
|
|
678
|
-
queryCache={queryCache}
|
|
679
|
-
/>
|
|
680
|
-
)
|
|
681
|
-
})}
|
|
682
|
-
</div>
|
|
683
|
-
</div>
|
|
701
|
+
)}
|
|
684
702
|
|
|
685
|
-
{activeQueryHash ? (
|
|
703
|
+
{activeQueryHash && isOpen ? (
|
|
686
704
|
<ActiveQuery
|
|
687
705
|
activeQueryHash={activeQueryHash}
|
|
688
706
|
queryCache={queryCache}
|