Devtools
安装和导入 Devtools
devtools 是一个独立的包，你需要安装它
bash
npm i @tanstack/svelte-query-devtools
npm i @tanstack/svelte-query-devtools
或
bash
pnpm add @tanstack/svelte-query-devtools
pnpm add @tanstack/svelte-query-devtools
或
bash
yarn add @tanstack/svelte-query-devtools
yarn add @tanstack/svelte-query-devtools
或
bash
bun add @tanstack/svelte-query-devtools
bun add @tanstack/svelte-query-devtools
你可以像这样导入 devtools
ts
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
浮动模式
浮动模式会将 devtools 作为固定的浮动元素挂载到你的应用中，并在屏幕角落提供一个切换按钮来显示和隐藏 devtools。这个切换状态将被存储并在重新加载后在 localStorage 中记住。
将以下代码尽可能放在你的 Svelte 应用的顶部。越靠近页面根目录，效果越好！
ts
<script>
import { QueryClientProvider } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
</script>
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<SvelteQueryDevtools />
</QueryClientProvider>
<script>
import { QueryClientProvider } from '@tanstack/svelte-query'
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
</script>
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<SvelteQueryDevtools />
</QueryClientProvider>
选项
- initialIsOpen: Boolean
- 如果你希望 devtools 默认打开，请将其设置为 true
- buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
- 默认为 bottom-right
- 用于打开和关闭 devtools 面板的 TanStack 标志的位置
- 如果为 relative，按钮将放置在你渲染 devtools 的位置。
- position?: "top" | "bottom" | "left" | "right"
- 默认为 bottom
- Svelte Query devtools 面板的位置
- client?: QueryClient,
- 使用此选项可使用自定义 QueryClient。否则，将使用来自最近上下文的 QueryClient。
- errorTypes?: { name: string; initializer: (query: Query) => TError}
- 使用此选项可预定义一些可以在你的查询上触发的错误。当从 UI 切换打开该错误时，将调用 Initializer（使用特定的查询）。它必须返回一个 Error。
- styleNonce?: string
- 使用此选项可将 nonce 传递给添加到文档 head 中的 style 标签。如果你正在使用内容安全策略 (CSP) nonce 来允许内联样式，这将非常有用。
- shadowDOMTarget?: ShadowRoot
- 默认行为会将 devtools 的样式应用于 DOM 中 head 标签。
- 使用此选项可将 shadow DOM 目标传递给 devtools，以便样式将应用于 shadow DOM 内，而不是 light DOM 中的 head 标签内。
