DevtoolsOptions

接口：DevtoolsOptions

用于配置 TanStack Query 开发者工具的选项。

属性

optional buttonPosition: DevtoolsButtonPosition;

optional buttonPosition: DevtoolsButtonPosition;

用于打开和关闭开发者工具面板的 TanStack 徽标的位置。 top-left | top-right | bottom-left | bottom-right | relative 默认为 bottom-right。

optional client: QueryClient;

optional client: QueryClient;

QueryClient 的自定义实例

optional errorTypes: DevtoolsErrorType[];

optional errorTypes: DevtoolsErrorType[];

使用此选项可以定义可在开发者工具中显示的自定义错误。

optional initialIsOpen: boolean;

optional initialIsOpen: boolean;

如果希望开发者工具默认打开，请将此项设置为 true

optional loadDevtools: boolean | "auto";

optional loadDevtools: boolean | "auto";

是否应加载开发者工具。

您可以使用 true 和 false 从环境文件覆盖加载开发者工具。例如，测试环境可能在生产模式下运行，但您可能希望加载开发者工具。

此外，您可以在回调中使用信号根据条件动态加载开发者工具。例如，从侦听��盘快捷键的 RxJS 可观察对象创建的信号。

示例

withDevtools(() => ({
  initialIsOpen: true,
  loadDevtools: inject(ExampleService).loadDevtools(),
}))

withDevtools(() => ({
  initialIsOpen: true,
  loadDevtools: inject(ExampleService).loadDevtools(),
}))

optional position: DevtoolsPosition;

optional position: DevtoolsPosition;

TanStack Query 开发者工具面板的位置。 top | bottom | left | right 默认为 bottom。

optional shadowDOMTarget: ShadowRoot;

optional shadowDOMTarget: ShadowRoot;

使用此选项可以将开发者工具的样式附加到 DOM 中的特定元素。

optional styleNonce: string;

optional styleNonce: string;

使用此选项可以将 nonce 传递给添加到文档头部的样式标签。如果您使用内容安全策略 (CSP) nonce 来允许内联样式，则此选项很有用。