Devtools
启用 devtools
devtools 帮助您调试和检查您的 queries 和 mutations。您可以通过将 withDevtools 添加到 provideTanStackQuery 来启用 devtools。
默认情况下，当 Angular isDevMode 返回 true 时，devtools 将被启用。因此您无需担心在生产构建期间排除它们。核心工具被延迟加载并从捆绑代码中排除。在大多数情况下，您只需将 withDevtools() 添加到 provideTanStackQuery，无需任何额外的配置。
ts
import {
QueryClient,
provideTanStackQuery,
withDevtools,
} from '@tanstack/angular-query-experimental'
export const appConfig: ApplicationConfig = {
providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
}
import {
QueryClient,
provideTanStackQuery,
withDevtools,
} from '@tanstack/angular-query-experimental'
export const appConfig: ApplicationConfig = {
providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
}
配置 devtools 是否加载
如果您需要更多地控制 devtools 何时加载，您可以使用 loadDevtools 选项。如果您想基于环境配置加载 devtools，这将特别有用。例如，您可能有一个在生产模式下运行但仍然需要 devtools 可用的测试环境。
当不设置该选项或将其设置为 'auto' 时，devtools 将在 Angular 处于开发模式时加载。
ts
provideTanStackQuery(new QueryClient(), withDevtools())
// which is equivalent to
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: 'auto' })),
)
provideTanStackQuery(new QueryClient(), withDevtools())
// which is equivalent to
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: 'auto' })),
)
当将该选项设置为 true 时，devtools 将在开发和生产模式下都加载。
ts
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: true })),
)
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: true })),
)
当将该选项设置为 false 时，devtools 将不会被加载。
ts
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: false })),
)
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: false })),
)
withDevtools 选项从回调函数返回，以支持通过信号的反应性。在以下示例中，信号是从 RxJS observable 创建的，该 observable 监听键盘快捷键。当事件被触发时，devtools 会被延迟加载。使用此技术，即使在生产模式下，您也可以支持 devtools 的按需加载，而无需在捆绑代码中包含完整的工具。
ts
@Injectable({ providedIn: 'root' })
class DevtoolsOptionsManager {
loadDevtools = toSignal(
fromEvent<KeyboardEvent>(document, 'keydown').pipe(
map(
(event): boolean =>
event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
),
scan((acc, curr) => acc || curr, false),
),
{
initialValue: false,
},
)
}
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({
initialIsOpen: true,
loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
})),
),
],
}
@Injectable({ providedIn: 'root' })
class DevtoolsOptionsManager {
loadDevtools = toSignal(
fromEvent<KeyboardEvent>(document, 'keydown').pipe(
map(
(event): boolean =>
event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
),
scan((acc, curr) => acc || curr, false),
),
{
initialValue: false,
},
)
}
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({
initialIsOpen: true,
loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
})),
),
],
}
选项
在这些选项中，client、 position、 errorTypes、 buttonPosition 和 initialIsOpen 支持通过信号的反应性。
- loadDevtools?: 'auto' | boolean
- 默认为 auto：在开发模式下延迟加载 devtools。在生产模式下跳过加载。
- 使用此选项来控制 devtools 是否加载。
- initialIsOpen?: Boolean
- 如果您希望工具默认打开，请将其设置为 true
- buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
- 默认为 bottom-right
- 用于打开和关闭 devtools 面板的 TanStack 徽标的位置
- 如果为 relative，按钮将放置在您渲染 devtools 的位置。
- position?: "top" | "bottom" | "left" | "right"
- 默认为 bottom
- Angular Query devtools 面板的位置
- client?: QueryClient,
- 使用此选项可使用自定义 QueryClient。否则，将注入通过 provideTanStackQuery 提供的 QueryClient。
- errorTypes?: { name: string; initializer: (query: Query) => TError}[]
- 使用此选项可预定义一些可以在您的 queries 上触发的错误。当从 UI 上切换该错误时，将调用 Initializer（使用特定的 query）。它必须返回一个 Error。
- styleNonce?: string
- 使用此选项可将 nonce 传递给添加到文档 head 的 style 标签。如果您正在使用内容安全策略 (CSP) nonce 来允许内联样式，这将非常有用。
- shadowDOMTarget?: ShadowRoot
- 默认行为会将 devtools 的样式应用于 DOM 中的 head 标签。
- 使用此选项可将 shadow DOM 目标传递给 devtools，以便样式将应用于 shadow DOM 内而不是 light DOM 中的 head 标签内。
