@tanstack/angular-query-experimental/devtools/with-devtools.mjs

Signals for managing, caching and syncing asynchronous and remote data in Angular

import { isPlatformBrowser } from "@angular/common";
import { computed, InjectionToken, ENVIRONMENT_INITIALIZER, inject, PLATFORM_ID, DestroyRef, Injector, isDevMode, effect } from "@angular/core";
import { noop, QueryClient, onlineManager } from "@tanstack/query-core";
import { queryFeature } from "../providers.mjs";
const DEVTOOLS_PROVIDED = new InjectionToken("", {
  factory: () => ({
    isProvided: false
  })
});
const DEVTOOLS_OPTIONS_SIGNAL = new InjectionToken("");
const withDevtools = (withDevtoolsFn, options = {}) => queryFeature("Devtools", [
  {
    provide: DEVTOOLS_OPTIONS_SIGNAL,
    useFactory: (...deps) => computed(() => (withDevtoolsFn == null ? void 0 : withDevtoolsFn(...deps)) ?? {}),
    deps: options.deps || []
  },
  {
    // Do not use provideEnvironmentInitializer while Angular < v19 is supported
    provide: ENVIRONMENT_INITIALIZER,
    multi: true,
    useFactory: () => {
      const devtoolsProvided = inject(DEVTOOLS_PROVIDED);
      if (!isPlatformBrowser(inject(PLATFORM_ID)) || devtoolsProvided.isProvided)
        return noop;
      devtoolsProvided.isProvided = true;
      let injectorIsDestroyed = false;
      inject(DestroyRef).onDestroy(() => injectorIsDestroyed = true);
      return () => {
        const injectedClient = inject(QueryClient, {
          optional: true
        });
        const destroyRef = inject(DestroyRef);
        const devtoolsOptions = inject(DEVTOOLS_OPTIONS_SIGNAL);
        const injector = inject(Injector);
        let devtools = null;
        let el = null;
        const shouldLoadToolsSignal = computed(() => {
          const { loadDevtools } = devtoolsOptions();
          return typeof loadDevtools === "boolean" ? loadDevtools : isDevMode();
        });
        const getResolvedQueryClient = () => {
          const client = devtoolsOptions().client ?? injectedClient;
          if (!client) {
            throw new Error("No QueryClient found");
          }
          return client;
        };
        const destroyDevtools = () => {
          devtools == null ? void 0 : devtools.unmount();
          el == null ? void 0 : el.remove();
          devtools = null;
        };
        effect(
          () => {
            const shouldLoadTools = shouldLoadToolsSignal();
            const {
              client,
              position,
              errorTypes,
              buttonPosition,
              initialIsOpen
            } = devtoolsOptions();
            if (!shouldLoadTools) {
              devtools && destroyDevtools();
              return;
            }
            if (devtools) {
              client && devtools.setClient(client);
              position && devtools.setPosition(position);
              errorTypes && devtools.setErrorTypes(errorTypes);
              buttonPosition && devtools.setButtonPosition(buttonPosition);
              typeof initialIsOpen === "boolean" && devtools.setInitialIsOpen(initialIsOpen);
              return;
            }
            import("@tanstack/query-devtools").then((queryDevtools) => {
              if (injectorIsDestroyed) return;
              devtools = new queryDevtools.TanstackQueryDevtools({
                ...devtoolsOptions(),
                client: getResolvedQueryClient(),
                queryFlavor: "Angular Query",
                version: "5",
                onlineManager
              });
              el = document.body.appendChild(document.createElement("div"));
              el.classList.add("tsqd-parent-container");
              devtools.mount(el);
              destroyRef.onDestroy(destroyDevtools);
            }).catch((error) => {
              console.error(
                "Install @tanstack/query-devtools or reinstall without --omit=optional.",
                error
              );
            });
          },
          { injector }
        );
      };
    }
  }
]);
export {
  withDevtools
};
//# sourceMappingURL=with-devtools.mjs.map