Devtools

Winke mit den Händen in die Luft und rufe Hurra, denn React Query kommt mit dedizierten Devtools! 🥳

Wenn du deine React Query Reise beginnst, wirst du diese Devtools an deiner Seite haben wollen. Sie helfen dir, alle inneren Abläufe von React Query zu visualisieren und werden dir wahrscheinlich Stunden beim Debuggen ersparen, wenn du mal in der Klemme steckst!

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

Für React Native Benutzer: Eine native macOS App von Drittanbietern ist verfügbar, um React Query in JEDER JS-basierten Anwendung zu debuggen. Überwachen Sie Abfragen über Geräte hinweg in Echtzeit. Schauen Sie sie sich hier an: rn-better-dev-tools

Beachten Sie, dass die Devtools ab Version 5 auch Mutationen beobachten können.

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

npm i @tanstack/react-query-devtools

npm i @tanstack/react-query-devtools

oder

pnpm add @tanstack/react-query-devtools

pnpm add @tanstack/react-query-devtools

oder

yarn add @tanstack/react-query-devtools

yarn add @tanstack/react-query-devtools

oder

bun add @tanstack/react-query-devtools

bun add @tanstack/react-query-devtools

Für Next 13+ App Dir müssen Sie es als Entwicklungsabhängigkeit installieren, damit es funktioniert.

Sie können die Devtools wie folgt importieren

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

Standardmäßig sind React Query Devtools nur in Bundles enthalten, wenn process.env.NODE_ENV === 'development' ist, sodass Sie sich keine Gedanken darüber machen müssen, sie während eines Produktions-Builds 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 React-App. Je näher er am Root der Seite ist, desto besser wird er funktionieren!

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

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

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtools 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" | "relative"
  • Standardmäßig bottom-right
  • Die Position des React Query 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 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 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.

Der eingebettete Modus zeigt die Entwicklungswerkzeuge als festes Element in Ihrer Anwendung an, sodass Sie unser Panel in Ihren eigenen Entwicklungswerkzeugen verwenden können.

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

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'

function App() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <button
        onClick={() => setIsOpen(!isOpen)}
      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
      {isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
    </QueryClientProvider>
  )
}

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'

function App() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <button
        onClick={() => setIsOpen(!isOpen)}
      >{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
      {isOpen && <ReactQueryDevtoolsPanel onClose={() => setIsOpen(false)} />}
    </QueryClientProvider>
  )
}

• style?: React.CSSProperties
  • Benutzerdefinierte Stile für das Devtools-Panel
  • Standard: { height: '500px' }
  • Beispiel: { height: '100%' }
  • Beispiel: { height: '100%', width: '100%' }
• onClose?: () => unknown
  • Callback-Funktion, die aufgerufen wird, wenn das Devtools-Panel geschlossen wird
• 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.

Devtools sind in Produktions-Builds ausgeschlossen. Es kann jedoch wünschenswert sein, die Devtools in der Produktion per Lazy Loading zu laden

import * as React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { Example } from './Example'

const queryClient = new QueryClient()

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

function App() {
  const [showDevtools, setShowDevtools] = React.useState(false)

  React.useEffect(() => {
    // @ts-expect-error
    window.toggleDevtools = () => setShowDevtools((old) => !old)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      <ReactQueryDevtools initialIsOpen />
      {showDevtools && (
        <React.Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </React.Suspense>
      )}
    </QueryClientProvider>
  )
}

export default App

import * as React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { Example } from './Example'

const queryClient = new QueryClient()

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

function App() {
  const [showDevtools, setShowDevtools] = React.useState(false)

  React.useEffect(() => {
    // @ts-expect-error
    window.toggleDevtools = () => setShowDevtools((old) => !old)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      <ReactQueryDevtools initialIsOpen />
      {showDevtools && (
        <React.Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </React.Suspense>
      )}
    </QueryClientProvider>
  )
}

export default App

Damit wird durch Aufruf von window.toggleDevtools() das Devtools-Bundle heruntergeladen und angezeigt.

Wenn Ihr Bundler Paket-Exports unterstützt, können Sie den folgenden Importpfad verwenden

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/production').then((d) => ({
    default: d.ReactQueryDevtools,
  })),
)

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/production').then((d) => ({
    default: d.ReactQueryDevtools,
  })),
)

Für TypeScript müssten Sie moduleResolution: 'nodenext' in Ihrer tsconfig einstellen, was mindestens TypeScript v4.7 erfordert.