@tanstack/angular-query-experimental 5.94.4 → 5.94.5

package/create-base-query.d.ts

@@ -0,0 +1,170 @@
+import { QueryKey, QueryObserver, QueryObserverResult } from '@tanstack/query-core';
+import { CreateBaseQueryOptions } from './types.js';
+/**
+ * Base implementation for `injectQuery` and `injectInfiniteQuery`.
+ * @param optionsFn
+ * @param Observer
+ */
+export declare function createBaseQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey>(optionsFn: () => CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>, Observer: typeof QueryObserver): import('./signal-proxy.js').MapToSignals<{
+    refetch: (options?: import('@tanstack/query-core').RefetchOptions) => Promise<QueryObserverResult<TData, TError>>;
+    data: TData;
+    error: TError;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: TError | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    fetchStatus: import('@tanstack/query-core').FetchStatus;
+    promise: Promise<TData>;
+} | {
+    refetch: (options?: import('@tanstack/query-core').RefetchOptions) => Promise<QueryObserverResult<TData, TError>>;
+    data: TData;
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: TError | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    fetchStatus: import('@tanstack/query-core').FetchStatus;
+    promise: Promise<TData>;
+} | {
+    refetch: (options?: import('@tanstack/query-core').RefetchOptions) => Promise<QueryObserverResult<TData, TError>>;
+    data: undefined;
+    error: TError;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: TError | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    fetchStatus: import('@tanstack/query-core').FetchStatus;
+    promise: Promise<TData>;
+} | {
+    refetch: (options?: import('@tanstack/query-core').RefetchOptions) => Promise<QueryObserverResult<TData, TError>>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: TError | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    fetchStatus: import('@tanstack/query-core').FetchStatus;
+    promise: Promise<TData>;
+} | {
+    refetch: (options?: import('@tanstack/query-core').RefetchOptions) => Promise<QueryObserverResult<TData, TError>>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: TError | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isLoading: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    fetchStatus: import('@tanstack/query-core').FetchStatus;
+    promise: Promise<TData>;
+} | {
+    refetch: (options?: import('@tanstack/query-core').RefetchOptions) => Promise<QueryObserverResult<TData, TError>>;
+    data: TData;
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: TError | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    fetchStatus: import('@tanstack/query-core').FetchStatus;
+    promise: Promise<TData>;
+}>;

package/create-base-query.mjs

@@ -0,0 +1,99 @@
+import { inject, NgZone, computed, signal, effect, untracked, VERSION } from "@angular/core";
+import { QueryClient, notifyManager, shouldThrowError } from "@tanstack/query-core";
+import { signalProxy } from "./signal-proxy.mjs";
+import { injectIsRestoring } from "./inject-is-restoring.mjs";
+import { PENDING_TASKS } from "./pending-tasks-compat.mjs";
+function createBaseQuery(optionsFn, Observer) {
+  const ngZone = inject(NgZone);
+  const pendingTasks = inject(PENDING_TASKS);
+  const queryClient = inject(QueryClient);
+  const isRestoring = injectIsRestoring();
+  const defaultedOptionsSignal = computed(() => {
+    const defaultedOptions = queryClient.defaultQueryOptions(optionsFn());
+    defaultedOptions._optimisticResults = isRestoring() ? "isRestoring" : "optimistic";
+    return defaultedOptions;
+  });
+  const observerSignal = (() => {
+    let instance = null;
+    return computed(() => {
+      return instance || (instance = new Observer(queryClient, defaultedOptionsSignal()));
+    });
+  })();
+  const optimisticResultSignal = computed(
+    () => observerSignal().getOptimisticResult(defaultedOptionsSignal())
+  );
+  const resultFromSubscriberSignal = signal(null);
+  effect(
+    (onCleanup) => {
+      const observer = observerSignal();
+      const defaultedOptions = defaultedOptionsSignal();
+      untracked(() => {
+        observer.setOptions(defaultedOptions);
+      });
+      onCleanup(() => {
+        ngZone.run(() => resultFromSubscriberSignal.set(null));
+      });
+    },
+    {
+      // Set allowSignalWrites to support Angular < v19
+      // Set to undefined to avoid warning on newer versions
+      allowSignalWrites: VERSION.major < "19" || void 0
+    }
+  );
+  effect((onCleanup) => {
+    const observer = observerSignal();
+    let pendingTaskRef = null;
+    const unsubscribe = isRestoring() ? () => void 0 : untracked(
+      () => ngZone.runOutsideAngular(() => {
+        return observer.subscribe(
+          notifyManager.batchCalls((state) => {
+            ngZone.run(() => {
+              if (state.fetchStatus === "fetching" && !pendingTaskRef) {
+                pendingTaskRef = pendingTasks.add();
+              }
+              if (state.fetchStatus === "idle" && pendingTaskRef) {
+                pendingTaskRef();
+                pendingTaskRef = null;
+              }
+              if (state.isError && !state.isFetching && shouldThrowError(observer.options.throwOnError, [
+                state.error,
+                observer.getCurrentQuery()
+              ])) {
+                ngZone.onError.emit(state.error);
+                throw state.error;
+              }
+              resultFromSubscriberSignal.set(state);
+            });
+          })
+        );
+      })
+    );
+    onCleanup(() => {
+      if (pendingTaskRef) {
+        pendingTaskRef();
+        pendingTaskRef = null;
+      }
+      unsubscribe();
+    });
+  });
+  return signalProxy(
+    computed(() => {
+      const subscriberResult = resultFromSubscriberSignal();
+      const optimisticResult = optimisticResultSignal();
+      const result = subscriberResult ?? optimisticResult;
+      const observer = observerSignal();
+      const originalRefetch = result.refetch;
+      return {
+        ...result,
+        refetch: ((...args) => {
+          observer.setOptions(defaultedOptionsSignal());
+          return originalRefetch(...args);
+        })
+      };
+    })
+  );
+}
+export {
+  createBaseQuery
+};
+//# sourceMappingURL=create-base-query.mjs.map

package/create-base-query.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-base-query.mjs","sources":["../src/create-base-query.ts"],"sourcesContent":["import {\n  NgZone,\n  VERSION,\n  computed,\n  effect,\n  inject,\n  signal,\n  untracked,\n} from '@angular/core'\nimport {\n  QueryClient,\n  notifyManager,\n  shouldThrowError,\n} from '@tanstack/query-core'\nimport { signalProxy } from './signal-proxy'\nimport { injectIsRestoring } from './inject-is-restoring'\nimport { PENDING_TASKS } from './pending-tasks-compat'\nimport type { PendingTaskRef } from './pending-tasks-compat'\nimport type {\n  QueryKey,\n  QueryObserver,\n  QueryObserverResult,\n} from '@tanstack/query-core'\nimport type { CreateBaseQueryOptions } from './types'\n\n/**\n * Base implementation for `injectQuery` and `injectInfiniteQuery`.\n * @param optionsFn\n * @param Observer\n */\nexport function createBaseQuery<\n  TQueryFnData,\n  TError,\n  TData,\n  TQueryData,\n  TQueryKey extends QueryKey,\n>(\n  optionsFn: () => CreateBaseQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryData,\n    TQueryKey\n  >,\n  Observer: typeof QueryObserver,\n) {\n  const ngZone = inject(NgZone)\n  const pendingTasks = inject(PENDING_TASKS)\n  const queryClient = inject(QueryClient)\n  const isRestoring = injectIsRestoring()\n\n  /**\n   * Signal that has the default options from query client applied\n   * computed() is used so signals can be inserted into the options\n   * making it reactive. Wrapping options in a function ensures embedded expressions\n   * are preserved and can keep being applied after signal changes\n   */\n  const defaultedOptionsSignal = computed(() => {\n    const defaultedOptions = queryClient.defaultQueryOptions(optionsFn())\n    defaultedOptions._optimisticResults = isRestoring()\n      ? 'isRestoring'\n      : 'optimistic'\n    return defaultedOptions\n  })\n\n  const observerSignal = (() => {\n    let instance: QueryObserver<\n      TQueryFnData,\n      TError,\n      TData,\n      TQueryData,\n      TQueryKey\n    > | null = null\n\n    return computed(() => {\n      return (instance ||= new Observer(queryClient, defaultedOptionsSignal()))\n    })\n  })()\n\n  const optimisticResultSignal = computed(() =>\n    observerSignal().getOptimisticResult(defaultedOptionsSignal()),\n  )\n\n  const resultFromSubscriberSignal = signal<QueryObserverResult<\n    TData,\n    TError\n  > | null>(null)\n\n  effect(\n    (onCleanup) => {\n      const observer = observerSignal()\n      const defaultedOptions = defaultedOptionsSignal()\n\n      untracked(() => {\n        observer.setOptions(defaultedOptions)\n      })\n      onCleanup(() => {\n        ngZone.run(() => resultFromSubscriberSignal.set(null))\n      })\n    },\n    {\n      // Set allowSignalWrites to support Angular < v19\n      // Set to undefined to avoid warning on newer versions\n      allowSignalWrites: VERSION.major < '19' || undefined,\n    },\n  )\n\n  effect((onCleanup) => {\n    // observer.trackResult is not used as this optimization is not needed for Angular\n    const observer = observerSignal()\n    let pendingTaskRef: PendingTaskRef | null = null\n\n    const unsubscribe = isRestoring()\n      ? () => undefined\n      : untracked(() =>\n          ngZone.runOutsideAngular(() => {\n            return observer.subscribe(\n              notifyManager.batchCalls((state) => {\n                ngZone.run(() => {\n                  if (state.fetchStatus === 'fetching' && !pendingTaskRef) {\n                    pendingTaskRef = pendingTasks.add()\n                  }\n\n                  if (state.fetchStatus === 'idle' && pendingTaskRef) {\n                    pendingTaskRef()\n                    pendingTaskRef = null\n                  }\n\n                  if (\n                    state.isError &&\n                    !state.isFetching &&\n                    shouldThrowError(observer.options.throwOnError, [\n                      state.error,\n                      observer.getCurrentQuery(),\n                    ])\n                  ) {\n                    ngZone.onError.emit(state.error)\n                    throw state.error\n                  }\n                  resultFromSubscriberSignal.set(state)\n                })\n              }),\n            )\n          }),\n        )\n\n    onCleanup(() => {\n      if (pendingTaskRef) {\n        pendingTaskRef()\n        pendingTaskRef = null\n      }\n      unsubscribe()\n    })\n  })\n\n  return signalProxy(\n    computed(() => {\n      const subscriberResult = resultFromSubscriberSignal()\n      const optimisticResult = optimisticResultSignal()\n      const result = subscriberResult ?? optimisticResult\n\n      // Wrap methods to ensure observer has latest options before execution\n      const observer = observerSignal()\n\n      const originalRefetch = result.refetch\n      return {\n        ...result,\n        refetch: ((...args: Parameters<typeof originalRefetch>) => {\n          observer.setOptions(defaultedOptionsSignal())\n          return originalRefetch(...args)\n        }) as typeof originalRefetch,\n      }\n    }),\n  )\n}\n"],"names":[],"mappings":";;;;;AA8BO,SAAS,gBAOd,WAOA,UACA;AACA,QAAM,SAAS,OAAO,MAAM;AAC5B,QAAM,eAAe,OAAO,aAAa;AACzC,QAAM,cAAc,OAAO,WAAW;AACtC,QAAM,cAAc,kBAAA;AAQpB,QAAM,yBAAyB,SAAS,MAAM;AAC5C,UAAM,mBAAmB,YAAY,oBAAoB,UAAA,CAAW;AACpE,qBAAiB,qBAAqB,YAAA,IAClC,gBACA;AACJ,WAAO;AAAA,EACT,CAAC;AAED,QAAM,kBAAkB,MAAM;AAC5B,QAAI,WAMO;AAEX,WAAO,SAAS,MAAM;AACpB,aAAQ,wBAAa,IAAI,SAAS,aAAa,wBAAwB;AAAA,IACzE,CAAC;AAAA,EACH,GAAA;AAEA,QAAM,yBAAyB;AAAA,IAAS,MACtC,eAAA,EAAiB,oBAAoB,wBAAwB;AAAA,EAAA;AAG/D,QAAM,6BAA6B,OAGzB,IAAI;AAEd;AAAA,IACE,CAAC,cAAc;AACb,YAAM,WAAW,eAAA;AACjB,YAAM,mBAAmB,uBAAA;AAEzB,gBAAU,MAAM;AACd,iBAAS,WAAW,gBAAgB;AAAA,MACtC,CAAC;AACD,gBAAU,MAAM;AACd,eAAO,IAAI,MAAM,2BAA2B,IAAI,IAAI,CAAC;AAAA,MACvD,CAAC;AAAA,IACH;AAAA,IACA;AAAA;AAAA;AAAA,MAGE,mBAAmB,QAAQ,QAAQ,QAAQ;AAAA,IAAA;AAAA,EAC7C;AAGF,SAAO,CAAC,cAAc;AAEpB,UAAM,WAAW,eAAA;AACjB,QAAI,iBAAwC;AAE5C,UAAM,cAAc,gBAChB,MAAM,SACN;AAAA,MAAU,MACR,OAAO,kBAAkB,MAAM;AAC7B,eAAO,SAAS;AAAA,UACd,cAAc,WAAW,CAAC,UAAU;AAClC,mBAAO,IAAI,MAAM;AACf,kBAAI,MAAM,gBAAgB,cAAc,CAAC,gBAAgB;AACvD,iCAAiB,aAAa,IAAA;AAAA,cAChC;AAEA,kBAAI,MAAM,gBAAgB,UAAU,gBAAgB;AAClD,+BAAA;AACA,iCAAiB;AAAA,cACnB;AAEA,kBACE,MAAM,WACN,CAAC,MAAM,cACP,iBAAiB,SAAS,QAAQ,cAAc;AAAA,gBAC9C,MAAM;AAAA,gBACN,SAAS,gBAAA;AAAA,cAAgB,CAC1B,GACD;AACA,uBAAO,QAAQ,KAAK,MAAM,KAAK;AAC/B,sBAAM,MAAM;AAAA,cACd;AACA,yCAA2B,IAAI,KAAK;AAAA,YACtC,CAAC;AAAA,UACH,CAAC;AAAA,QAAA;AAAA,MAEL,CAAC;AAAA,IAAA;AAGP,cAAU,MAAM;AACd,UAAI,gBAAgB;AAClB,uBAAA;AACA,yBAAiB;AAAA,MACnB;AACA,kBAAA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AAAA,IACL,SAAS,MAAM;AACb,YAAM,mBAAmB,2BAAA;AACzB,YAAM,mBAAmB,uBAAA;AACzB,YAAM,SAAS,oBAAoB;AAGnC,YAAM,WAAW,eAAA;AAEjB,YAAM,kBAAkB,OAAO;AAC/B,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU,IAAI,SAA6C;AACzD,mBAAS,WAAW,wBAAwB;AAC5C,iBAAO,gBAAgB,GAAG,IAAI;AAAA,QAChC;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EAAA;AAEL;"}

package/devtools/index.d.ts

@@ -0,0 +1,2 @@
+export type { DevtoolsOptions, WithDevtools, WithDevtoolsFn, WithDevtoolsOptions, } from './types.js';
+export { withDevtools } from './with-devtools.js';

package/devtools/index.mjs

@@ -0,0 +1,5 @@
+import { withDevtools } from "./with-devtools.mjs";
+export {
+  withDevtools
+};
+//# sourceMappingURL=index.mjs.map

package/devtools/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/devtools/production/index.d.ts

@@ -0,0 +1 @@
+export * from '..';

package/devtools/stub.d.ts

@@ -0,0 +1,2 @@
+import { WithDevtools } from './types.js';
+export declare const withDevtools: WithDevtools;

package/devtools/stub.mjs

@@ -0,0 +1,8 @@
+const withDevtools = () => ({
+  ɵkind: "Devtools",
+  ɵproviders: []
+});
+export {
+  withDevtools
+};
+//# sourceMappingURL=stub.mjs.map

package/devtools/stub.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stub.mjs","sources":["../../src/devtools/stub.ts"],"sourcesContent":["import type { WithDevtools } from './types'\n\n// Stub which replaces `withDevtools` in production builds\nexport const withDevtools: WithDevtools = () => ({\n  ɵkind: 'Devtools',\n  ɵproviders: [],\n})\n"],"names":[],"mappings":"AAGO,MAAM,eAA6B,OAAO;AAAA,EAC/C,OAAO;AAAA,EACP,YAAY,CAAA;AACd;"}

package/devtools/types.d.ts

@@ -0,0 +1,95 @@
+import { QueryClient } from '@tanstack/query-core';
+import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
+import { DevtoolsFeature } from '../providers.js';
+/**
+ * Options for configuring withDevtools.
+ */
+export interface WithDevtoolsOptions {
+    /**
+     * An array of dependencies to be injected and passed to the `withDevtoolsFn` function.
+     *
+     * **Example**
+     * ```ts
+     * export const appConfig: ApplicationConfig = {
+     *   providers: [
+     *     provideTanStackQuery(
+     *       new QueryClient(),
+     *       withDevtools(
+     *         (devToolsOptionsManager: DevtoolsOptionsManager) => ({
+     *           loadDevtools: devToolsOptionsManager.loadDevtools(),
+     *         }),
+     *         {
+     *           deps: [DevtoolsOptionsManager],
+     *         },
+     *       ),
+     *     ),
+     *   ],
+     * }
+     * ```
+     */
+    deps?: Array<any>;
+}
+/**
+ * Options for configuring the TanStack Query devtools.
+ */
+export interface DevtoolsOptions {
+    /**
+     * Set this true if you want the devtools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the TanStack logo to open and close the devtools panel.
+     * `top-left` | `top-right` | `bottom-left` | `bottom-right` | `relative`
+     * Defaults to `bottom-right`.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the TanStack Query devtools panel.
+     * `top` | `bottom` | `left` | `right`
+     * Defaults to `bottom`.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to a specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Whether the developer tools should load.
+     * - `auto`- (Default) Lazily loads devtools when in development mode. Skips loading in production mode.
+     * - `true`- Always load the devtools, regardless of the environment.
+     * - `false`- Never load the devtools, regardless of the environment.
+     *
+     * You can use `true` and `false` to override loading developer tools from an environment file.
+     * For example, a test environment might run in production mode but you may want to load developer tools.
+     *
+     * Additionally, you can use a signal in the callback to dynamically load the devtools based on a condition. For example,
+     * a signal created from a RxJS observable that listens for a keyboard shortcut.
+     *
+     * **Example**
+     * ```ts
+     *    withDevtools(() => ({
+     *      initialIsOpen: true,
+     *      loadDevtools: inject(ExampleService).loadDevtools()
+     *    }))
+     *  ```
+     */
+    loadDevtools?: 'auto' | boolean;
+}
+export type WithDevtoolsFn = (...deps: Array<any>) => DevtoolsOptions;
+export type WithDevtools = (withDevtoolsFn?: WithDevtoolsFn, options?: WithDevtoolsOptions) => DevtoolsFeature;

package/devtools/with-devtools.d.ts

@@ -0,0 +1,25 @@
+import { WithDevtools } from './types.js';
+/**
+ * Enables developer tools in Angular development builds.
+ *
+ * **Example**
+ *
+ * ```ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideTanStackQuery(new QueryClient(), withDevtools())
+ *   ]
+ * }
+ * ```
+ * The devtools will be rendered in `<body>`.
+ *
+ * If you need more control over when devtools are loaded, you can use the `loadDevtools` option.
+ *
+ * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example.
+ * @param withDevtoolsFn - A function that returns `DevtoolsOptions`.
+ * @param options - Additional options for configuring `withDevtools`.
+ * @returns A set of providers for use with `provideTanStackQuery`.
+ * @see {@link provideTanStackQuery}
+ * @see {@link DevtoolsOptions}
+ */
+export declare const withDevtools: WithDevtools;

package/devtools/with-devtools.mjs

@@ -0,0 +1,104 @@
+import { isPlatformBrowser } from "@angular/common";
+import { InjectionToken, ENVIRONMENT_INITIALIZER, computed, 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

package/devtools/with-devtools.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-devtools.mjs","sources":["../../src/devtools/with-devtools.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common'\nimport {\n  DestroyRef,\n  ENVIRONMENT_INITIALIZER,\n  InjectionToken,\n  Injector,\n  PLATFORM_ID,\n  computed,\n  effect,\n  inject,\n  isDevMode,\n} from '@angular/core'\nimport { QueryClient, noop, onlineManager } from '@tanstack/query-core'\nimport { queryFeature } from '../providers'\nimport type { Signal } from '@angular/core'\nimport type {\n  DevtoolsOptions,\n  WithDevtools,\n  WithDevtoolsFn,\n  WithDevtoolsOptions,\n} from './types'\nimport type { TanstackQueryDevtools } from '@tanstack/query-devtools'\n\n/**\n * Internal token used to prevent double providing of devtools in child injectors\n */\nconst DEVTOOLS_PROVIDED = new InjectionToken('', {\n  factory: () => ({\n    isProvided: false,\n  }),\n})\n\n/**\n * Internal token for providing devtools options\n */\nconst DEVTOOLS_OPTIONS_SIGNAL = new InjectionToken<Signal<DevtoolsOptions>>('')\n\n/**\n * Enables developer tools in Angular development builds.\n *\n * **Example**\n *\n * ```ts\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideTanStackQuery(new QueryClient(), withDevtools())\n *   ]\n * }\n * ```\n * The devtools will be rendered in `<body>`.\n *\n * If you need more control over when devtools are loaded, you can use the `loadDevtools` option.\n *\n * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example.\n * @param withDevtoolsFn - A function that returns `DevtoolsOptions`.\n * @param options - Additional options for configuring `withDevtools`.\n * @returns A set of providers for use with `provideTanStackQuery`.\n * @see {@link provideTanStackQuery}\n * @see {@link DevtoolsOptions}\n */\nexport const withDevtools: WithDevtools = (\n  withDevtoolsFn?: WithDevtoolsFn,\n  options: WithDevtoolsOptions = {},\n) =>\n  queryFeature('Devtools', [\n    {\n      provide: DEVTOOLS_OPTIONS_SIGNAL,\n      useFactory: (...deps: Array<any>) =>\n        computed(() => withDevtoolsFn?.(...deps) ?? {}),\n      deps: options.deps || [],\n    },\n    {\n      // Do not use provideEnvironmentInitializer while Angular < v19 is supported\n      provide: ENVIRONMENT_INITIALIZER,\n      multi: true,\n      useFactory: () => {\n        const devtoolsProvided = inject(DEVTOOLS_PROVIDED)\n        if (\n          !isPlatformBrowser(inject(PLATFORM_ID)) ||\n          devtoolsProvided.isProvided\n        )\n          return noop\n\n        devtoolsProvided.isProvided = true\n        let injectorIsDestroyed = false\n        inject(DestroyRef).onDestroy(() => (injectorIsDestroyed = true))\n\n        return () => {\n          const injectedClient = inject(QueryClient, {\n            optional: true,\n          })\n          const destroyRef = inject(DestroyRef)\n          const devtoolsOptions = inject(DEVTOOLS_OPTIONS_SIGNAL)\n          const injector = inject(Injector)\n\n          let devtools: TanstackQueryDevtools | null = null\n          let el: HTMLElement | null = null\n\n          const shouldLoadToolsSignal = computed(() => {\n            const { loadDevtools } = devtoolsOptions()\n            return typeof loadDevtools === 'boolean'\n              ? loadDevtools\n              : isDevMode()\n          })\n\n          const getResolvedQueryClient = () => {\n            const client = devtoolsOptions().client ?? injectedClient\n            if (!client) {\n              throw new Error('No QueryClient found')\n            }\n            return client\n          }\n\n          const destroyDevtools = () => {\n            devtools?.unmount()\n            el?.remove()\n            devtools = null\n          }\n\n          effect(\n            () => {\n              const shouldLoadTools = shouldLoadToolsSignal()\n              const {\n                client,\n                position,\n                errorTypes,\n                buttonPosition,\n                initialIsOpen,\n              } = devtoolsOptions()\n\n              if (!shouldLoadTools) {\n                // Destroy or do nothing\n                devtools && destroyDevtools()\n                return\n              }\n\n              if (devtools) {\n                // Update existing devtools config\n                client && devtools.setClient(client)\n                position && devtools.setPosition(position)\n                errorTypes && devtools.setErrorTypes(errorTypes)\n                buttonPosition && devtools.setButtonPosition(buttonPosition)\n                typeof initialIsOpen === 'boolean' &&\n                  devtools.setInitialIsOpen(initialIsOpen)\n                return\n              }\n\n              // Create devtools\n              import('@tanstack/query-devtools')\n                .then((queryDevtools) => {\n                  // As this code runs async, the injector could have been destroyed\n                  if (injectorIsDestroyed) return\n\n                  devtools = new queryDevtools.TanstackQueryDevtools({\n                    ...devtoolsOptions(),\n                    client: getResolvedQueryClient(),\n                    queryFlavor: 'Angular Query',\n                    version: '5',\n                    onlineManager,\n                  })\n\n                  el = document.body.appendChild(document.createElement('div'))\n                  el.classList.add('tsqd-parent-container')\n                  devtools.mount(el)\n\n                  destroyRef.onDestroy(destroyDevtools)\n                })\n                .catch((error) => {\n                  console.error(\n                    'Install @tanstack/query-devtools or reinstall without --omit=optional.',\n                    error,\n                  )\n                })\n            },\n            { injector },\n          )\n        }\n      },\n    },\n  ])\n"],"names":[],"mappings":";;;;AA0BA,MAAM,oBAAoB,IAAI,eAAe,IAAI;AAAA,EAC/C,SAAS,OAAO;AAAA,IACd,YAAY;AAAA,EAAA;AAEhB,CAAC;AAKD,MAAM,0BAA0B,IAAI,eAAwC,EAAE;AAyBvE,MAAM,eAA6B,CACxC,gBACA,UAA+B,CAAA,MAE/B,aAAa,YAAY;AAAA,EACvB;AAAA,IACE,SAAS;AAAA,IACT,YAAY,IAAI,SACd,SAAS,OAAM,iDAAiB,GAAG,UAAS,EAAE;AAAA,IAChD,MAAM,QAAQ,QAAQ,CAAA;AAAA,EAAC;AAAA,EAEzB;AAAA;AAAA,IAEE,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY,MAAM;AAChB,YAAM,mBAAmB,OAAO,iBAAiB;AACjD,UACE,CAAC,kBAAkB,OAAO,WAAW,CAAC,KACtC,iBAAiB;AAEjB,eAAO;AAET,uBAAiB,aAAa;AAC9B,UAAI,sBAAsB;AAC1B,aAAO,UAAU,EAAE,UAAU,MAAO,sBAAsB,IAAK;AAE/D,aAAO,MAAM;AACX,cAAM,iBAAiB,OAAO,aAAa;AAAA,UACzC,UAAU;AAAA,QAAA,CACX;AACD,cAAM,aAAa,OAAO,UAAU;AACpC,cAAM,kBAAkB,OAAO,uBAAuB;AACtD,cAAM,WAAW,OAAO,QAAQ;AAEhC,YAAI,WAAyC;AAC7C,YAAI,KAAyB;AAE7B,cAAM,wBAAwB,SAAS,MAAM;AAC3C,gBAAM,EAAE,aAAA,IAAiB,gBAAA;AACzB,iBAAO,OAAO,iBAAiB,YAC3B,eACA,UAAA;AAAA,QACN,CAAC;AAED,cAAM,yBAAyB,MAAM;AACnC,gBAAM,SAAS,kBAAkB,UAAU;AAC3C,cAAI,CAAC,QAAQ;AACX,kBAAM,IAAI,MAAM,sBAAsB;AAAA,UACxC;AACA,iBAAO;AAAA,QACT;AAEA,cAAM,kBAAkB,MAAM;AAC5B,+CAAU;AACV,mCAAI;AACJ,qBAAW;AAAA,QACb;AAEA;AAAA,UACE,MAAM;AACJ,kBAAM,kBAAkB,sBAAA;AACxB,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA,IACE,gBAAA;AAEJ,gBAAI,CAAC,iBAAiB;AAEpB,0BAAY,gBAAA;AACZ;AAAA,YACF;AAEA,gBAAI,UAAU;AAEZ,wBAAU,SAAS,UAAU,MAAM;AACnC,0BAAY,SAAS,YAAY,QAAQ;AACzC,4BAAc,SAAS,cAAc,UAAU;AAC/C,gCAAkB,SAAS,kBAAkB,cAAc;AAC3D,qBAAO,kBAAkB,aACvB,SAAS,iBAAiB,aAAa;AACzC;AAAA,YACF;AAGA,mBAAO,0BAA0B,EAC9B,KAAK,CAAC,kBAAkB;AAEvB,kBAAI,oBAAqB;AAEzB,yBAAW,IAAI,cAAc,sBAAsB;AAAA,gBACjD,GAAG,gBAAA;AAAA,gBACH,QAAQ,uBAAA;AAAA,gBACR,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT;AAAA,cAAA,CACD;AAED,mBAAK,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC;AAC5D,iBAAG,UAAU,IAAI,uBAAuB;AACxC,uBAAS,MAAM,EAAE;AAEjB,yBAAW,UAAU,eAAe;AAAA,YACtC,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,sBAAQ;AAAA,gBACN;AAAA,gBACA;AAAA,cAAA;AAAA,YAEJ,CAAC;AAAA,UACL;AAAA,UACA,EAAE,SAAA;AAAA,QAAS;AAAA,MAEf;AAAA,IACF;AAAA,EAAA;AAEJ,CAAC;"}

package/devtools-panel/index.d.ts

@@ -0,0 +1,2 @@
+export type { InjectDevtoolsPanel, DevtoolsPanelOptions, InjectDevtoolsPanelOptions, DevtoolsPanelRef, } from './types.js';
+export { injectDevtoolsPanel } from './inject-devtools-panel.js';

package/devtools-panel/index.mjs

@@ -0,0 +1,5 @@
+import { injectDevtoolsPanel } from "./inject-devtools-panel.mjs";
+export {
+  injectDevtoolsPanel
+};
+//# sourceMappingURL=index.mjs.map

package/devtools-panel/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/devtools-panel/inject-devtools-panel.d.ts

@@ -0,0 +1,14 @@
+import { InjectDevtoolsPanel } from './types.js';
+/**
+ * Inject a TanStack Query devtools panel and render it in the DOM.
+ *
+ * Devtools panel allows programmatic control over the devtools, for example if you want to render
+ * the devtools as part of your own devtools.
+ *
+ * Consider `withDevtools` instead if you don't need this.
+ * @param injectDevtoolsPanelFn - A function that returns devtools panel options.
+ * @param options - Additional configuration
+ * @returns DevtoolsPanelRef
+ * @see https://tanstack.com/query/v5/docs/framework/angular/devtools
+ */
+export declare const injectDevtoolsPanel: InjectDevtoolsPanel;

package/devtools-panel/inject-devtools-panel.mjs

@@ -0,0 +1,72 @@
+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