Devtools

Schwenken Sie Ihre Hände in die Luft und rufen Sie Hurra, denn Solid Query wird mit dedizierten Devtools geliefert! 🥳

Wenn Sie Ihre Solid Query-Reise beginnen, sollten Sie diese Devtools an Ihrer Seite haben. Sie helfen, alle internen Abläufe von Solid Query zu visualisieren und sparen Ihnen wahrscheinlich Stunden beim Debugging, wenn Sie sich in einer Zwickmühle befinden!

Für Chrome-, Firefox- und Edge-Benutzer: Drittanbieter-Browsererweiterungen sind verfügbar, um TanStack Query direkt in den Browser-DevTools zu debuggen. Diese bieten die gleiche Funktionalität wie die Framework-spezifischen Devtools-Pakete

• Devtools für Chrome
• Devtools für Firefox
• Devtools für Edge

Die Devtools sind ein separates Paket, das Sie installieren müssen

npm i @tanstack/solid-query-devtools

npm i @tanstack/solid-query-devtools

oder

pnpm add @tanstack/solid-query-devtools

pnpm add @tanstack/solid-query-devtools

oder

yarn add @tanstack/solid-query-devtools

yarn add @tanstack/solid-query-devtools

oder

bun add @tanstack/solid-query-devtools

bun add @tanstack/solid-query-devtools

Sie können die Devtools wie folgt importieren

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

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

Standardmäßig sind die Solid Query Devtools nur in Bundles enthalten, wenn isServer === true (isServer kommt aus dem solid-js/web Paket), sodass Sie sich keine Gedanken darüber machen müssen, sie bei einem Produktionsbuild auszuschließen.

Der Floating Mode lädt die Devtools als festes, schwebendes Element in Ihrer App und bietet einen Schalter in der Ecke des Bildschirms, um die Devtools ein- und auszublenden. Dieser Schalterzustand wird in localStorage gespeichert und über Neuladungen hinweg beibehalten.

Platzieren Sie den folgenden Code so hoch wie möglich in Ihrer Solid-App. Je näher er sich am Stamm der Seite befindet, desto besser wird er funktionieren!

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
  • Setzen Sie dies auf true, wenn die Devtools standardmäßig geöffnet sein sollen
• buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  • Standardmäßig bottom-right
  • Die Position des Solid Query-Logos zum Öffnen und Schließen des Devtools-Panels
• position?: "top" | "bottom" | "left" | "right"
  • Standardmäßig bottom
  • Die Position des Solid Query Devtools-Panels
• client?: QueryClient,
  • Verwenden Sie dies, um einen benutzerdefinierten QueryClient zu verwenden. Andernfalls wird der aus dem nächsten Kontext verwendet.
• errorTypes?: { name: string; initializer: (query: Query) => TError}
  • Verwenden Sie dies, um einige Fehler vordefiniert zu definieren, die bei Ihren Abfragen ausgelöst werden können. Initializer wird aufgerufen (mit der spezifischen Abfrage), wenn dieser Fehler von der Benutzeroberfläche aktiviert wird. Es muss ein Error zurückgeben.
• styleNonce?: string
  • Verwenden Sie dies, um einen Nonce an das Style-Tag zu übergeben, das dem Dokument-Head hinzugefügt wird. Dies ist nützlich, wenn Sie eine Content Security Policy (CSP) Nonce verwenden, um Inline-Stile zuzulassen.
• shadowDOMTarget?: ShadowRoot
  • Das Standardverhalten wird die Devtool-Stile auf den Head-Tag innerhalb des DOM anwenden.
  • Verwenden Sie dies, um ein Shadow DOM-Ziel an die Devtools zu übergeben, damit die Stile innerhalb des Shadow DOM anstatt innerhalb des Head-Tags im Light DOM angewendet werden.