开发工具

挥舞双手，欢呼雀跃吧，因为 Solid Query 附带了专用的 devtools！🥳

当您开始 Solid Query 之旅时，您会希望这些 devtools 伴随您左右。它们有助于可视化 Solid Query 的所有内部工作机制，如果您陷入困境，它们很可能会为您节省数小时的调试时间！

对于 Chrome、Firefox 和 Edge 用户：有第三方浏览器扩展可用于直接在浏览器 DevTools 中调试 TanStack Query。这些扩展提供了与框架特定开发者工具包相同的功能

• Chrome 版 Devtools
• Firefox 版 Devtools
• Edge 版 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

您可以像这样导入开发者工具

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

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

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

浮动模式将把开发者工具作为固定浮动元素挂载到您的应用中，并在屏幕角落提供一个切换按钮来显示和隐藏开发者工具。此切换状态将存储在 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: 布尔值
  • 如果您希望开发者工具默认打开，请将其设置为 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 中切换该错误时，将调用初始化器（带上特定查询）。它必须返回一个 Error。
• styleNonce?: string
  • 使用此项将 nonce 传递给添加到文档头部的 style 标签。如果您正在使用内容安全策略 (CSP) nonce 来允许内联样式，这将非常有用。
• shadowDOMTarget?: ShadowRoot
  • 默认行为会将开发者工具的样式应用到 DOM 中的 head 标签。
  • 使用此选项将影子 DOM 目标传递给开发者工具，以便样式将应用于影子 DOM 中，而不是在 light DOM 的 head 标签中。