+
-
+
+
-
-
- 
-
-
- 
-
-
-
- 
-
- |
- - - Become a Sponsor! - - | -
+
+ 
+ |
+
+
+ 
+ |
+
-
- 
-
- |
- - - Become a Sponsor! - - | -
-
- 
-
- |
- - - Become a Sponsor! - - | -
-
- 
-
- |
- - - Become a Sponsor! - - | -
-
- 
-
- |
-
-
|
- - - Become a Supporter! - - | -
-
- 
-
- |
-
- - - Become a Fan! - - | -
Loading...
- ) : pages ? ( - <> - {pages.map((page, i) => ( -{project.name}
- ))} -
++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.getLoading...
+ ) : status === 'error' ? ( +Error: {error.message}
+ ) : ( + <> + {data.pages.map((group, i) => ( +{project.name}
+ ))} +{project.name}
+ ))} +
+ 
+
-
