Devtools

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

Wenn Sie Ihre Vue Query-Reise beginnen, werden Sie diese Devtools an Ihrer Seite haben wollen. Sie helfen, all die inneren Abläufe von Vue Query zu visualisieren und sparen Ihnen wahrscheinlich Stunden beim Debugging, wenn Sie sich in einer Klemme 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

Sie können die Devtools-Komponente direkt mit einem dedizierten Paket in Ihre Seite integrieren. Komponentenbasierte Devtools verwenden eine Framework-agnostische Implementierung und sind immer auf dem neuesten Stand.

Die Devtools-Komponente ist ein separates Paket, das Sie installieren müssen

npm i @tanstack/vue-query-devtools

npm i @tanstack/vue-query-devtools

oder

pnpm add @tanstack/vue-query-devtools

pnpm add @tanstack/vue-query-devtools

oder

yarn add @tanstack/vue-query-devtools

yarn add @tanstack/vue-query-devtools

oder

bun add @tanstack/vue-query-devtools

bun add @tanstack/vue-query-devtools

Standardmäßig werden Vue Query Devtools nur in Bundles aufgenommen, wenn process.env.NODE_ENV === 'development', sodass Sie sich keine Sorgen machen müssen, sie aus einem Produktions-Build auszuschließen.

Devtools werden als festes, schwebendes Element in Ihrer App eingebunden und bieten einen Schalter in der Ecke des Bildschirms, um die Devtools ein- und auszublenden. Dieser Schalterzustand wird über Neuladungen hinweg in localStorage gespeichert und erinnert sich daran.

Platzieren Sie den folgenden Code so hoch wie möglich in Ihrer Vue-App. Je näher er am Wurzelverzeichnis der Seite liegt, desto besser funktioniert er!

<script setup>
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>

<template>
  <h1>The app!</h1>
  <VueQueryDevtools />
</template>

<script setup>
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>

<template>
  <h1>The app!</h1>
  <VueQueryDevtools />
</template>

• initialIsOpen: Boolean
  • Setzen Sie diesen 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 React Query Logos zum Öffnen und Schließen des Devtools-Panels.
• position?: "top" | "bottom" | "left" | "right"
  • Standardmäßig bottom.
  • Die Position des React 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 vordefinieren zu können, die bei Ihren Queries ausgelöst werden können. Der Initialisierer wird aufgerufen (mit der spezifischen Query), wenn dieser Fehler aus der UI heraus aktiviert wird. Er 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.

Vue Query wird nahtlos mit den Offiziellen Vue Devtools integriert und fügt benutzerdefinierte Inspektoren und Timeline-Events hinzu. Devtool-Code wird standardmäßig aus Produktions-Builds herausgeshaked.

Damit dies funktioniert, müssen Sie es nur in den Plugin-Optionen aktivieren

app.use(VueQueryPlugin, {
  enableDevtoolsV6Plugin: true,
})

app.use(VueQueryPlugin, {
  enableDevtoolsV6Plugin: true,
})

Sowohl die v6 als auch die v7 Versionen der Devtools werden unterstützt.