You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/framework/angular/devtools.md
+59-18Lines changed: 59 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,27 +13,38 @@ title: Devtools
13
13
14
14
The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.
15
15
16
-
By default, the devtools are enabled when Angular [`isDevMode`](https://angular.dev/api/core/isDevMode) returns true. So you don't need to worry about excluding them during a production build. The core tools are lazily loaded and excluded from bundled code. In most cases, all you'll need to do is add `withDevtools()` to `provideTanStackQuery` without any additional configuration.
16
+
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.
If you need more control over when devtools are loaded, you can use the `loadDevtools` option. This is particularly useful if you want to load devtools based on environment configurations. For instance, you might have a test environment running in production mode but still require devtools to be available.
33
+
Devtools are automatically excluded from production builds. However, it might be desirable to lazy load the devtools in production.
33
34
34
-
When not setting the option or setting it to 'auto', the devtools will be loaded when Angular is in development mode.
35
+
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.
When setting the option to true, the devtools will be loaded in both development and production mode.
47
58
59
+
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.
The `withDevtools` options are returned from a callback function to support reactivity through signals. In the following example
65
-
a signal is created from a RxJS observable that listens for a keyboard shortcut. When the event is triggered, the devtools are lazily loaded.
66
-
Using this technique allows you to support on-demand loading of the devtools even in production mode, without including the full tools in the bundled code.
81
+
## Derive options through reactivity
82
+
83
+
Options are passed to `withDevtools` from a callback function to support reactivity through signals. In the following example
84
+
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.
85
+
86
+
The example below always loads devtools in development mode and loads on-demand in production mode when a keyboard shortcut is pressed.
If you want to use an injectable such as a service in the callback you can use `deps`. The injected value will be passed as parameter to the callback function.
111
+
112
+
This is similar to `deps` in Angular's [`useFactory`](https://angular.dev/guide/di/dependency-injection-providers#factory-providers-usefactory) provider.
113
+
114
+
```ts
115
+
// ...
116
+
// 👇 Note we import from the production sub-path to enable devtools lazy loading in production builds
// `deps` is used to inject and pass `DevtoolsOptionsManager` to the `withDevtools` callback.
130
+
deps: [DevtoolsOptionsManager],
131
+
},
132
+
),
94
133
),
95
134
],
96
135
}
97
136
```
98
137
99
-
### Options
138
+
### Options returned from the callback
100
139
101
-
Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
140
+
Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
102
141
103
142
-`loadDevtools?: 'auto' | boolean`
104
143
- Defaults to `auto`: lazily loads devtools when in development mode. Skips loading in production mode.
@@ -121,3 +160,5 @@ Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `init
121
160
-`shadowDOMTarget?: ShadowRoot`
122
161
- Default behavior will apply the devtool's styles to the head tag within the DOM.
123
162
- Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
163
+
-`hideDisabledQueries?: boolean`
164
+
- Set this to true to hide disabled queries from the devtools panel.
Defined in: [inject-infinite-query.ts:65](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L65)
Defined in: [inject-infinite-query.ts:89](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-infinite-query.ts#L89)
![autofix-ci[bot]](https://avatars.githubusercontent.com/in/243519?v=4&size=40){kind=avatar}
0 commit comments