DevtoolsOptions
接口：DevtoolsOptions
用于配置 TanStack Query devtools 的选项。
属性
buttonPosition?
ts
optional buttonPosition: DevtoolsButtonPosition;
optional buttonPosition: DevtoolsButtonPosition;
用于打开和关闭 devtools 面板的 TanStack logo 的位置。top-left | top-right | bottom-left | bottom-right | relative 默认为 bottom-right。
定义于
client?
ts
optional client: QueryClient;
optional client: QueryClient;
QueryClient 的自定义实例
定义于
errorTypes?
ts
optional errorTypes: DevtoolsErrorType[];
optional errorTypes: DevtoolsErrorType[];
使用此项，以便您可以定义可在 devtools 中显示的自定义错误。
定义于
initialIsOpen?
ts
optional initialIsOpen: boolean;
optional initialIsOpen: boolean;
如果希望 devtools 默认打开，请设置为 true
定义于
loadDevtools?
ts
optional loadDevtools: boolean | "auto";
optional loadDevtools: boolean | "auto";
开发者工具是否应该加载。
- auto-（默认）在开发模式下延迟加载 devtools。在生产模式下跳过加载。
- true- 始终加载 devtools，无论环境如何。
- false- 永远不要加载 devtools，无论环境如何。
您可以使用 true 和 false 来覆盖从环境变量文件中加载开发者工具。例如，测试环境可能在生产模式下运行，但您可能希望加载开发者工具。
此外，您可以使用回调中的信号根据条件动态加载 devtools。例如，一个由 RxJS observable 创建的信号，该 observable 监听键盘快捷键。
示例
ts
withDevtools(() => ({
initialIsOpen: true,
loadDevtools: inject(ExampleService).loadDevtools(),
}))
withDevtools(() => ({
initialIsOpen: true,
loadDevtools: inject(ExampleService).loadDevtools(),
}))
定义于
position?
ts
optional position: DevtoolsPosition;
optional position: DevtoolsPosition;
TanStack Query devtools 面板的位置。top | bottom | left | right 默认为 bottom。
定义于
shadowDOMTarget?
ts
optional shadowDOMTarget: ShadowRoot;
optional shadowDOMTarget: ShadowRoot;
使用此项，以便您可以将 devtool 的样式附加到 DOM 中的特定元素。
定义于
styleNonce?
ts
optional styleNonce: string;
optional styleNonce: string;
使用此项将 nonce 传递给添加到文档头部的 style 标签。如果您正在使用内容安全策略 (CSP) nonce 来允许内联样式，这将非常有用。
