react-query-devtools

The `react-query-devtools` is a powerful and indispensable debugging and introspection tool specifically designed for applications using TanStack Query (formerly React Query). It provides a comprehensive visual interface to monitor, inspect, and troubleshoot the state of your queries and mutations, making the development process significantly smoother and more efficient.

Key Features and Benefits:

1. Visualizing Cache State: Easily see all active and inactive queries, their data, status (fetching, success, error), and last updated times. This helps understand how data is cached and revalidated.
2. Inspecting Query Data: Drill down into the actual data returned by each query, allowing you to verify data structures and content directly in the browser.
3. Monitoring Mutations: Observe the state of mutations, including their variables, status, and any errors, which is crucial for debugging data modifications.
4. Timeline View: A timeline visualizes the sequence of events, such as query fetches, mutations, cache invalidations, and data updates, offering a chronological overview of your application's data flow.
5. Debugging Tools: Provides quick actions like refetching queries, invalidating them, or resetting the cache directly from the devtools UI, which are extremely useful for testing different scenarios.
6. Performance Insights: Helps identify slow queries or excessive re-fetches, contributing to performance optimization.
7. Environment Agnostic: Works seamlessly across different React rendering environments (web, native with custom integration).

How to Install and Use:

`react-query-devtools` is typically installed as a development dependency. Once installed, you integrate it into your React application, usually within the root component or a dedicated layout component.

Installation:
```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
# OR
yarn add @tanstack/react-query @tanstack/react-query-devtools
```

Integration:
You wrap your application with `QueryClientProvider` and then render `ReactQueryDevtools` component. It can be rendered as a floating button (default) or an inline component.

* Floating Devtools (Recommended for most cases): Displays a small button that opens/closes the devtools panel. It's automatically stripped from production builds.
* Inline Devtools: Renders the devtools directly into your component tree. Useful for specific debugging layouts.

By default, the devtools are only included in development builds (`process.env.NODE_ENV === 'development'`). This means you don't need to manually remove them for production, as bundlers like Webpack or Rollup will automatically strip them out.

Example Code

import React from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

// Create a client for TanStack Query
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <h1>React Query Devtools Example</h1>
      <ExampleComponent />

      {/* 
        The ReactQueryDevtools component can be rendered anywhere in your app.
        It's automatically stripped out in production builds when NODE_ENV is 'production'.
      */}

      {/* Option 1: Floating Devtools (most common scenario) */}
      <ReactQueryDevtools initialIsOpen={false} />

      {/* 
        Option 2: Inline Devtools (uncomment to see an example of inline usage).
        This would render the devtools panel directly into the component tree.
        <ReactQueryDevtools initialIsOpen={true} position="bottom-right" />
      */}
    </QueryClientProvider>
  );
}

function ExampleComponent() {
  // Using a simple public API for demonstration purposes
  const { isLoading, error, data } = useQuery({
    queryKey: ['todos'], // Unique key for this query
    queryFn: () => // Function that fetches the data
      fetch('https://jsonplaceholder.typicode.com/todos?_limit=5')
        .then(res => res.json())
  });

  if (isLoading) return <p>Loading todos...</p>;
  if (error) return <p>An error occurred: {error.message}</p>;

  return (
    <div>
      <h2>Fetched Todos</h2>
      <ul>
        {data.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
      <p>
        Look for the TanStack Query Devtools button (typically a small icon) 
        in the bottom-left or bottom-right of your browser window. Click it 
        to open the devtools and inspect the 'todos' query, its data, status, and more!
      </p>
    </div>
  );
}

export default App;

/*
To run this example:

1.  Make sure you have Node.js and npm/yarn installed.
2.  Create a new React project (e.g., using Create React App or Vite):
    # For Create React App (with TypeScript template):
    npx create-react-app my-app --template typescript
    cd my-app

    # OR for Vite (with React TypeScript template):
    npm create vite@latest my-app -- --template react-ts
    cd my-app

3.  Install the necessary dependencies:
    npm install @tanstack/react-query @tanstack/react-query-devtools
    # OR
    yarn add @tanstack/react-query @tanstack/react-query-devtools

4.  Replace the content of src/App.tsx (or src/App.jsx) with the code above.
5.  Start the development server:
    npm start          # For Create React App
    # OR
    npm run dev        # For Vite

6.  Open your browser to http://localhost:3000 (or the port Vite uses) and look for the TanStack Query Devtools button.
*/

react-query-devtools

Example Code

Related Topics