|
|
We're looking for TanStack Query Partners to join our mission! Partner with us to push the boundaries of TanStack Query and build amazing things together.
LET'S CHAT
[Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
> - 
[Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
> - 
[Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
## Enable devtools
The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.
By default, Angular Query Devtools are only included in development mode bundles, so you don't need to worry about excluding them during a production build.
```ts
import {
QueryClient,
provideTanStackQuery,
} from '@tanstack/angular-query-experimental'
import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
export const appConfig: ApplicationConfig = {
providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
}
```
## Devtools in production
Devtools are automatically excluded from production builds. However, it might be desirable to lazy load the devtools in production.
To use `withDevtools` in production builds, import using the `production` sub-path. The function exported from the production subpath is identical to the main one, but won't be excluded from production builds.
```ts
import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
```
To control when devtools are loaded, you can use the `loadDevtools` option.
When not setting the option or setting it to 'auto', the devtools will be loaded automatically only when Angular runs in development mode.
```ts
import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
provideTanStackQuery(new QueryClient(), withDevtools())
// which is equivalent to
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: 'auto' })),
)
```
When setting the option to true, the devtools will be loaded in both development and production mode.
This is useful if you want to load devtools based on [Angular environment configurations](https://angular.dev/tools/cli/environments). E.g. you could set this to true when the application is running on your production build staging environment.
```ts
import { environment } from './environments/environment'
// Make sure to use the production sub-path to load devtools in production builds
import { withDevtools } from '@tanstack/angular-query-experimental/devtools/production'
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: environment.loadDevtools })),
)
```
When setting the option to false, the devtools will not be loaded.
```ts
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: false })),
)
```
## Derive options through reactivity
Options are passed to `withDevtools` from a callback function to support reactivity through signals. In the following example
a signal is created from a RxJS observable that emits on a keyboard shortcut. When the derived signal is set to true, the devtools are lazily loaded.
The example below always loads devtools in development mode and loads on-demand in production mode when a keyboard shortcut is pressed.
```ts
import { Injectable, isDevMode } from '@angular/core'
import { fromEvent, map, scan } from 'rxjs'
import { toSignal } from '@angular/core/rxjs-interop'
@Injectable({ providedIn: 'root' })
export class DevtoolsOptionsManager {
loadDevtools = toSignal(
fromEventLoading...
} @else if (query.isError()) { Error: {{ query?.error().message }} } @else { @for (page of query?.data().pages; track $index) { @for (project of page.data; track project.id) {{{ project.name }} {{ project.id }}
} }In this example, each page of data remains visible as the next page is fetched. The buttons and capability to proceed to the next page are also suppressed until the next page cursor is known. Each page is cached as a normal query too, so when going to previous pages, you'll see them instantaneously while they are also re-fetched invisibly in the background.
@if (query.status() === 'pending') {{{ project.name }}
}{{ data.description }}
👀 {{ data.subscribers_count }} ✨ {{ data.stargazers_count }} 🍴 {{ data.forks_count }} } `, }) export class SimpleExampleComponent { http = inject(HttpClient) query = injectQuery(() => ({ queryKey: ['repoData'], queryFn: () => lastValueFrom( this.http.get [Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai)
> - [Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/)
> - [Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj)
## Install and Import the Devtools
The devtools are a separate package that you need to install:
```bash
npm i @tanstack/preact-query-devtools
```
or
```bash
pnpm add @tanstack/preact-query-devtools
```
or
```bash
yarn add @tanstack/preact-query-devtools
```
or
```bash
bun add @tanstack/preact-query-devtools
```
You can import the devtools like this:
```tsx
import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'
```
By default, Preact Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
## Floating Mode
Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
Place the following code as high in your Preact app as you can. The closer it is to the root of the page, the better it will work!
```tsx
import { PreactQueryDevtools } from '@tanstack/preact-query-devtools'
function App() {
return (
Loading...
) : status === 'error' ? (Error: {error.message}
) : ( <> {data.pages.map((group, i) => ({project.name}
))}{project.name}
))}