Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@tanstack/react-query-devtools

Package Overview
Dependencies
Maintainers
2
Versions
559
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tanstack/react-query-devtools - npm Package Compare versions

Comparing version
5.0.0-alpha.48
 to
5.0.0-alpha.49
+2
-2
package.json
{
"name": "@tanstack/react-query-devtools",
"version": "5.0.0-alpha.48",
"version": "5.0.0-alpha.49",
"description": "Developer tools to interact with and visualize the TanStack/react-query cache",

@@ -16,3 +16,3 @@ "author": "tannerlinsley",

"main": "build/lib/index.js",
"module": "build/lib/index.esm.js",
"module": "build/lib/index.mjs",
"exports": {

@@ -19,0 +19,0 @@ ".": {

-59
build/lib/devtools.esm.js
'use client';
import React, { useRef, useState, useEffect } from 'react';
import { useQueryClient, onlineManager } from '@tanstack/react-query';
import { TanstackQueryDevtools } from '@tanstack/query-devtools';
function ReactQueryDevtools(props) {
const queryClient = useQueryClient();
const client = props.client || queryClient;
const ref = useRef(null);
const {
buttonPosition,
position,
initialIsOpen,
errorTypes
} = props;
const [devtools] = useState(new TanstackQueryDevtools({
client: client,
queryFlavor: 'React Query',
version: '5',
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes
}));
useEffect(() => {
devtools.setClient(client);
}, [client, devtools]);
useEffect(() => {
if (buttonPosition) {
devtools.setButtonPosition(buttonPosition);
}
}, [buttonPosition, devtools]);
useEffect(() => {
if (position) {
devtools.setPosition(position);
}
}, [position, devtools]);
useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false);
}, [initialIsOpen, devtools]);
useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /*#__PURE__*/React.createElement("div", {
ref: ref
});
}
export { ReactQueryDevtools };
//# sourceMappingURL=devtools.esm.js.map
-1
build/lib/devtools.esm.js.map
{"version":3,"file":"devtools.esm.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\nexport function ReactQueryDevtools(\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"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools","ref"],"mappings":";;;;;AAuCO;AAGL;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;;"}
-16
build/lib/index.esm.js
'use client';
import { ReactQueryDevtools as ReactQueryDevtools$1 } from './devtools.esm.js';
const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? function () {
return null;
} : ReactQueryDevtools$1;
// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
// process.env.NODE_ENV !== 'development'
// ? (function () {
// return null
// } as any)
// : devtools.ReactQueryDevtoolsPanel
export { ReactQueryDevtools };
//# sourceMappingURL=index.esm.js.map
-1
build/lib/index.esm.js.map
{"version":3,"file":"index.esm.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;;"}
build/lib/index.prod.esm.js

Sorry, the diff of this file is too big to display

build/lib/index.prod.esm.js.map

Sorry, the diff of this file is too big to display