ReactQuery developers have been careful to use this library with an intuitive, convenient, code-embedded debugging tool that makes it very efficient for ReactQuery developers to use the debugging tool to query the cache status of their own ReactQuery managed requests.

Start by importing devTools

import { ReactQueryDevtools } from 'react-query/devtools'
Copy the code

By default, devTools only works in the development loop process.env.node_env === ‘development’, so we don’t need to worry about debugging tools in production because the ReactQuery author has done the default nicely. Of course, if there are other custom configuration requirements, please refer to the configuration options below.

Floating debugging interface

By default, devTools uses fixed layout to position the entire debugger interface relative to the browser window, without affecting the layout of the page you are developing. Of course, you can also configure it to change the way you want it to exist, either by default or by custom embedded in the page.

import { ReactQueryDevtools } from 'react-query/devtools' function App() { return ( <QueryClientProvider Client ={queryClient}> {/* Components wrapped as far as possible */} <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider>)}Copy the code

Floating mode configuration options

initialIsOpen: Boolean True: The debugging tool interface is displayed during initialization
panelProps: PropsObject Can be found in<ReactQueryDevtools />Components pass properties such as :style, className (which overrides the default style) to customize the style of the debugger interface.
closeButtonProps: PropsObject Add a close button to the debugger component: also pass style, className, and onClick (extend default event)
toggleButtonProps: PropsObject Custom switch button, same as above
position? : "top-left" "top-right" "bottom-left" "bottom-right" Location of the debug screen: Bottom-left by default React Query logo Opens and closes the DevTools panel

Embedded debug panel

Embedded debug panels behave like normal components, taking up layout space on the page.

import { ReactQueryDevtoolsPanel } from 'react-query/devtools' function App() { return ( <QueryClientProvider client={queryClient}> {/* The rest of your application */} <ReactQueryDevtoolsPanel style={styles} className={className}  /> </QueryClientProvider> ) }Copy the code

Configuration options for embedded patterns

style: StyleObject React Specifies how objects are used in the inline style form of the react standard
className: string React Specifies how to use the react standard component class name

A wordy bird digs for gold