tanstack-query-chrome-devtools

KO | EN

gitlite — search

#hacktoberfest #typescript #golang #go #android #rust #linux #docker #macos #java #cli #awesome-list #pytorch #open-source

tanstack-query-chrome-devtools

(★ 28)

A browser extension for debugging TanStack Query applications

tanstack-query-chrome-devtools 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# TanStack Query DevTools

A browser extension for debugging <a href="https://tanstack.com/query">TanStack Query</a> applications. 
 Inspect queries, mutations, and cache state — in real time.

---

## Features

- **Live query & mutation inspection** — see every query and mutation in your app update in real time
- **Detailed view** — drill into individual queries and mutations to see their status, data, and metadata
- **Data tree viewer** — explore query/mutation data as an interactive, expandable tree
- **Inline data editing** — modify cached query data directly from the devtools
- **Cache actions** — invalidate, refetch, reset, or remove queries; clear the mutation cache
- **Status badges** — at-a-glance status indicators (fresh, stale, fetching, paused, inactive, error)
- **Search & sort** — filter queries/mutations by key and sort by key, status, or last updated time
- **Popup & DevTools panel** — use as a standalone popup or as a panel inside browser DevTools
- **Cross-browser** — works on Chrome, Firefox, and Edge

## Quick Start

### Install from a store

Install directly from one of the browser add-on stores:

- [Chrome Web Store](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
- [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
- [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)

### Usage

#### 1. Expose your QueryClient on the window

The extension connects to your app by reading `window.__TANSTACK_QUERY_CLIENT__`. Add this to your app's entry point (e.g. `main.ts` / `main.tsx`):

```typescript
const queryClient = new QueryClient({/* ... */});

// TypeScript users: add the type declaration
declare global {
  interface Window {
    __TANSTACK_QUERY_CLIENT__: import("@tanstack/query-core").QueryClient;
  }
}

window.__TANSTACK_QUERY_CLIENT__ = queryClient;
```

#### 2. Open the extension

1. Navigate to your app in the browser.
2. The extension icon in the toolbar turns **colored** when a `QueryClient` is detected.
3. Click the icon to open the **popup**, or open **DevTools → TanStack Query** panel for the full experience.

## Development

### Prerequisites

- [Node.js](https://nodejs.org/) (LTS recommended)
- [pnpm](https://pnpm.io/)

### Setup

```bash
# Clone the repo
git clone https://github.com/DeeCode-inc/tanstack-query-chrome-devtools.git
cd tanstack-query-chrome-devtools

# Install dependencies
pnpm install

# Start dev server (Chrome)
pnpm dev

# Start dev server (Firefox)
pnpm dev:firefox
```

### Build

```bash
# Production build (Chrome)
pnpm build

# Production build (Firefox)
pnpm build:firefox

# Package as .zip for store submission
pnpm zip
pnpm zip:firefox
```

### Other scripts

| Command          | Description                                  |
| ---------------- | -------------------------------------------- |
| `pnpm check`     | Lint, format, and import-order check (Biome) |
| `pnpm check:fix` | Apply Biome fixes and formatting             |
| `pnpm lint`      | Lint only                                    |
| `pnpm format`    | Auto-format all files                        |
| `pnpm compile`   | Type-check with TypeScript                   |

## Tech Stack

- [WXT](https://wxt.dev/) — next-gen browser extension framework
- [React 19](https://react.dev/) — UI
- [Tailwind CSS 4](https://tailwindcss.com/) — styling
- [TypeScript](https://www.typescriptlang.org/) — type safety
- [Biome](https://biomejs.dev/) — linting and formatting
- [@tanstack/query-core](https://tanstack.com/query) — query type definitions

## Architecture

The extension consists of three main parts:

| Component                     | Description                                                            |
| ----------------------------- | ---------------------------------------------------------------------- |
| **Content scripts**           | Injected into web pages to detect TanStack Query and relay cache state |
| **Background service worker** | Routes messages between content scripts and UI surfaces                |
| **UI (Panel / Popup)**        | React app that renders the devtools interface                          |

Data flows from the page's `QueryClient` through content scripts → background → panel/popup via port-based messaging with snapshot + incremental update semantics.

## Contributing

Contributions are welcome! Please open an issue first to discuss what you'd like to change.

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

---

Built by <a href="https://github.com/DeeCode-inc">Dmytro Borysov</a>

tanstack-query-chrome-devtools

tanstack-query-chrome-devtools 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

tanstack-query-chrome-devtools

tanstack-query-chrome-devtools 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README