Devtools

Solid Query 配备了专门的 devtools，欢呼雀跃吧！🥳

当您开始 Solid Query 之旅时，您会希望这些 devtools 在您身边。它们有助于可视化 Solid Query 的所有内部运作，如果您发现自己处于困境，它们可能会为您节省数小时的调试时间！

devtools 是一个单独的包，您需要安装它

npm i @tanstack/solid-query-devtools

npm i @tanstack/solid-query-devtools

或

pnpm add @tanstack/solid-query-devtools

pnpm add @tanstack/solid-query-devtools

或

yarn add @tanstack/solid-query-devtools

yarn add @tanstack/solid-query-devtools

或

bun add @tanstack/solid-query-devtools

bun add @tanstack/solid-query-devtools

您可以像这样导入 devtools

import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'

import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'

默认情况下，Solid Query Devtools 仅在 isServer === true 时包含在 bundle 中（isServer 来自 solid-js/web 包），因此您无需担心在生产构建期间排除它们。

浮动模式会将 devtools 作为固定的浮动元素挂载到您的应用程序中，并在屏幕角落提供一个切换按钮来显示和隐藏 devtools。此切换状态将被存储并记录在 localStorage 中，以便在重新加载后仍然保留。

尽可能将以下代码放在 Solid 应用程序的顶部。 它越靠近页面根目录，效果越好！

import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <SolidQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <SolidQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

• initialIsOpen: Boolean
  • 如果您希望 devtools 默认打开，请设置为 true
• buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  • 默认为 bottom-right
  • 用于打开和关闭 devtools 面板的 Solid Query 标志的位置
• position?: "top" | "bottom" | "left" | "right"
  • 默认为 bottom
  • Solid 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 标签内。