开发者工具 | TanStack Query Angular Docs

对于 Google Chrome 用户：有一个第三方 Chrome 扩展程序可用于直接在 Chrome 开发者工具中调试 TanStack Query。它提供与特定于框架的开发者工具包相同的功能。在此处查看：TanStack Query DevTools

启用开发者工具

开发者工具有助于您调试和检查您的查询和变更。您可以通过向 provideTanStackQuery 添加 withDevtools 来启用开发者工具。

默认情况下，当 Angular isDevMode 返回 true 时，开发者工具处于启用状态。因此，您无需担心在生产构建期间排除它们。核心工具是延迟加载的，并且会从打包的代码中排除。在大多数情况下，您只需向 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())],
}

配置是否加载开发者工具

如果您需要更好地控制开发者工具的加载时间，可以使用 loadDevtools 选项。如果您想根据环境配置加载开发者工具，这尤其有用。例如，您可能有一个在生产模式下运行的测试环境，但仍需要开发者工具可用。

当未设置该选项或将其设置为“auto”时，开发者工具将在 Angular 处于开发模式时加载。

provideTanStackQuery(new QueryClient(), withDevtools())

// 等同于
provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: 'auto' })),
)

provideTanStackQuery(new QueryClient(), withDevtools())

// 等同于
provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: 'auto' })),
)

当将选项设置为 true 时，开发者工具将在开发和生产模式下加载。

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: true })),
)

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: true })),
)

当将选项设置为 false 时，开发者工具将不会加载。

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: false })),
)

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: false })),
)

withDevtools 选项从回调函数返回，以支持通过信号实现响应式。在以下示例中，从一个 RxJS observable 创建一个信号，该 observable 侦听键盘快捷键。当触发事件时，开发者工具会延迟加载。使用此技术，即使在生产模式下，您也可以支持按需加载开发者工具，而无需在捆绑代码中包含完整的工具。

@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：在开发模式下延迟加载开发者工具。在生产模式下跳过加载。
- 使用此选项控制是否加载开发者工具。
initialIsOpen?: Boolean
- 如果希望工具默认打开，请将此项设置为 true
buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
- 默认为 bottom-right
- 用于打开和关闭开发者工具面板的 TanStack 徽标的位置
- 如果为 relative，则按钮放置在您渲染开发者工具的位置。
position?: "top" | "bottom" | "left" | "right"
- 默认为 bottom
- Angular Query 开发者工具面板的位置
client?: QueryClient,
- 使用此选项可使用自定义 QueryClient。否则，将注入通过 provideTanStackQuery 提供的 QueryClient。
errorTypes?: { name: string; initializer: (query: Query) => TError}[]
- 使用此选项可预定义一些可以在查询中触发的错误。当从 UI 中切换该错误时，将调用初始化程序（使用特定查询）。它必须返回一个 Error。
styleNonce?: string
- 使用此选项可将 nonce 传递给添加到文档头部的样式标签。如果您使用内容安全策略 (CSP) nonce 来允许内联样式，则此选项很有用。
shadowDOMTarget?: ShadowRoot
- 默认行为会将开发者工具的样式应用于 DOM 中的 head 标签。
- 使用此选项可将 shadow DOM 目标传递给开发者工具，以便样式将应用于 shadow DOM 内部，而不是 light DOM 中的 head 标签内部。