开发工具
对于 Chrome、Firefox 和 Edge 用户：有第三方浏览器扩展可用于直接在浏览器 DevTools 中调试 TanStack Query。这些扩展提供了与框架特定开发者工具包相同的功能
启用 devtools
devtools 帮助您调试和检查您的查询和突变。您可以通过在 provideTanStackQuery 中添加 withDevtools 来启用 devtools。
默认情况下，当 Angular 的 isDevMode 返回 true 时，devtools 将被启用。因此，您无需担心在生产构建中排除它们。核心工具是惰性加载的，并且不会包含在打包的代码中。在大多数情况下，您只需要在 provideTanStackQuery 中添加 withDevtools() 即可，无需任何额外配置。
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 处于开发模式时加载。
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 将在开发模式和生产模式下都加载。
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: true })),
)
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: true })),
)
当将该选项设置为 false 时，devtools 将不会加载。
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: false })),
)
provideTanStackQuery(
new QueryClient(),
withDevtools(() => ({ loadDevtools: false })),
)
withDevtools 选项是从一个回调函数返回的，以支持通过信号（signals）进行响应式处理。在下面的示例中，一个信号是从一个监听键盘快捷键的 RxJS observable 创建的。当事件触发时，devtools 将被惰性加载。使用此技术，您可以在生产模式下实现 devtools 的按需加载，而无需将完整的工具包含在打包的代码中。
@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 支持通过信号（signals）进行响应式处理。
- loadDevtools?: 'auto' | boolean
- 默认值为 auto：在开发模式下惰性加载 devtools。在生产模式下跳过加载。
- 使用此选项来控制 devtools 的加载。
- initialIsOpen?: Boolean
- 如果您希望工具默认展开，请将其设置为 true。
- buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
- 默认为 bottom-right
- 用于打开和关闭 devtools 面板的 TanStack logo 的位置。
- 如果为 relative，则按钮放置在您渲染开发者工具的位置。
- position?: "top" | "bottom" | "left" | "right"
- 默认为 bottom
- Angular Query devtools 面板的位置。
- client?: QueryClient,
- 使用此选项来使用自定义的 QueryClient。否则，将注入通过 provideTanStackQuery 提供的 QueryClient。
- errorTypes?: { name: string; initializer: (query: Query) => TError}[]
- 使用此选项可以预定义一些可以在您的查询上触发的错误。当在 UI 中切换该错误时，将调用初始化器（带上特定查询）。它必须返回一个 Error。
- styleNonce?: string
- 使用此项将 nonce 传递给添加到文档头部的 style 标签。如果您正在使用内容安全策略 (CSP) nonce 来允许内联样式，这将非常有用。
- shadowDOMTarget?: ShadowRoot
- 默认行为会将开发者工具的样式应用到 DOM 中的 head 标签。
- 使用此选项将影子 DOM 目标传递给开发者工具，以便样式将应用于影子 DOM 中，而不是在 light DOM 的 head 标签中。
