@tanstack/angular-query-experimental
Version:
Signals for managing, caching and syncing asynchronous and remote data in Angular
73 lines (72 loc) • 2.53 kB
JavaScript
import { assertInInjectionContext, inject, Injector, runInInjectionContext, DestroyRef, PLATFORM_ID, computed, effect, untracked } from "@angular/core";
import { QueryClient, onlineManager } from "@tanstack/query-core";
import { isPlatformBrowser } from "@angular/common";
const injectDevtoolsPanel = (injectDevtoolsPanelFn, options) => {
!(options == null ? void 0 : options.injector) && assertInInjectionContext(injectDevtoolsPanel);
const currentInjector = (options == null ? void 0 : options.injector) ?? inject(Injector);
return runInInjectionContext(currentInjector, () => {
const destroyRef = inject(DestroyRef);
const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
const injectedClient = inject(QueryClient, { optional: true });
const queryOptions = computed(injectDevtoolsPanelFn);
let devtools = null;
const destroy = () => {
devtools == null ? void 0 : devtools.unmount();
devtools = null;
};
if (!isBrowser)
return {
destroy
};
effect(() => {
const {
client = injectedClient,
errorTypes = [],
styleNonce,
shadowDOMTarget,
onClose,
hostElement
} = queryOptions();
untracked(() => {
if (!client) throw new Error("No QueryClient found");
if (!devtools && hostElement) {
import("@tanstack/query-devtools").then((queryDevtools) => {
devtools = new queryDevtools.TanstackQueryDevtoolsPanel({
client,
queryFlavor: "Angular Query",
version: "5",
buttonPosition: "bottom-left",
position: "bottom",
initialIsOpen: true,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose,
onlineManager
});
devtools.mount(hostElement.nativeElement);
}).catch((error) => {
console.error(
"Install @tanstack/query-devtools or reinstall without --omit=optional.",
error
);
});
} else if (devtools && hostElement) {
devtools.setClient(client);
devtools.setErrorTypes(errorTypes);
onClose && devtools.setOnClose(onClose);
} else if (devtools && !hostElement) {
destroy();
}
});
});
destroyRef.onDestroy(destroy);
return {
destroy
};
});
};
export {
injectDevtoolsPanel
};
//# sourceMappingURL=inject-devtools-panel.mjs.map