Devtools

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/svelte-query-devtools

npm i @tanstack/svelte-query-devtools

oder

pnpm add @tanstack/svelte-query-devtools

pnpm add @tanstack/svelte-query-devtools

oder

yarn add @tanstack/svelte-query-devtools

yarn add @tanstack/svelte-query-devtools

oder

bun add @tanstack/svelte-query-devtools

bun add @tanstack/svelte-query-devtools

Sie können die Devtools wie folgt importieren

import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

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.

Platziere den folgenden Code so hoch wie möglich in deiner Svelte App. Je näher er am Stamm der Seite ist, desto besser wird er funktionieren!

<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
  • Setzen Sie dies auf true, wenn die Devtools standardmäßig geöffnet sein sollen
• buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
  • Standardmäßig bottom-right
  • Die Position des TanStack-Logos zum Öffnen und Schließen des Devtools-Panels
  • Wenn relative, wird der Button an der Stelle platziert, an der Sie die Devtools rendern.
• position?: "top" | "bottom" | "left" | "right"
  • Standardmäßig bottom
  • Die Position des Svelte 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.