Optionen zur Konfiguration der TanStack Query Devtools.

optional buttonPosition: DevtoolsButtonPosition;

optional buttonPosition: DevtoolsButtonPosition;

Die Position des TanStack-Logos zum Öffnen und Schließen des Devtools-Panels. top-left | top-right | bottom-left | bottom-right | relative Standardmäßig bottom-right.

providers.ts:192

optional client: QueryClient;

optional client: QueryClient;

Benutzerdefinierte Instanz von QueryClient

providers.ts:202

optional errorTypes: DevtoolsErrorType[];

optional errorTypes: DevtoolsErrorType[];

Verwenden Sie dies, um benutzerdefinierte Fehler zu definieren, die in den Devtools angezeigt werden können.

providers.ts:206

optional initialIsOpen: boolean;

optional initialIsOpen: boolean;

Setzen Sie dies auf true, wenn die Devtools standardmäßig geöffnet sein sollen.

providers.ts:186

optional loadDevtools: boolean | "auto";

optional loadDevtools: boolean | "auto";

Ob die Entwicklertools geladen werden sollen.

• auto- (Standard) Lädt Devtools nach Bedarf, wenn im Entwicklungsmodus. Überspringt das Laden im Produktionsmodus.
• true- Lädt die Devtools immer, unabhängig von der Umgebung.
• false- Lädt die Devtools niemals, unabhängig von der Umgebung.

Sie können true und false verwenden, um das Laden von Entwicklertools aus einer Umgebungsvariable zu überschreiben. Zum Beispiel kann eine Testumgebung im Produktionsmodus laufen, aber Sie möchten möglicherweise Entwicklertools laden.

Zusätzlich können Sie ein Signal im Callback verwenden, um die Devtools dynamisch basierend auf einer Bedingung zu laden. Zum Beispiel ein Signal, das aus einem RxJS-Observable erstellt wurde, das auf eine Tastenkombination hört.

Beispiel

withDevtools(() => ({
  initialIsOpen: true,
  loadDevtools: inject(ExampleService).loadDevtools(),
}))

withDevtools(() => ({
  initialIsOpen: true,
  loadDevtools: inject(ExampleService).loadDevtools(),
}))

providers.ts:236

optional position: DevtoolsPosition;

optional position: DevtoolsPosition;

Die Position des TanStack Query Devtools-Panels. top | bottom | left | right Standardmäßig bottom.

providers.ts:198

optional shadowDOMTarget: ShadowRoot;

optional shadowDOMTarget: ShadowRoot;

Verwenden Sie dies, um die Styles der Devtools an ein bestimmtes Element im DOM anzuhängen.

providers.ts:214

optional styleNonce: string;

optional 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.

providers.ts:210