React Query Cache Inspector for VS Code

Monitor and visualize your React Query cache directly inside VS Code — no browser DevTools needed.

React Query Cache Inspector is a VS Code extension that brings real-time cache monitoring from your browser into your editor. It's designed to streamline your development workflow — giving you instant visibility into your React Query state without switching contexts.

Features

• 🔍 Real-time Cache Monitoring - See your React Query cache update live as your application runs
• 🌲 Tree View Visualization - Explore cache data in a hierarchical, expandable tree structure
• 🎯 Status Indicators - Quickly identify query states with visual icons:
  • ✅ Success
  • 🔄 Loading
  • ❌ Error
  • ⚪ Idle
• 📊 Nested Data Inspection - Drill down into complex objects and arrays
• 🔌 Easy Setup - Simple browser extension + VS Code extension combo

Installation

1. Install the VS Code Extension

# Clone the repository
git clone https://github.com/yourusername/react-query-cache-inspector.git
cd react-query-cache-inspector

# Install dependencies
npm install

# Compile the extension
npm run compile

# Package the extension
vsce package

# Install the .vsix file in VS Code
code --install-extension react-query-cache-inspector-0.0.1.vsix

Or install directly from the VS Code Marketplace (coming soon).

2. Install the Browser Extension

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" (toggle in the top right)
3. Click "Load unpacked"
4. Select the browser-extension folder from this project

Note: Currently supports Chrome/Chromium-based browsers. Firefox support coming soon.

⚙️ Usage

1. Expose your React Query QueryClient (one-line setup)

In your root file (usually main.tsx or index.tsx), expose the QueryClient globally in development mode only.
This allows the VS Code Inspector to detect and read your app's cache.

ts
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const queryClient = new QueryClient();

// ✅ Expose only in dev mode
if (process.env.NODE_ENV === 'development') {
  (window as any).__REACT_QUERY_CLIENT__ = queryClient;
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

2. Start your React Query application in the browser (e.g., http://localhost:3000)

3. Open VS Code and look for the React Query icon in the Activity Bar (left sidebar)

4. Click on "Cache Inspector" to open the cache view

5. Refresh your browser page - the extension will automatically connect and start streaming cache data

6. Explore your cache:

   • Click on query keys to expand/collapse data
   • Hover over items to see full JSON in tooltips
   • Watch queries update in real-time as your app fetches data

How It Works

The extension works in three parts:

1. Browser Script: Locates the React Query QueryClient instance and extracts cache snapshots
2. WebSocket Bridge: Streams data from browser to VS Code over ws://localhost:4040
3. VS Code UI: Displays cache in an interactive tree view

Requirements

• VS Code version 1.105.0 or higher
• Chrome/Chromium-based browser
• Node.js 18+ (for development)
• A React application using @tanstack/react-query (v4 or v5)

Configuration

The extension currently uses hardcoded settings. Future versions will support:

• Filter queries by status
• Search functionality

Development

Setup

# Install dependencies
npm install

# Watch mode for development
npm run watch

# Type check
npm run check-types

Debug the Extension

1. Press F5 in VS Code to open a new Extension Development Host window
2. Open a React Query project
3. Load the browser extension in Chrome
4. View cache data in the React Query sidebar

Project Structure

.
├── browser-extension/      # Chrome extension files
│   ├── manifest.json       # Extension manifest
│   ├── background.js       # WebSocket client
│   ├── contentScript.js    # Injection handler
│   └── inject.js          # Cache extraction script
├── src/                   # VS Code extension source
│   ├── extension.ts       # Main entry point
│   ├── websocket-server.ts # WebSocket server
│   ├── CacheTreeDataProvider.ts # Tree view logic
│   └── types.ts          # TypeScript definitions
└── out/                  # Compiled output

Troubleshooting

Extension not showing cache data?

1. Check the browser extension is enabled in chrome://extensions/
2. Ensure your React app is running and using React Query
3. Verify the WebSocket connection: Open browser DevTools → Console → Look for [RQ Inspector] Connected to VS Code
4. Check VS Code's Output panel (View → Output → React Query Inspector)

WebSocket connection failed?

• Make sure port 4040 is not in use by another application
• Check your firewall settings allow local connections on port 4040

Cache not updating?

• Refresh the browser page to re-establish the connection
• Verify your React Query setup exports the QueryClient instance to window

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by React Query DevTools
• Built with VS Code Extension API
• Uses ws for WebSocket communication

Support

• 🐛 Report bugs: GitHub Issues
• 📧 Email: menukfernando7@gmail.com

---

Made with ❤️ for the React Query community