Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳
When you begin your React Query journey, you'll want these devtools by your side. They help visualize all the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!
Please note that for now, the devtools do not support React Native. If you would like to help us make the devtools platform-agnostic, please let us know!
Exciting News: We now have a separate package for React Native React Query DevTools! This new addition brings native support, allowing you to integrate DevTools directly into your React Native projects. Check it out and contribute here: react-native-react-query-devtools
An external tool is also available that enables the use of React Query DevTools via an external dashboard. Find out more and contribute on react-query-external-sync
Note that since version 5, the dev tools support observing mutations as well.
The devtools are a separate package that you need to install:
npm i @tanstack/react-query-devtools
npm i @tanstack/react-query-devtools
or
pnpm add @tanstack/react-query-devtools
pnpm add @tanstack/react-query-devtools
or
yarn add @tanstack/react-query-devtools
yarn add @tanstack/react-query-devtools
or
bun add @tanstack/react-query-devtools
bun add @tanstack/react-query-devtools
For Next 13+ App Dir you must install it as a dev dependency for it to work.
You can import the devtools like this:
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
By default, React Query Devtools are only included in bundles when process.env.NODE_ENV === 'development', so you don't need to worry about excluding them during a production build.
Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}
Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools.
Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
function App() {
const [isOpen, setIsOpen] = React.useState(false)
return (
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<button
onClick={() => setIsOpen(!isOpen)}
>{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
{isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
</QueryClientProvider>
)
}
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
function App() {
const [isOpen, setIsOpen] = React.useState(false)
return (
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<button
onClick={() => setIsOpen(!isOpen)}
>{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
{isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
</QueryClientProvider>
)
}
Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
import * as React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { Example } from './Example'
const queryClient = new QueryClient()
const ReactQueryDevtoolsProduction = React.lazy(() =>
import('@tanstack/react-query-devtools/build/modern/production.js').then(
(d) => ({
default: d.ReactQueryDevtools,
}),
),
)
function App() {
const [showDevtools, setShowDevtools] = React.useState(false)
React.useEffect(() => {
// @ts-expect-error
window.toggleDevtools = () => setShowDevtools((old) => !old)
}, [])
return (
<QueryClientProvider client={queryClient}>
<Example />
<ReactQueryDevtools initialIsOpen />
{showDevtools && (
<React.Suspense fallback={null}>
<ReactQueryDevtoolsProduction />
</React.Suspense>
)}
</QueryClientProvider>
)
}
export default App
import * as React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { Example } from './Example'
const queryClient = new QueryClient()
const ReactQueryDevtoolsProduction = React.lazy(() =>
import('@tanstack/react-query-devtools/build/modern/production.js').then(
(d) => ({
default: d.ReactQueryDevtools,
}),
),
)
function App() {
const [showDevtools, setShowDevtools] = React.useState(false)
React.useEffect(() => {
// @ts-expect-error
window.toggleDevtools = () => setShowDevtools((old) => !old)
}, [])
return (
<QueryClientProvider client={queryClient}>
<Example />
<ReactQueryDevtools initialIsOpen />
{showDevtools && (
<React.Suspense fallback={null}>
<ReactQueryDevtoolsProduction />
</React.Suspense>
)}
</QueryClientProvider>
)
}
export default App
With this, calling window.toggleDevtools() will download the devtools bundle and show them.
If your bundler supports package exports, you can use the following import path:
const ReactQueryDevtoolsProduction = React.lazy(() =>
import('@tanstack/react-query-devtools/production').then((d) => ({
default: d.ReactQueryDevtools,
})),
)
const ReactQueryDevtoolsProduction = React.lazy(() =>
import('@tanstack/react-query-devtools/production').then((d) => ({
default: d.ReactQueryDevtools,
})),
)
For TypeScript, you would need to set moduleResolution: 'nodenext' in your tsconfig, which requires at least TypeScript v4.7.
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyGet the course