@tanstack/react-query-devtools 4.26.0 → 4.27.0
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/devtools.d.ts +23 -2
- package/build/lib/devtools.esm.js +107 -8
- package/build/lib/devtools.esm.js.map +1 -1
- package/build/lib/devtools.js +106 -8
- package/build/lib/devtools.js.map +1 -1
- package/build/lib/devtools.mjs +107 -8
- package/build/lib/devtools.mjs.map +1 -1
- package/build/lib/index.prod.esm.js +110 -9
- package/build/lib/index.prod.esm.js.map +1 -1
- package/build/lib/index.prod.js +109 -9
- package/build/lib/index.prod.js.map +1 -1
- package/build/lib/index.prod.mjs +110 -9
- package/build/lib/index.prod.mjs.map +1 -1
- package/build/lib/styledComponents.esm.js +3 -1
- package/build/lib/styledComponents.esm.js.map +1 -1
- package/build/lib/styledComponents.js +3 -1
- package/build/lib/styledComponents.js.map +1 -1
- package/build/lib/styledComponents.mjs +3 -1
- package/build/lib/styledComponents.mjs.map +1 -1
- package/build/umd/index.development.js +109 -9
- package/build/umd/index.development.js.map +1 -1
- package/package.json +3 -3
- package/src/__tests__/devtools.test.tsx +139 -0
- package/src/devtools.tsx +144 -2
- package/src/styledComponents.ts +3 -1
|
@@ -39,7 +39,9 @@ const Button = styled('button', (props, theme) => ({
|
|
|
39
39
|
cursor: 'pointer'
|
|
40
40
|
}));
|
|
41
41
|
const QueryKeys = styled('span', {
|
|
42
|
-
display: '
|
|
42
|
+
display: 'flex',
|
|
43
|
+
flexWrap: 'wrap',
|
|
44
|
+
gap: '0.5em',
|
|
43
45
|
fontSize: '0.9em'
|
|
44
46
|
});
|
|
45
47
|
const QueryKey = styled('span', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styledComponents.esm.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: '
|
|
1
|
+
{"version":3,"file":"styledComponents.esm.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'flex',\n flexWrap: 'wrap',\n gap: '0.5em',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","flexWrap","gap","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
|
|
@@ -43,7 +43,9 @@ const Button = utils.styled('button', (props, theme) => ({
|
|
|
43
43
|
cursor: 'pointer'
|
|
44
44
|
}));
|
|
45
45
|
const QueryKeys = utils.styled('span', {
|
|
46
|
-
display: '
|
|
46
|
+
display: 'flex',
|
|
47
|
+
flexWrap: 'wrap',
|
|
48
|
+
gap: '0.5em',
|
|
47
49
|
fontSize: '0.9em'
|
|
48
50
|
});
|
|
49
51
|
const QueryKey = utils.styled('span', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: '
|
|
1
|
+
{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'flex',\n flexWrap: 'wrap',\n gap: '0.5em',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","flexWrap","gap","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
|
|
@@ -39,7 +39,9 @@ const Button = styled('button', (props, theme) => ({
|
|
|
39
39
|
cursor: 'pointer'
|
|
40
40
|
}));
|
|
41
41
|
const QueryKeys = styled('span', {
|
|
42
|
-
display: '
|
|
42
|
+
display: 'flex',
|
|
43
|
+
flexWrap: 'wrap',
|
|
44
|
+
gap: '0.5em',
|
|
43
45
|
fontSize: '0.9em'
|
|
44
46
|
});
|
|
45
47
|
const QueryKey = styled('span', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styledComponents.mjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: '
|
|
1
|
+
{"version":3,"file":"styledComponents.mjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n 'div',\n (_props, theme) => ({\n fontSize: 'clamp(12px, 1.5vw, 14px)',\n fontFamily: `sans-serif`,\n display: 'flex',\n backgroundColor: theme.background,\n color: theme.foreground,\n }),\n {\n '(max-width: 700px)': {\n flexDirection: 'column',\n },\n '(max-width: 600px)': {\n fontSize: '.9em',\n // flexDirection: 'column',\n },\n },\n)\n\nexport const ActiveQueryPanel = styled(\n 'div',\n () => ({\n flex: '1 1 500px',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'auto',\n height: '100%',\n }),\n {\n '(max-width: 700px)': (_props, theme) => ({\n borderTop: `2px solid ${theme.gray}`,\n }),\n },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n appearance: 'none',\n fontSize: '.9em',\n fontWeight: 'bold',\n background: theme.gray,\n border: '0',\n borderRadius: '.3em',\n color: 'white',\n padding: '.5em',\n opacity: props.disabled ? '.5' : undefined,\n cursor: 'pointer',\n}))\n\nexport const QueryKeys = styled('span', {\n display: 'flex',\n flexWrap: 'wrap',\n gap: '0.5em',\n fontSize: '0.9em',\n})\n\nexport const QueryKey = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n padding: '.2em .4em',\n fontWeight: 'bold',\n textShadow: '0 0 10px black',\n borderRadius: '.2em',\n})\n\nexport const Code = styled('code', {\n fontSize: '.9em',\n color: 'inherit',\n background: 'inherit',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n backgroundColor: theme.inputBackgroundColor,\n border: 0,\n borderRadius: '.2em',\n color: theme.inputTextColor,\n fontSize: '.9em',\n lineHeight: `1.3`,\n padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n 'select',\n (_props, theme) => ({\n display: `inline-block`,\n fontSize: `.9em`,\n fontFamily: `sans-serif`,\n fontWeight: 'normal',\n lineHeight: `1.3`,\n padding: `.3em 1.5em .3em .5em`,\n height: 'auto',\n border: 0,\n borderRadius: `.2em`,\n appearance: `none`,\n WebkitAppearance: 'none',\n backgroundColor: theme.inputBackgroundColor,\n backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n backgroundRepeat: `no-repeat`,\n backgroundPosition: `right .55em center`,\n backgroundSize: `.65em auto, 100%`,\n color: theme.inputTextColor,\n }),\n {\n '(max-width: 500px)': {\n display: 'none',\n },\n },\n)\n"],"names":["Panel","styled","_props","theme","fontSize","fontFamily","display","backgroundColor","background","color","foreground","flexDirection","ActiveQueryPanel","flex","overflow","height","borderTop","gray","Button","props","appearance","fontWeight","border","borderRadius","padding","opacity","disabled","undefined","cursor","QueryKeys","flexWrap","gap","QueryKey","alignItems","textShadow","Code","Input","inputBackgroundColor","inputTextColor","lineHeight","Select","WebkitAppearance","backgroundImage","backgroundRepeat","backgroundPosition","backgroundSize"],"mappings":"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"}
|
|
@@ -2264,7 +2264,9 @@
|
|
|
2264
2264
|
cursor: 'pointer'
|
|
2265
2265
|
}));
|
|
2266
2266
|
const QueryKeys = styled('span', {
|
|
2267
|
-
display: '
|
|
2267
|
+
display: 'flex',
|
|
2268
|
+
flexWrap: 'wrap',
|
|
2269
|
+
gap: '0.5em',
|
|
2268
2270
|
fontSize: '0.9em'
|
|
2269
2271
|
});
|
|
2270
2272
|
const QueryKey = styled('span', {
|
|
@@ -2618,7 +2620,8 @@
|
|
|
2618
2620
|
containerElement: Container = 'aside',
|
|
2619
2621
|
context,
|
|
2620
2622
|
styleNonce,
|
|
2621
|
-
panelPosition: initialPanelPosition = 'bottom'
|
|
2623
|
+
panelPosition: initialPanelPosition = 'bottom',
|
|
2624
|
+
errorTypes = []
|
|
2622
2625
|
}) {
|
|
2623
2626
|
const rootRef = React__namespace.useRef(null);
|
|
2624
2627
|
const panelRef = React__namespace.useRef(null);
|
|
@@ -2797,7 +2800,8 @@
|
|
|
2797
2800
|
style: style,
|
|
2798
2801
|
isOpen: isResolvedOpen,
|
|
2799
2802
|
setIsOpen: setIsOpen,
|
|
2800
|
-
onDragStart: e => handleDragStart(panelRef.current, e)
|
|
2803
|
+
onDragStart: e => handleDragStart(panelRef.current, e),
|
|
2804
|
+
errorTypes: errorTypes
|
|
2801
2805
|
}))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _extends({
|
|
2802
2806
|
type: "button"
|
|
2803
2807
|
}, otherToggleButtonProps, {
|
|
@@ -2862,6 +2866,7 @@
|
|
|
2862
2866
|
showCloseButton,
|
|
2863
2867
|
position,
|
|
2864
2868
|
closeButtonProps = {},
|
|
2869
|
+
errorTypes = [],
|
|
2865
2870
|
...panelProps
|
|
2866
2871
|
} = props;
|
|
2867
2872
|
const {
|
|
@@ -2980,7 +2985,9 @@
|
|
|
2980
2985
|
}, "Bottom")) : null), /*#__PURE__*/React__namespace.createElement("div", {
|
|
2981
2986
|
style: {
|
|
2982
2987
|
display: 'flex',
|
|
2983
|
-
alignItems: 'center'
|
|
2988
|
+
alignItems: 'center',
|
|
2989
|
+
flexWrap: 'wrap',
|
|
2990
|
+
gap: '0.5em'
|
|
2984
2991
|
}
|
|
2985
2992
|
}, /*#__PURE__*/React__namespace.createElement(Input, {
|
|
2986
2993
|
placeholder: "Filter",
|
|
@@ -2992,7 +2999,6 @@
|
|
|
2992
2999
|
},
|
|
2993
3000
|
style: {
|
|
2994
3001
|
flex: '1',
|
|
2995
|
-
marginRight: '.5em',
|
|
2996
3002
|
width: '100%'
|
|
2997
3003
|
}
|
|
2998
3004
|
}), /*#__PURE__*/React__namespace.createElement(Select, {
|
|
@@ -3092,7 +3098,8 @@
|
|
|
3092
3098
|
}))), activeQueryHash && isOpen ? /*#__PURE__*/React__namespace.createElement(ActiveQuery, {
|
|
3093
3099
|
activeQueryHash: activeQueryHash,
|
|
3094
3100
|
queryCache: queryCache,
|
|
3095
|
-
queryClient: queryClient
|
|
3101
|
+
queryClient: queryClient,
|
|
3102
|
+
errorTypes: errorTypes
|
|
3096
3103
|
}) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(Button, _extends({
|
|
3097
3104
|
type: "button",
|
|
3098
3105
|
"aria-controls": "ReactQueryDevtoolsPanel",
|
|
@@ -3117,7 +3124,8 @@
|
|
|
3117
3124
|
const ActiveQuery = ({
|
|
3118
3125
|
queryCache,
|
|
3119
3126
|
activeQueryHash,
|
|
3120
|
-
queryClient
|
|
3127
|
+
queryClient,
|
|
3128
|
+
errorTypes
|
|
3121
3129
|
}) => {
|
|
3122
3130
|
var _useSubscribeToQueryC, _useSubscribeToQueryC2;
|
|
3123
3131
|
|
|
@@ -3143,10 +3151,44 @@
|
|
|
3143
3151
|
promise == null ? void 0 : promise.catch(noop);
|
|
3144
3152
|
};
|
|
3145
3153
|
|
|
3154
|
+
const currentErrorTypeName = React.useMemo(() => {
|
|
3155
|
+
if (activeQuery && activeQueryState != null && activeQueryState.error) {
|
|
3156
|
+
const errorType = errorTypes.find(type => {
|
|
3157
|
+
var _activeQueryState$err;
|
|
3158
|
+
|
|
3159
|
+
return type.initializer(activeQuery).toString() === ((_activeQueryState$err = activeQueryState.error) == null ? void 0 : _activeQueryState$err.toString());
|
|
3160
|
+
});
|
|
3161
|
+
return errorType == null ? void 0 : errorType.name;
|
|
3162
|
+
}
|
|
3163
|
+
|
|
3164
|
+
return undefined;
|
|
3165
|
+
}, [activeQuery, activeQueryState == null ? void 0 : activeQueryState.error, errorTypes]);
|
|
3166
|
+
|
|
3146
3167
|
if (!activeQuery || !activeQueryState) {
|
|
3147
3168
|
return null;
|
|
3148
3169
|
}
|
|
3149
3170
|
|
|
3171
|
+
const triggerError = errorType => {
|
|
3172
|
+
var _errorType$initialize;
|
|
3173
|
+
|
|
3174
|
+
const error = (_errorType$initialize = errorType == null ? void 0 : errorType.initializer(activeQuery)) != null ? _errorType$initialize : new Error('Unknown error from devtools');
|
|
3175
|
+
const __previousQueryOptions = activeQuery.options;
|
|
3176
|
+
activeQuery.setState({
|
|
3177
|
+
status: 'error',
|
|
3178
|
+
error,
|
|
3179
|
+
fetchMeta: { ...activeQuery.state.fetchMeta,
|
|
3180
|
+
__previousQueryOptions
|
|
3181
|
+
}
|
|
3182
|
+
});
|
|
3183
|
+
};
|
|
3184
|
+
|
|
3185
|
+
const restoreQueryAfterLoadingOrError = () => {
|
|
3186
|
+
activeQuery.fetch(activeQuery.state.fetchMeta.__previousQueryOptions, {
|
|
3187
|
+
// Make sure this fetch will cancel the previous one
|
|
3188
|
+
cancelRefetch: true
|
|
3189
|
+
});
|
|
3190
|
+
};
|
|
3191
|
+
|
|
3150
3192
|
return /*#__PURE__*/React__namespace.createElement(ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
|
|
3151
3193
|
style: {
|
|
3152
3194
|
padding: '.5em',
|
|
@@ -3213,7 +3255,11 @@
|
|
|
3213
3255
|
}
|
|
3214
3256
|
}, "Actions"), /*#__PURE__*/React__namespace.createElement("div", {
|
|
3215
3257
|
style: {
|
|
3216
|
-
padding: '0.5em'
|
|
3258
|
+
padding: '0.5em',
|
|
3259
|
+
display: 'flex',
|
|
3260
|
+
flexWrap: 'wrap',
|
|
3261
|
+
gap: '0.5em',
|
|
3262
|
+
alignItems: 'flex-end'
|
|
3217
3263
|
}
|
|
3218
3264
|
}, /*#__PURE__*/React__namespace.createElement(Button, {
|
|
3219
3265
|
type: "button",
|
|
@@ -3241,7 +3287,61 @@
|
|
|
3241
3287
|
style: {
|
|
3242
3288
|
background: defaultTheme.danger
|
|
3243
3289
|
}
|
|
3244
|
-
}, "Remove")
|
|
3290
|
+
}, "Remove"), ' ', /*#__PURE__*/React__namespace.createElement(Button, {
|
|
3291
|
+
type: "button",
|
|
3292
|
+
onClick: () => {
|
|
3293
|
+
if (activeQuery.state.data === undefined) {
|
|
3294
|
+
restoreQueryAfterLoadingOrError();
|
|
3295
|
+
} else {
|
|
3296
|
+
const __previousQueryOptions = activeQuery.options; // Trigger a fetch in order to trigger suspense as well.
|
|
3297
|
+
|
|
3298
|
+
activeQuery.fetch({ ...__previousQueryOptions,
|
|
3299
|
+
queryFn: () => {
|
|
3300
|
+
return new Promise(() => {// Never resolve
|
|
3301
|
+
});
|
|
3302
|
+
},
|
|
3303
|
+
cacheTime: -1
|
|
3304
|
+
});
|
|
3305
|
+
activeQuery.setState({
|
|
3306
|
+
data: undefined,
|
|
3307
|
+
status: 'loading',
|
|
3308
|
+
fetchMeta: { ...activeQuery.state.fetchMeta,
|
|
3309
|
+
__previousQueryOptions
|
|
3310
|
+
}
|
|
3311
|
+
});
|
|
3312
|
+
}
|
|
3313
|
+
},
|
|
3314
|
+
style: {
|
|
3315
|
+
background: defaultTheme.paused
|
|
3316
|
+
}
|
|
3317
|
+
}, activeQuery.state.status === 'loading' ? 'Restore' : 'Trigger', ' ', "loading"), ' ', errorTypes.length === 0 || activeQuery.state.status === 'error' ? /*#__PURE__*/React__namespace.createElement(Button, {
|
|
3318
|
+
type: "button",
|
|
3319
|
+
onClick: () => {
|
|
3320
|
+
if (!activeQuery.state.error) {
|
|
3321
|
+
triggerError();
|
|
3322
|
+
} else {
|
|
3323
|
+
queryClient.resetQueries(activeQuery);
|
|
3324
|
+
}
|
|
3325
|
+
},
|
|
3326
|
+
style: {
|
|
3327
|
+
background: defaultTheme.danger
|
|
3328
|
+
}
|
|
3329
|
+
}, activeQuery.state.status === 'error' ? 'Restore' : 'Trigger', " error") : /*#__PURE__*/React__namespace.createElement("label", null, "Trigger error:", /*#__PURE__*/React__namespace.createElement(Select, {
|
|
3330
|
+
value: currentErrorTypeName != null ? currentErrorTypeName : '',
|
|
3331
|
+
style: {
|
|
3332
|
+
marginInlineStart: '.5em'
|
|
3333
|
+
},
|
|
3334
|
+
onChange: e => {
|
|
3335
|
+
const errorType = errorTypes.find(t => t.name === e.target.value);
|
|
3336
|
+
triggerError(errorType);
|
|
3337
|
+
}
|
|
3338
|
+
}, /*#__PURE__*/React__namespace.createElement("option", {
|
|
3339
|
+
key: "",
|
|
3340
|
+
value: ""
|
|
3341
|
+
}), errorTypes.map(errorType => /*#__PURE__*/React__namespace.createElement("option", {
|
|
3342
|
+
key: errorType.name,
|
|
3343
|
+
value: errorType.name
|
|
3344
|
+
}, errorType.name))))), /*#__PURE__*/React__namespace.createElement("div", {
|
|
3245
3345
|
style: {
|
|
3246
3346
|
background: defaultTheme.backgroundAlt,
|
|
3247
3347
|
padding: '.5em',
|