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

``bash
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):

`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(
<>

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
└── ...
``

!img