Query Key Used Viewer

A visual debug tool for inspecting where your globalQueryKeys are used in the app.
Works alongside @query-key-gen/used-generator.

🚀 Installation

pnpm add @query-key-gen/used-viewer

🧪 Requirements

• You must use @query-key-gen/used-generator to generate the queryKeyUsedInfo file.
• getInfo should return that generated array.

⚙️ Usage

Import and use the viewer inside your React app (e.g. in main.tsx):

import { QueryKeyUsedViewer } from '@query-key-gen/used-viewer/test';
import '@query-key-gen/used-viewer/style.css';

import { createRoot } from 'react-dom/client';
import App from './App';
import { queryKeyUsedInfo } from './query-key-used-info';

createRoot(document.getElementById('root')!).render(
    <>
        <App />
        <QueryKeyUsedViewer initialOpen={true} getInfo={() => queryKeyUsedInfo} />
    </>
);

🔧 Props

| Prop | Type | Description | | ------------- | -------------------------- | ---------------------------------------------------------------------------------- | | initialOpen | boolean | Whether the viewer should be open by default | | getInfo | () => QueryKeyUsedInfo[] | A function that returns the array of queryKeyUsedInfo collected by the generator |

🎯 Use Cases

• 🔍 Inspect which query keys are used where
• 🧹 Clean up unused queryKeys
• 📊 Debug React Query integration visually
• 🧠 Improve visibility into query usage

📦 File Structure Example

src/
├── App.tsx
├── main.tsx
├── query-key-used-info.ts  ← auto-generated
└── ...