This commit is contained in:
2026-03-18 20:54:43 +01:00
parent b3c8b77f12
commit 9fe656b34c
8058 changed files with 912898 additions and 23 deletions
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021-present Tanner Linsley
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+96
View File
@@ -0,0 +1,96 @@
{
"name": "@tanstack/react-query-devtools",
"version": "5.91.3",
"description": "Developer tools to interact with and visualize the TanStack/react-query cache",
"author": "tannerlinsley",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/TanStack/query.git",
"directory": "packages/react-query-devtools"
},
"homepage": "https://tanstack.com/query",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"type": "module",
"types": "build/legacy/index.d.ts",
"main": "build/legacy/index.cjs",
"module": "build/legacy/index.js",
"exports": {
".": {
"@tanstack/custom-condition": "./src/index.ts",
"import": {
"types": "./build/modern/index.d.ts",
"default": "./build/modern/index.js"
},
"require": {
"types": "./build/modern/index.d.cts",
"default": "./build/modern/index.cjs"
}
},
"./production": {
"import": {
"types": "./build/modern/production.d.ts",
"default": "./build/modern/production.js"
},
"require": {
"types": "./build/modern/production.d.cts",
"default": "./build/modern/production.cjs"
}
},
"./build/modern/production.js": {
"import": {
"types": "./build/modern/production.d.ts",
"default": "./build/modern/production.js"
},
"require": {
"types": "./build/modern/production.d.cts",
"default": "./build/modern/production.cjs"
}
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"build",
"src",
"!src/__tests__"
],
"dependencies": {
"@tanstack/query-devtools": "5.93.0"
},
"devDependencies": {
"@testing-library/react": "^16.1.0",
"@types/react": "^19.2.7",
"@vitejs/plugin-react": "^4.3.4",
"npm-run-all2": "^5.0.0",
"react": "^19.2.1",
"@tanstack/react-query": "5.90.20"
},
"peerDependencies": {
"react": "^18 || ^19",
"@tanstack/react-query": "^5.90.20"
},
"scripts": {
"clean": "premove ./build ./coverage ./dist-ts",
"compile": "tsc --build",
"test:eslint": "eslint --concurrency=auto ./src",
"test:types": "npm-run-all --serial test:types:*",
"test:types:ts50": "node ../../node_modules/typescript50/lib/tsc.js --build tsconfig.legacy.json",
"test:types:ts51": "node ../../node_modules/typescript51/lib/tsc.js --build tsconfig.legacy.json",
"test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js --build tsconfig.legacy.json",
"test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js --build tsconfig.legacy.json",
"test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js --build tsconfig.legacy.json",
"test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build tsconfig.legacy.json",
"test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build tsconfig.legacy.json",
"test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build tsconfig.legacy.json",
"test:types:tscurrent": "tsc --build",
"test:lib": "vitest",
"test:lib:dev": "pnpm run test:lib --watch",
"test:build": "publint --strict && attw --pack",
"build": "tsup --tsconfig tsconfig.prod.json",
"build:dev": "tsup --watch"
}
}
@@ -0,0 +1,128 @@
'use client'
import * as React from 'react'
import { onlineManager, useQueryClient } from '@tanstack/react-query'
import { TanstackQueryDevtools } from '@tanstack/query-devtools'
import type {
DevtoolsButtonPosition,
DevtoolsErrorType,
DevtoolsPosition,
Theme,
} from '@tanstack/query-devtools'
import type { QueryClient } from '@tanstack/react-query'
export interface DevtoolsOptions {
/**
* Set this true if you want the dev tools to default to being open
*/
initialIsOpen?: boolean
/**
* The position of the React Query logo to open and close the devtools panel.
* 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
* Defaults to 'bottom-right'.
*/
buttonPosition?: DevtoolsButtonPosition
/**
* The position of the React Query devtools panel.
* 'top' | 'bottom' | 'left' | 'right'
* Defaults to 'bottom'.
*/
position?: DevtoolsPosition
/**
* Custom instance of QueryClient
*/
client?: QueryClient
/**
* Use this so you can define custom errors that can be shown in the devtools.
*/
errorTypes?: Array<DevtoolsErrorType>
/**
* Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
*/
styleNonce?: string
/**
* Use this so you can attach the devtool's styles to specific element in the DOM.
*/
shadowDOMTarget?: ShadowRoot
/**
* Set this to true to hide disabled queries from the devtools panel.
*/
hideDisabledQueries?: boolean
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme
}
export function ReactQueryDevtools(
props: DevtoolsOptions,
): React.ReactElement | null {
const queryClient = useQueryClient(props.client)
const ref = React.useRef<HTMLDivElement>(null)
const {
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme,
} = props
const [devtools] = React.useState(
new TanstackQueryDevtools({
client: queryClient,
queryFlavor: 'React Query',
version: '5',
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme,
}),
)
React.useEffect(() => {
devtools.setClient(queryClient)
}, [queryClient, devtools])
React.useEffect(() => {
if (buttonPosition) {
devtools.setButtonPosition(buttonPosition)
}
}, [buttonPosition, devtools])
React.useEffect(() => {
if (position) {
devtools.setPosition(position)
}
}, [position, devtools])
React.useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false)
}, [initialIsOpen, devtools])
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || [])
}, [errorTypes, devtools])
React.useEffect(() => {
devtools.setTheme(theme)
}, [theme, devtools])
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current)
}
return () => {
devtools.unmount()
}
}, [devtools])
return <div dir="ltr" className="tsqd-parent-container" ref={ref}></div>
}
@@ -0,0 +1,112 @@
'use client'
import * as React from 'react'
import { onlineManager, useQueryClient } from '@tanstack/react-query'
import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
import type { QueryClient } from '@tanstack/react-query'
export interface DevtoolsPanelOptions {
/**
* Custom instance of QueryClient
*/
client?: QueryClient
/**
* Use this so you can define custom errors that can be shown in the devtools.
*/
errorTypes?: Array<DevtoolsErrorType>
/**
* Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
*/
styleNonce?: string
/**
* Use this so you can attach the devtool's styles to specific element in the DOM.
*/
shadowDOMTarget?: ShadowRoot
/**
* Custom styles for the devtools panel
* @default { height: '500px' }
* @example { height: '100%' }
* @example { height: '100%', width: '100%' }
*/
style?: React.CSSProperties
/**
* Callback function that is called when the devtools panel is closed
*/
onClose?: () => unknown
/**
* Set this to true to hide disabled queries from the devtools panel.
*/
hideDisabledQueries?: boolean
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme
}
export function ReactQueryDevtoolsPanel(
props: DevtoolsPanelOptions,
): React.ReactElement | null {
const queryClient = useQueryClient(props.client)
const ref = React.useRef<HTMLDivElement>(null)
const {
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme,
} = props
const [devtools] = React.useState(
new TanstackQueryDevtoolsPanel({
client: queryClient,
queryFlavor: 'React Query',
version: '5',
onlineManager,
buttonPosition: 'bottom-left',
position: 'bottom',
initialIsOpen: true,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose: props.onClose,
hideDisabledQueries,
theme,
}),
)
React.useEffect(() => {
devtools.setClient(queryClient)
}, [queryClient, devtools])
React.useEffect(() => {
devtools.setOnClose(props.onClose ?? (() => {}))
}, [props.onClose, devtools])
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || [])
}, [errorTypes, devtools])
React.useEffect(() => {
devtools.setTheme(theme)
}, [theme, devtools])
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current)
}
return () => {
devtools.unmount()
}
}, [devtools])
return (
<div
style={{ height: '500px', ...props.style }}
className="tsqd-parent-container"
ref={ref}
></div>
)
}
+20
View File
@@ -0,0 +1,20 @@
'use client'
import * as Devtools from './ReactQueryDevtools'
import * as DevtoolsPanel from './ReactQueryDevtoolsPanel'
export const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =
process.env.NODE_ENV !== 'development'
? function () {
return null
}
: Devtools.ReactQueryDevtools
export const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =
process.env.NODE_ENV !== 'development'
? function () {
return null
}
: DevtoolsPanel.ReactQueryDevtoolsPanel
export type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions
@@ -0,0 +1,7 @@
'use client'
import * as Devtools from './ReactQueryDevtools'
import * as DevtoolsPanel from './ReactQueryDevtoolsPanel'
export const ReactQueryDevtools = Devtools.ReactQueryDevtools
export const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel