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 helfen Ihnen beim Debuggen und Überprüfen Ihrer Queries und Mutationen. Sie können die Devtools aktivieren, indem Sie withDevtools zu provideTanStackQuery hinzufügen.

Standardmäßig sind die Devtools aktiviert, wenn Angular isDevMode true zurückgibt. Sie müssen sich also keine Sorgen machen, sie aus einem Produktions-Build auszuschließen. Die Kern-Tools werden verzögert geladen und aus dem gebündelten Code ausgeschlossen. In den meisten Fällen müssen Sie lediglich withDevtools() zu provideTanStackQuery hinzufügen, ohne zusätzliche Konfiguration.

import {
  QueryClient,
  provideTanStackQuery,
  withDevtools,
} from '@tanstack/angular-query-experimental'

export const appConfig: ApplicationConfig = {
  providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
}

import {
  QueryClient,
  provideTanStackQuery,
  withDevtools,
} from '@tanstack/angular-query-experimental'

export const appConfig: ApplicationConfig = {
  providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
}

Wenn Sie mehr Kontrolle darüber benötigen, wann Devtools geladen werden, können Sie die Option loadDevtools verwenden. Dies ist besonders nützlich, wenn Sie Devtools basierend auf Umgebungskonfigurationen laden möchten. Zum Beispiel haben Sie möglicherweise eine Testumgebung, die im Produktionsmodus läuft, aber dennoch möchten, dass Devtools verfügbar sind.

Wenn die Option nicht gesetzt ist oder auf 'auto' gesetzt ist, werden die Devtools geladen, wenn Angular im Entwicklungsmodus ist.

provideTanStackQuery(new QueryClient(), withDevtools())

// which is equivalent to
provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: 'auto' })),
)

provideTanStackQuery(new QueryClient(), withDevtools())

// which is equivalent to
provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: 'auto' })),
)

Wenn die Option auf true gesetzt ist, werden die Devtools sowohl im Entwicklungs- als auch im Produktionsmodus geladen.

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: true })),
)

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: true })),
)

Wenn die Option auf false gesetzt ist, werden die Devtools nicht geladen.

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: false })),
)

provideTanStackQuery(
  new QueryClient(),
  withDevtools(() => ({ loadDevtools: false })),
)

Die withDevtools Optionen werden aus einer Callback-Funktion zurückgegeben, um Reaktivität durch Signale zu unterstützen. Im folgenden Beispiel wird ein Signal aus einem RxJS Observable erstellt, das auf eine Tastenkombination lauscht. Wenn das Ereignis ausgelöst wird, werden die Devtools verzögert geladen. Diese Technik ermöglicht es Ihnen, das On-Demand-Laden der Devtools auch im Produktionsmodus zu unterstützen, ohne die vollständigen Tools in den gebündelten Code aufzunehmen.

@Injectable({ providedIn: 'root' })
class DevtoolsOptionsManager {
  loadDevtools = toSignal(
    fromEvent<KeyboardEvent>(document, 'keydown').pipe(
      map(
        (event): boolean =>
          event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
      ),
      scan((acc, curr) => acc || curr, false),
    ),
    {
      initialValue: false,
    },
  )
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTanStackQuery(
      new QueryClient(),
      withDevtools(() => ({
        initialIsOpen: true,
        loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
      })),
    ),
  ],
}

@Injectable({ providedIn: 'root' })
class DevtoolsOptionsManager {
  loadDevtools = toSignal(
    fromEvent<KeyboardEvent>(document, 'keydown').pipe(
      map(
        (event): boolean =>
          event.metaKey && event.ctrlKey && event.shiftKey && event.key === 'D',
      ),
      scan((acc, curr) => acc || curr, false),
    ),
    {
      initialValue: false,
    },
  )
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTanStackQuery(
      new QueryClient(),
      withDevtools(() => ({
        initialIsOpen: true,
        loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
      })),
    ),
  ],
}

Von diesen Optionen unterstützen client, position, errorTypes, buttonPosition und initialIsOpen Reaktivität durch Signale.

• loadDevtools?: 'auto' | boolean
  • Standardmäßig auto: lädt Devtools verzögert im Entwicklungsmodus. Überspringt das Laden im Produktionsmodus.
  • Verwenden Sie dies, um zu steuern, ob die Devtools geladen werden.
• initialIsOpen?: Boolean
  • Setzen Sie dies auf true, wenn die Tools 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 Angular Query Devtools-Panels
• client?: QueryClient,
  • Verwenden Sie dies, um einen benutzerdefinierten QueryClient zu verwenden. Andernfalls wird der über provideTanStackQuery bereitgestellte QueryClient injiziert.
• 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.