@tanstack/react-query-devtools 5.0.0-alpha.62 → 5.0.0-alpha.63
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.legacy.cjs +65 -0
- package/build/lib/devtools.legacy.cjs.map +1 -0
- package/build/lib/devtools.legacy.js +63 -0
- package/build/lib/devtools.legacy.js.map +1 -0
- package/build/lib/index.legacy.cjs +18 -0
- package/build/lib/index.legacy.cjs.map +1 -0
- package/build/lib/index.legacy.js +16 -0
- package/build/lib/index.legacy.js.map +1 -0
- package/build/lib/index.prod.legacy.cjs +70 -0
- package/build/lib/index.prod.legacy.cjs.map +1 -0
- package/build/lib/index.prod.legacy.js +68 -0
- package/build/lib/index.prod.legacy.js.map +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var reactQuery = require('@tanstack/react-query');
|
|
6
|
+
var queryDevtools = require('@tanstack/query-devtools');
|
|
7
|
+
|
|
8
|
+
function ReactQueryDevtoolsDev(props) {
|
|
9
|
+
const queryClient = reactQuery.useQueryClient();
|
|
10
|
+
const client = props.client || queryClient;
|
|
11
|
+
const ref = React.useRef(null);
|
|
12
|
+
const {
|
|
13
|
+
buttonPosition,
|
|
14
|
+
position,
|
|
15
|
+
initialIsOpen,
|
|
16
|
+
errorTypes
|
|
17
|
+
} = props;
|
|
18
|
+
const [devtools] = React.useState(new queryDevtools.TanstackQueryDevtools({
|
|
19
|
+
client: client,
|
|
20
|
+
queryFlavor: 'React Query',
|
|
21
|
+
version: '5',
|
|
22
|
+
onlineManager: reactQuery.onlineManager,
|
|
23
|
+
buttonPosition,
|
|
24
|
+
position,
|
|
25
|
+
initialIsOpen,
|
|
26
|
+
errorTypes
|
|
27
|
+
}));
|
|
28
|
+
React.useEffect(() => {
|
|
29
|
+
devtools.setClient(client);
|
|
30
|
+
}, [client, devtools]);
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
if (buttonPosition) {
|
|
33
|
+
devtools.setButtonPosition(buttonPosition);
|
|
34
|
+
}
|
|
35
|
+
}, [buttonPosition, devtools]);
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
if (position) {
|
|
38
|
+
devtools.setPosition(position);
|
|
39
|
+
}
|
|
40
|
+
}, [position, devtools]);
|
|
41
|
+
React.useEffect(() => {
|
|
42
|
+
devtools.setInitialIsOpen(initialIsOpen || false);
|
|
43
|
+
}, [initialIsOpen, devtools]);
|
|
44
|
+
React.useEffect(() => {
|
|
45
|
+
devtools.setErrorTypes(errorTypes || []);
|
|
46
|
+
}, [errorTypes, devtools]);
|
|
47
|
+
React.useEffect(() => {
|
|
48
|
+
if (ref.current) {
|
|
49
|
+
devtools.mount(ref.current);
|
|
50
|
+
}
|
|
51
|
+
return () => {
|
|
52
|
+
devtools.unmount();
|
|
53
|
+
};
|
|
54
|
+
}, [devtools]);
|
|
55
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
56
|
+
ref: ref
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function ReactQueryDevtoolsProd(_props) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? ReactQueryDevtoolsProd : ReactQueryDevtoolsDev;
|
|
63
|
+
|
|
64
|
+
exports.ReactQueryDevtools = ReactQueryDevtools;
|
|
65
|
+
//# sourceMappingURL=devtools.legacy.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"devtools.legacy.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-left'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools","ref","ReactQueryDevtools"],"mappings":";;;;;;;AAuCA;AAGE;AACA;AACA;;;;;AACiDA;AAAW;;AAGxDC;AACAC;AACAC;;;;;AAKAH;AACF;AAGFI;AACEC;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACEC;AACF;AAEAD;AACEC;AACF;AAEAD;;AAEIC;AACF;AAEA;;;AAGF;;AAEYC;AAAS;AACvB;AAEA;AAGE;AACF;AAEaC;;"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
3
|
+
import { useQueryClient, onlineManager } from '@tanstack/react-query';
|
|
4
|
+
import { TanstackQueryDevtools } from '@tanstack/query-devtools';
|
|
5
|
+
|
|
6
|
+
function ReactQueryDevtoolsDev(props) {
|
|
7
|
+
const queryClient = useQueryClient();
|
|
8
|
+
const client = props.client || queryClient;
|
|
9
|
+
const ref = useRef(null);
|
|
10
|
+
const {
|
|
11
|
+
buttonPosition,
|
|
12
|
+
position,
|
|
13
|
+
initialIsOpen,
|
|
14
|
+
errorTypes
|
|
15
|
+
} = props;
|
|
16
|
+
const [devtools] = useState(new TanstackQueryDevtools({
|
|
17
|
+
client: client,
|
|
18
|
+
queryFlavor: 'React Query',
|
|
19
|
+
version: '5',
|
|
20
|
+
onlineManager,
|
|
21
|
+
buttonPosition,
|
|
22
|
+
position,
|
|
23
|
+
initialIsOpen,
|
|
24
|
+
errorTypes
|
|
25
|
+
}));
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
devtools.setClient(client);
|
|
28
|
+
}, [client, devtools]);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (buttonPosition) {
|
|
31
|
+
devtools.setButtonPosition(buttonPosition);
|
|
32
|
+
}
|
|
33
|
+
}, [buttonPosition, devtools]);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (position) {
|
|
36
|
+
devtools.setPosition(position);
|
|
37
|
+
}
|
|
38
|
+
}, [position, devtools]);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
devtools.setInitialIsOpen(initialIsOpen || false);
|
|
41
|
+
}, [initialIsOpen, devtools]);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
devtools.setErrorTypes(errorTypes || []);
|
|
44
|
+
}, [errorTypes, devtools]);
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
if (ref.current) {
|
|
47
|
+
devtools.mount(ref.current);
|
|
48
|
+
}
|
|
49
|
+
return () => {
|
|
50
|
+
devtools.unmount();
|
|
51
|
+
};
|
|
52
|
+
}, [devtools]);
|
|
53
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
54
|
+
ref: ref
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
function ReactQueryDevtoolsProd(_props) {
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? ReactQueryDevtoolsProd : ReactQueryDevtoolsDev;
|
|
61
|
+
|
|
62
|
+
export { ReactQueryDevtools };
|
|
63
|
+
//# sourceMappingURL=devtools.legacy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"devtools.legacy.js","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-left'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools","ref","ReactQueryDevtools"],"mappings":";;;;;AAuCA;AAGE;AACA;AACA;;;;;AACiDA;AAAW;;AAGxDC;AACAC;AACAC;;;;;AAKAH;AACF;AAGFI;AACEC;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACEC;AACF;AAEAD;AACEC;AACF;AAEAD;;AAEIC;AACF;AAEA;;;AAGF;;AAEYC;AAAS;AACvB;AAEA;AAGE;AACF;AAEaC;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var devtools = require('./devtools.legacy.cjs');
|
|
5
|
+
|
|
6
|
+
const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? function () {
|
|
7
|
+
return null;
|
|
8
|
+
} : devtools.ReactQueryDevtools;
|
|
9
|
+
|
|
10
|
+
// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
|
|
11
|
+
// process.env.NODE_ENV !== 'development'
|
|
12
|
+
// ? (function () {
|
|
13
|
+
// return null
|
|
14
|
+
// } as any)
|
|
15
|
+
// : devtools.ReactQueryDevtoolsPanel
|
|
16
|
+
|
|
17
|
+
exports.ReactQueryDevtools = ReactQueryDevtools;
|
|
18
|
+
//# sourceMappingURL=index.legacy.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.legacy.cjs","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : devtools.ReactQueryDevtools\n\n// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n// process.env.NODE_ENV !== 'development'\n// ? (function () {\n// return null\n// } as any)\n// : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":";;;;;AAIO;AAGC;AACF;;AAGN;AACA;AACA;AACA;AACA;AACA;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { ReactQueryDevtools as ReactQueryDevtools$1 } from './devtools.legacy.js';
|
|
3
|
+
|
|
4
|
+
const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? function () {
|
|
5
|
+
return null;
|
|
6
|
+
} : ReactQueryDevtools$1;
|
|
7
|
+
|
|
8
|
+
// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
|
|
9
|
+
// process.env.NODE_ENV !== 'development'
|
|
10
|
+
// ? (function () {
|
|
11
|
+
// return null
|
|
12
|
+
// } as any)
|
|
13
|
+
// : devtools.ReactQueryDevtoolsPanel
|
|
14
|
+
|
|
15
|
+
export { ReactQueryDevtools };
|
|
16
|
+
//# sourceMappingURL=index.legacy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.legacy.js","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : devtools.ReactQueryDevtools\n\n// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n// process.env.NODE_ENV !== 'development'\n// ? (function () {\n// return null\n// } as any)\n// : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":";;;AAIO;AAGC;AACF;;AAGN;AACA;AACA;AACA;AACA;AACA;;"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var reactQuery = require('@tanstack/react-query');
|
|
5
|
+
var queryDevtools = require('@tanstack/query-devtools');
|
|
6
|
+
|
|
7
|
+
function ReactQueryDevtoolsDev(props) {
|
|
8
|
+
const queryClient = reactQuery.useQueryClient();
|
|
9
|
+
const client = props.client || queryClient;
|
|
10
|
+
const ref = React.useRef(null);
|
|
11
|
+
const {
|
|
12
|
+
buttonPosition,
|
|
13
|
+
position,
|
|
14
|
+
initialIsOpen,
|
|
15
|
+
errorTypes
|
|
16
|
+
} = props;
|
|
17
|
+
const [devtools] = React.useState(new queryDevtools.TanstackQueryDevtools({
|
|
18
|
+
client: client,
|
|
19
|
+
queryFlavor: 'React Query',
|
|
20
|
+
version: '5',
|
|
21
|
+
onlineManager: reactQuery.onlineManager,
|
|
22
|
+
buttonPosition,
|
|
23
|
+
position,
|
|
24
|
+
initialIsOpen,
|
|
25
|
+
errorTypes
|
|
26
|
+
}));
|
|
27
|
+
React.useEffect(() => {
|
|
28
|
+
devtools.setClient(client);
|
|
29
|
+
}, [client, devtools]);
|
|
30
|
+
React.useEffect(() => {
|
|
31
|
+
if (buttonPosition) {
|
|
32
|
+
devtools.setButtonPosition(buttonPosition);
|
|
33
|
+
}
|
|
34
|
+
}, [buttonPosition, devtools]);
|
|
35
|
+
React.useEffect(() => {
|
|
36
|
+
if (position) {
|
|
37
|
+
devtools.setPosition(position);
|
|
38
|
+
}
|
|
39
|
+
}, [position, devtools]);
|
|
40
|
+
React.useEffect(() => {
|
|
41
|
+
devtools.setInitialIsOpen(initialIsOpen || false);
|
|
42
|
+
}, [initialIsOpen, devtools]);
|
|
43
|
+
React.useEffect(() => {
|
|
44
|
+
devtools.setErrorTypes(errorTypes || []);
|
|
45
|
+
}, [errorTypes, devtools]);
|
|
46
|
+
React.useEffect(() => {
|
|
47
|
+
if (ref.current) {
|
|
48
|
+
devtools.mount(ref.current);
|
|
49
|
+
}
|
|
50
|
+
return () => {
|
|
51
|
+
devtools.unmount();
|
|
52
|
+
};
|
|
53
|
+
}, [devtools]);
|
|
54
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
ref: ref
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
const ReactQueryDevtools$1 = ReactQueryDevtoolsDev;
|
|
59
|
+
|
|
60
|
+
const ReactQueryDevtools = ReactQueryDevtools$1;
|
|
61
|
+
|
|
62
|
+
// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
|
|
63
|
+
// "development" !== 'development'
|
|
64
|
+
// ? (function () {
|
|
65
|
+
// return null
|
|
66
|
+
// } as any)
|
|
67
|
+
// : devtools.ReactQueryDevtoolsPanel
|
|
68
|
+
|
|
69
|
+
exports.ReactQueryDevtools = ReactQueryDevtools;
|
|
70
|
+
//# sourceMappingURL=index.prod.legacy.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.prod.legacy.cjs","sources":["../../src/devtools.tsx","../../src/index.ts"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-left'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n","'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : devtools.ReactQueryDevtools\n\n// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n// process.env.NODE_ENV !== 'development'\n// ? (function () {\n// return null\n// } as any)\n// : devtools.ReactQueryDevtoolsPanel\n"],"names":["ReactQueryDevtoolsDev","props","queryClient","useQueryClient","client","ref","useRef","buttonPosition","position","initialIsOpen","errorTypes","devtools","useState","TanstackQueryDevtools","queryFlavor","version","onlineManager","useEffect","setClient","setButtonPosition","setPosition","setInitialIsOpen","setErrorTypes","current","mount","unmount","React","createElement","ReactQueryDevtools"],"mappings":";;;;;;AAuCA,SAASA,qBAAqBA,CAC5BC,KAAsB,EACK;AAC3B,EAAA,MAAMC,WAAW,GAAGC,yBAAc,EAAE,CAAA;AACpC,EAAA,MAAMC,MAAM,GAAGH,KAAK,CAACG,MAAM,IAAIF,WAAW,CAAA;AAC1C,EAAA,MAAMG,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;EACxC,MAAM;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,aAAa;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGT,KAAK,CAAA;EACrE,MAAM,CAACU,QAAQ,CAAC,GAAGC,cAAQ,CACzB,IAAIC,mCAAqB,CAAC;AACxBT,IAAAA,MAAM,EAAEA,MAAM;AACdU,IAAAA,WAAW,EAAE,aAAa;AAC1BC,IAAAA,OAAO,EAAE,GAAG;mBACZC,wBAAa;IACbT,cAAc;IACdC,QAAQ;IACRC,aAAa;AACbC,IAAAA,UAAAA;AACF,GAAC,CACH,CAAC,CAAA;AAEDO,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACO,SAAS,CAACd,MAAM,CAAC,CAAA;AAC5B,GAAC,EAAE,CAACA,MAAM,EAAEO,QAAQ,CAAC,CAAC,CAAA;AAEtBM,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIV,cAAc,EAAE;AAClBI,MAAAA,QAAQ,CAACQ,iBAAiB,CAACZ,cAAc,CAAC,CAAA;AAC5C,KAAA;AACF,GAAC,EAAE,CAACA,cAAc,EAAEI,QAAQ,CAAC,CAAC,CAAA;AAE9BM,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIT,QAAQ,EAAE;AACZG,MAAAA,QAAQ,CAACS,WAAW,CAACZ,QAAQ,CAAC,CAAA;AAChC,KAAA;AACF,GAAC,EAAE,CAACA,QAAQ,EAAEG,QAAQ,CAAC,CAAC,CAAA;AAExBM,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACU,gBAAgB,CAACZ,aAAa,IAAI,KAAK,CAAC,CAAA;AACnD,GAAC,EAAE,CAACA,aAAa,EAAEE,QAAQ,CAAC,CAAC,CAAA;AAE7BM,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACW,aAAa,CAACZ,UAAU,IAAI,EAAE,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACA,UAAU,EAAEC,QAAQ,CAAC,CAAC,CAAA;AAE1BM,EAAAA,eAAS,CAAC,MAAM;IACd,IAAIZ,GAAG,CAACkB,OAAO,EAAE;AACfZ,MAAAA,QAAQ,CAACa,KAAK,CAACnB,GAAG,CAACkB,OAAO,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,OAAO,MAAM;MACXZ,QAAQ,CAACc,OAAO,EAAE,CAAA;KACnB,CAAA;AACH,GAAC,EAAE,CAACd,QAAQ,CAAC,CAAC,CAAA;EAEd,oBAAOe,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAM,CAAC,CAAA;AAC9B,CAAA;AAQO,MAAMuB,oBAAgD,GAGvD5B,qBAAqB;;ACrGpB,MAAM4B,kBAA2D,GAKlEjB,qBAA2B;;AAEjC;AACA;AACA;AACA;AACA;AACA;;;;"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
+
import { useQueryClient, onlineManager } from '@tanstack/react-query';
|
|
3
|
+
import { TanstackQueryDevtools } from '@tanstack/query-devtools';
|
|
4
|
+
|
|
5
|
+
function ReactQueryDevtoolsDev(props) {
|
|
6
|
+
const queryClient = useQueryClient();
|
|
7
|
+
const client = props.client || queryClient;
|
|
8
|
+
const ref = useRef(null);
|
|
9
|
+
const {
|
|
10
|
+
buttonPosition,
|
|
11
|
+
position,
|
|
12
|
+
initialIsOpen,
|
|
13
|
+
errorTypes
|
|
14
|
+
} = props;
|
|
15
|
+
const [devtools] = useState(new TanstackQueryDevtools({
|
|
16
|
+
client: client,
|
|
17
|
+
queryFlavor: 'React Query',
|
|
18
|
+
version: '5',
|
|
19
|
+
onlineManager,
|
|
20
|
+
buttonPosition,
|
|
21
|
+
position,
|
|
22
|
+
initialIsOpen,
|
|
23
|
+
errorTypes
|
|
24
|
+
}));
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
devtools.setClient(client);
|
|
27
|
+
}, [client, devtools]);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (buttonPosition) {
|
|
30
|
+
devtools.setButtonPosition(buttonPosition);
|
|
31
|
+
}
|
|
32
|
+
}, [buttonPosition, devtools]);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
if (position) {
|
|
35
|
+
devtools.setPosition(position);
|
|
36
|
+
}
|
|
37
|
+
}, [position, devtools]);
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
devtools.setInitialIsOpen(initialIsOpen || false);
|
|
40
|
+
}, [initialIsOpen, devtools]);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
devtools.setErrorTypes(errorTypes || []);
|
|
43
|
+
}, [errorTypes, devtools]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (ref.current) {
|
|
46
|
+
devtools.mount(ref.current);
|
|
47
|
+
}
|
|
48
|
+
return () => {
|
|
49
|
+
devtools.unmount();
|
|
50
|
+
};
|
|
51
|
+
}, [devtools]);
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
ref: ref
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
const ReactQueryDevtools$1 = ReactQueryDevtoolsDev;
|
|
57
|
+
|
|
58
|
+
const ReactQueryDevtools = ReactQueryDevtools$1;
|
|
59
|
+
|
|
60
|
+
// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
|
|
61
|
+
// "development" !== 'development'
|
|
62
|
+
// ? (function () {
|
|
63
|
+
// return null
|
|
64
|
+
// } as any)
|
|
65
|
+
// : devtools.ReactQueryDevtoolsPanel
|
|
66
|
+
|
|
67
|
+
export { ReactQueryDevtools };
|
|
68
|
+
//# sourceMappingURL=index.prod.legacy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.prod.legacy.js","sources":["../../src/devtools.tsx","../../src/index.ts"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-left'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n","'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : devtools.ReactQueryDevtools\n\n// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n// process.env.NODE_ENV !== 'development'\n// ? (function () {\n// return null\n// } as any)\n// : devtools.ReactQueryDevtoolsPanel\n"],"names":["ReactQueryDevtoolsDev","props","queryClient","useQueryClient","client","ref","useRef","buttonPosition","position","initialIsOpen","errorTypes","devtools","useState","TanstackQueryDevtools","queryFlavor","version","onlineManager","useEffect","setClient","setButtonPosition","setPosition","setInitialIsOpen","setErrorTypes","current","mount","unmount","React","createElement","ReactQueryDevtools"],"mappings":";;;;AAuCA,SAASA,qBAAqBA,CAC5BC,KAAsB,EACK;AAC3B,EAAA,MAAMC,WAAW,GAAGC,cAAc,EAAE,CAAA;AACpC,EAAA,MAAMC,MAAM,GAAGH,KAAK,CAACG,MAAM,IAAIF,WAAW,CAAA;AAC1C,EAAA,MAAMG,GAAG,GAAGC,MAAM,CAAiB,IAAI,CAAC,CAAA;EACxC,MAAM;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,aAAa;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGT,KAAK,CAAA;EACrE,MAAM,CAACU,QAAQ,CAAC,GAAGC,QAAQ,CACzB,IAAIC,qBAAqB,CAAC;AACxBT,IAAAA,MAAM,EAAEA,MAAM;AACdU,IAAAA,WAAW,EAAE,aAAa;AAC1BC,IAAAA,OAAO,EAAE,GAAG;IACZC,aAAa;IACbT,cAAc;IACdC,QAAQ;IACRC,aAAa;AACbC,IAAAA,UAAAA;AACF,GAAC,CACH,CAAC,CAAA;AAEDO,EAAAA,SAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACO,SAAS,CAACd,MAAM,CAAC,CAAA;AAC5B,GAAC,EAAE,CAACA,MAAM,EAAEO,QAAQ,CAAC,CAAC,CAAA;AAEtBM,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIV,cAAc,EAAE;AAClBI,MAAAA,QAAQ,CAACQ,iBAAiB,CAACZ,cAAc,CAAC,CAAA;AAC5C,KAAA;AACF,GAAC,EAAE,CAACA,cAAc,EAAEI,QAAQ,CAAC,CAAC,CAAA;AAE9BM,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIT,QAAQ,EAAE;AACZG,MAAAA,QAAQ,CAACS,WAAW,CAACZ,QAAQ,CAAC,CAAA;AAChC,KAAA;AACF,GAAC,EAAE,CAACA,QAAQ,EAAEG,QAAQ,CAAC,CAAC,CAAA;AAExBM,EAAAA,SAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACU,gBAAgB,CAACZ,aAAa,IAAI,KAAK,CAAC,CAAA;AACnD,GAAC,EAAE,CAACA,aAAa,EAAEE,QAAQ,CAAC,CAAC,CAAA;AAE7BM,EAAAA,SAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACW,aAAa,CAACZ,UAAU,IAAI,EAAE,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACA,UAAU,EAAEC,QAAQ,CAAC,CAAC,CAAA;AAE1BM,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIZ,GAAG,CAACkB,OAAO,EAAE;AACfZ,MAAAA,QAAQ,CAACa,KAAK,CAACnB,GAAG,CAACkB,OAAO,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,OAAO,MAAM;MACXZ,QAAQ,CAACc,OAAO,EAAE,CAAA;KACnB,CAAA;AACH,GAAC,EAAE,CAACd,QAAQ,CAAC,CAAC,CAAA;EAEd,oBAAOe,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAM,CAAC,CAAA;AAC9B,CAAA;AAQO,MAAMuB,oBAAgD,GAGvD5B,qBAAqB;;ACrGpB,MAAM4B,kBAA2D,GAKlEjB,qBAA2B;;AAEjC;AACA;AACA;AACA;AACA;AACA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-query-devtools",
|
|
3
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"version": "5.0.0-alpha.63",
|
|
4
4
|
"description": "Developer tools to interact with and visualize the TanStack/react-query cache",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
},
|
|
13
13
|
"type": "module",
|
|
14
14
|
"types": "build/lib/index.d.ts",
|
|
15
|
-
"main": "build/lib/index.cjs",
|
|
16
|
-
"module": "build/lib/index.js",
|
|
15
|
+
"main": "build/lib/index.legacy.cjs",
|
|
16
|
+
"module": "build/lib/index.legacy.js",
|
|
17
17
|
"exports": {
|
|
18
18
|
".": {
|
|
19
19
|
"types": "./build/lib/index.d.ts",
|