React Query: Add DevTools

Add to the root of your app where you include global providers (e.g., in a src/App.js file):

import { ReactQueryDevtools } from 'react-query/devtools'
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )
 }

The component will only be included if process.env.NODE_ENV is development. So, you don’t need to worry about it being shown in staging / production environments.

Sources

• Devtools – React Query docs