@tanstack/angular-query-experimental
Version:
Signals for managing, caching and syncing asynchronous and remote data in Angular
1 lines • 73.2 kB
Source Map (JSON)
{"version":3,"sources":["../src/index.ts","../src/query-options.ts","../src/mutation-options.ts","../src/infinite-query-options.ts","../src/inject-infinite-query.ts","../src/create-base-query.ts","../src/signal-proxy.ts","../src/util/index.ts","../src/util/assert-injector/assert-injector.ts","../src/inject-is-fetching.ts","../src/inject-is-mutating.ts","../src/inject-mutation.ts","../src/inject-mutation-state.ts","../src/inject-queries.ts","../src/inject-query.ts","../src/inject-query-client.ts","../src/providers.ts","../src/util/is-dev-mode/is-dev-mode.ts"],"sourcesContent":["/* istanbul ignore file */\n\n// Re-export core\nexport * from '@tanstack/query-core'\n\nexport * from './types'\n\nexport type {\n DefinedInitialDataOptions,\n UndefinedInitialDataOptions,\n} from './query-options'\nexport { queryOptions } from './query-options'\nexport { mutationOptions } from './mutation-options'\nexport type { CreateMutationOptions } from './mutation-options'\n\nexport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infinite-query-options'\nexport { infiniteQueryOptions } from './infinite-query-options'\n\nexport * from './inject-infinite-query'\nexport * from './inject-is-fetching'\nexport * from './inject-is-mutating'\nexport * from './inject-mutation'\nexport * from './inject-mutation-state'\nexport * from './inject-queries'\nexport * from './inject-query'\nexport * from './inject-query-client'\nexport * from './providers'\n","import type {\n DataTag,\n DefaultError,\n InitialDataFunction,\n QueryKey,\n} from '@tanstack/query-core'\nimport type { CreateQueryOptions, NonUndefinedGuard } from './types'\n\n/**\n * @public\n */\nexport type UndefinedInitialDataOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {\n initialData?: undefined | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>\n}\n\n/**\n * @public\n */\nexport type DefinedInitialDataOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {\n initialData:\n | NonUndefinedGuard<TQueryFnData>\n | (() => NonUndefinedGuard<TQueryFnData>)\n}\n\n/**\n * Allows to share and re-use query options in a type-safe way.\n *\n * The `queryKey` will be tagged with the type from `queryFn`.\n *\n * **Example**\n *\n * ```ts\n * const { queryKey } = queryOptions({\n * queryKey: ['key'],\n * queryFn: () => Promise.resolve(5),\n * // ^? Promise<number>\n * })\n *\n * const queryClient = new QueryClient()\n * const data = queryClient.getQueryData(queryKey)\n * // ^? number | undefined\n * ```\n * @param options - The query options to tag with the type from `queryFn`.\n * @returns The tagged query options.\n * @public\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {\n queryKey: DataTag<TQueryKey, TQueryFnData>\n}\n\n/**\n * Allows to share and re-use query options in a type-safe way.\n *\n * The `queryKey` will be tagged with the type from `queryFn`.\n *\n * **Example**\n *\n * ```ts\n * const { queryKey } = queryOptions({\n * queryKey: ['key'],\n * queryFn: () => Promise.resolve(5),\n * // ^? Promise<number>\n * })\n *\n * const queryClient = new QueryClient()\n * const data = queryClient.getQueryData(queryKey)\n * // ^? number | undefined\n * ```\n * @param options - The query options to tag with the type from `queryFn`.\n * @returns The tagged query options.\n * @public\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {\n queryKey: DataTag<TQueryKey, TQueryFnData>\n}\n\n/**\n * Allows to share and re-use query options in a type-safe way.\n *\n * The `queryKey` will be tagged with the type from `queryFn`.\n *\n * **Example**\n *\n * ```ts\n * const { queryKey } = queryOptions({\n * queryKey: ['key'],\n * queryFn: () => Promise.resolve(5),\n * // ^? Promise<number>\n * })\n *\n * const queryClient = new QueryClient()\n * const data = queryClient.getQueryData(queryKey)\n * // ^? number | undefined\n * ```\n * @param options - The query options to tag with the type from `queryFn`.\n * @returns The tagged query options.\n * @public\n */\nexport function queryOptions(options: unknown) {\n return options\n}\n","import type {\n DefaultError,\n MutationObserverOptions,\n OmitKeyof,\n} from '@tanstack/query-core'\n\n/**\n * Allows to share and re-use mutation options in a type-safe way.\n *\n * **Example**\n *\n * ```ts\n * export class QueriesService {\n * private http = inject(HttpClient);\n *\n * updatePost(id: number) {\n * return mutationOptions({\n * mutationFn: (post: Post) => Promise.resolve(post),\n * mutationKey: [\"updatePost\", id],\n * onSuccess: (newPost) => {\n * // ^? newPost: Post\n * this.queryClient.setQueryData([\"posts\", id], newPost);\n * },\n * });\n * }\n * }\n *\n * queries = inject(QueriesService)\n * idSignal = new Signal(0);\n * mutation = injectMutation(() => this.queries.updatePost(this.idSignal()))\n *\n * mutation.mutate({ title: 'New Title' })\n * ```\n * @param options - The mutation options.\n * @returns Mutation options.\n * @public\n */\nexport function mutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TContext = unknown,\n>(\n options: MutationObserverOptions<TData, TError, TVariables, TContext>,\n): CreateMutationOptions<TData, TError, TVariables, TContext> {\n return options\n}\n\n/**\n * @public\n */\nexport interface CreateMutationOptions<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TContext = unknown,\n> extends OmitKeyof<\n MutationObserverOptions<TData, TError, TVariables, TContext>,\n '_defaulted'\n > {}\n","import type {\n DataTag,\n DefaultError,\n InfiniteData,\n QueryKey,\n} from '@tanstack/query-core'\nimport type { CreateInfiniteQueryOptions, NonUndefinedGuard } from './types'\n\n/**\n * @public\n */\nexport type UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n> = CreateInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryFnData,\n TQueryKey,\n TPageParam\n> & {\n initialData?: undefined\n}\n\n/**\n * @public\n */\nexport type DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n> = CreateInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryFnData,\n TQueryKey,\n TPageParam\n> & {\n initialData:\n | NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>\n | (() => NonUndefinedGuard<InfiniteData<TQueryFnData, TPageParam>>)\n}\n\n/**\n * Allows to share and re-use infinite query options in a type-safe way.\n *\n * The `queryKey` will be tagged with the type from `queryFn`.\n * @param options - The infinite query options to tag with the type from `queryFn`.\n * @returns The tagged infinite query options.\n * @public\n */\nexport function infiniteQueryOptions<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n): DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n> & {\n queryKey: DataTag<TQueryKey, InfiniteData<TQueryFnData>>\n}\n\n/**\n * Allows to share and re-use infinite query options in a type-safe way.\n *\n * The `queryKey` will be tagged with the type from `queryFn`.\n * @param options - The infinite query options to tag with the type from `queryFn`.\n * @returns The tagged infinite query options.\n * @public\n */\nexport function infiniteQueryOptions<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n): UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n> & {\n queryKey: DataTag<TQueryKey, InfiniteData<TQueryFnData>>\n}\n\n/**\n * Allows to share and re-use infinite query options in a type-safe way.\n *\n * The `queryKey` will be tagged with the type from `queryFn`.\n * @param options - The infinite query options to tag with the type from `queryFn`.\n * @returns The tagged infinite query options.\n * @public\n */\nexport function infiniteQueryOptions(options: unknown) {\n return options\n}\n","import { InfiniteQueryObserver } from '@tanstack/query-core'\nimport { createBaseQuery } from './create-base-query'\nimport { assertInjector } from './util/assert-injector/assert-injector'\nimport type { Injector } from '@angular/core'\nimport type {\n DefaultError,\n InfiniteData,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\nimport type {\n CreateInfiniteQueryOptions,\n CreateInfiniteQueryResult,\n DefinedCreateInfiniteQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infinite-query-options'\n\n/**\n * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n * Infinite queries can additively \"load more\" data onto an existing set of data or \"infinite scroll\"\n * @param optionsFn - A function that returns infinite query options.\n * @param injector - The Angular injector to use.\n * @returns The infinite query result.\n * @public\n */\nexport function injectInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n optionsFn: () => DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n injector?: Injector,\n): DefinedCreateInfiniteQueryResult<TData, TError>\n\n/**\n * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n * Infinite queries can additively \"load more\" data onto an existing set of data or \"infinite scroll\"\n * @param optionsFn - A function that returns infinite query options.\n * @param injector - The Angular injector to use.\n * @returns The infinite query result.\n * @public\n */\nexport function injectInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n optionsFn: () => UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n injector?: Injector,\n): CreateInfiniteQueryResult<TData, TError>\n\n/**\n * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n * Infinite queries can additively \"load more\" data onto an existing set of data or \"infinite scroll\"\n * @param optionsFn - A function that returns infinite query options.\n * @param injector - The Angular injector to use.\n * @returns The infinite query result.\n * @public\n */\nexport function injectInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n optionsFn: () => CreateInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryFnData,\n TQueryKey,\n TPageParam\n >,\n injector?: Injector,\n): CreateInfiniteQueryResult<TData, TError>\n\n/**\n * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n * Infinite queries can additively \"load more\" data onto an existing set of data or \"infinite scroll\"\n * @param optionsFn - A function that returns infinite query options.\n * @param injector - The Angular injector to use.\n * @returns The infinite query result.\n * @public\n */\nexport function injectInfiniteQuery(\n optionsFn: () => CreateInfiniteQueryOptions,\n injector?: Injector,\n) {\n return assertInjector(injectInfiniteQuery, injector, () =>\n createBaseQuery(optionsFn, InfiniteQueryObserver as typeof QueryObserver),\n )\n}\n","import {\n DestroyRef,\n NgZone,\n VERSION,\n computed,\n effect,\n inject,\n signal,\n untracked,\n} from '@angular/core'\nimport { QueryClient, notifyManager } from '@tanstack/query-core'\nimport { signalProxy } from './signal-proxy'\nimport { shouldThrowError } from './util'\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 destroyRef = inject(DestroyRef)\n const queryClient = inject(QueryClient)\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 = '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(() => {\n // observer.trackResult is not used as this optimization is not needed for Angular\n const observer = observerSignal()\n\n untracked(() => {\n const unsubscribe = ngZone.runOutsideAngular(() =>\n observer.subscribe(\n notifyManager.batchCalls((state) => {\n ngZone.run(() => {\n if (\n state.isError &&\n !state.isFetching &&\n // !isRestoring() && // todo: enable when client persistence is implemented\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 destroyRef.onDestroy(unsubscribe)\n })\n })\n\n return signalProxy(\n computed(() => {\n const subscriberResult = resultFromSubscriberSignal()\n const optimisticResult = optimisticResultSignal()\n return subscriberResult ?? optimisticResult\n }),\n )\n}\n","import { computed, untracked } from '@angular/core'\nimport type { Signal } from '@angular/core'\n\nexport type MapToSignals<T> = {\n [K in keyof T]: T[K] extends Function ? T[K] : Signal<T[K]>\n}\n\n/**\n * Exposes fields of an object passed via an Angular `Signal` as `Computed` signals.\n * Functions on the object are passed through as-is.\n * @param inputSignal - `Signal` that must return an object.\n * @returns A proxy object with the same fields as the input object, but with each field wrapped in a `Computed` signal.\n */\nexport function signalProxy<TInput extends Record<string | symbol, any>>(\n inputSignal: Signal<TInput>,\n) {\n const internalState = {} as MapToSignals<TInput>\n\n return new Proxy<MapToSignals<TInput>>(internalState, {\n get(target, prop) {\n // first check if we have it in our internal state and return it\n const computedField = target[prop]\n if (computedField) return computedField\n\n // then, check if it's a function on the resultState and return it\n const targetField = untracked(inputSignal)[prop]\n if (typeof targetField === 'function') return targetField\n\n // finally, create a computed field, store it and return it\n // @ts-expect-error\n return (target[prop] = computed(() => inputSignal()[prop]))\n },\n has(_, prop) {\n return !!untracked(inputSignal)[prop]\n },\n ownKeys() {\n return Reflect.ownKeys(untracked(inputSignal))\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n }\n },\n })\n}\n","export function shouldThrowError<T extends (...args: Array<any>) => boolean>(\n throwError: boolean | T | undefined,\n params: Parameters<T>,\n): boolean {\n // Allow throwError function to override throwing behavior on a per-error basis\n if (typeof throwError === 'function') {\n return throwError(...params)\n }\n\n return !!throwError\n}\n\nexport function noop(): void {}\n","/* eslint-disable cspell/spellchecker */\n/**\n * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.\n *\n * Original Author: Chau Tran\n *\n * NG Extension Platform is an open-source project licensed under the MIT license.\n *\n * For more information about the original code, see\n * https://github.com/nartc/ngxtension-platform\n */\n/* eslint-enable */\n\nimport {\n Injector,\n assertInInjectionContext,\n inject,\n runInInjectionContext,\n} from '@angular/core'\n\n/**\n * `assertInjector` extends `assertInInjectionContext` with an optional `Injector`\n * After assertion, `assertInjector` runs the `runner` function with the guaranteed `Injector`\n * whether it is the default `Injector` within the current **Injection Context**\n * or the custom `Injector` that was passed in.\n *\n * @template {() => any} Runner - Runner is a function that can return anything\n * @param {Function} fn - the Function to pass in `assertInInjectionContext`\n * @param {Injector | undefined | null} injector - the optional \"custom\" Injector\n * @param {Runner} runner - the runner fn\n * @returns {ReturnType<Runner>} result - returns the result of the Runner\n *\n * @example\n * ```ts\n * function injectValue(injector?: Injector) {\n * return assertInjector(injectValue, injector, () => 'value');\n * }\n *\n * injectValue(); // string\n * ```\n */\nexport function assertInjector<TRunner extends () => any>(\n fn: Function,\n injector: Injector | undefined | null,\n runner: TRunner,\n): ReturnType<TRunner>\n/**\n * `assertInjector` extends `assertInInjectionContext` with an optional `Injector`\n * After assertion, `assertInjector` returns a guaranteed `Injector` whether it is the default `Injector`\n * within the current **Injection Context** or the custom `Injector` that was passed in.\n *\n * @param {Function} fn - the Function to pass in `assertInInjectionContext`\n * @param {Injector | undefined | null} injector - the optional \"custom\" Injector\n * @returns Injector\n *\n * @example\n * ```ts\n * function injectDestroy(injector?: Injector) {\n * injector = assertInjector(injectDestroy, injector);\n *\n * return runInInjectionContext(injector, () => {\n * // code\n * })\n * }\n * ```\n */\nexport function assertInjector(\n fn: Function,\n injector: Injector | undefined | null,\n): Injector\nexport function assertInjector(\n fn: Function,\n injector: Injector | undefined | null,\n runner?: () => any,\n) {\n !injector && assertInInjectionContext(fn)\n const assertedInjector = injector ?? inject(Injector)\n\n if (!runner) return assertedInjector\n return runInInjectionContext(assertedInjector, runner)\n}\n","import { DestroyRef, NgZone, inject, signal } from '@angular/core'\nimport { QueryClient, notifyManager } from '@tanstack/query-core'\nimport { assertInjector } from './util/assert-injector/assert-injector'\nimport type { QueryFilters } from '@tanstack/query-core'\nimport type { Injector, Signal } from '@angular/core'\n\n/**\n * Injects a signal that tracks the number of queries that your application is loading or\n * fetching in the background.\n *\n * Can be used for app-wide loading indicators\n * @param filters - The filters to apply to the query.\n * @param injector - The Angular injector to use.\n * @returns signal with number of loading or fetching queries.\n * @public\n */\nexport function injectIsFetching(\n filters?: QueryFilters,\n injector?: Injector,\n): Signal<number> {\n return assertInjector(injectIsFetching, injector, () => {\n const destroyRef = inject(DestroyRef)\n const ngZone = inject(NgZone)\n const queryClient = inject(QueryClient)\n\n const cache = queryClient.getQueryCache()\n // isFetching is the prev value initialized on mount *\n let isFetching = queryClient.isFetching(filters)\n\n const result = signal(isFetching)\n\n const unsubscribe = ngZone.runOutsideAngular(() =>\n cache.subscribe(\n notifyManager.batchCalls(() => {\n const newIsFetching = queryClient.isFetching(filters)\n if (isFetching !== newIsFetching) {\n // * and update with each change\n isFetching = newIsFetching\n ngZone.run(() => {\n result.set(isFetching)\n })\n }\n }),\n ),\n )\n\n destroyRef.onDestroy(unsubscribe)\n\n return result\n })\n}\n","import { DestroyRef, NgZone, inject, signal } from '@angular/core'\nimport { QueryClient, notifyManager } from '@tanstack/query-core'\nimport { assertInjector } from './util/assert-injector/assert-injector'\nimport type { MutationFilters } from '@tanstack/query-core'\nimport type { Injector, Signal } from '@angular/core'\n\n/**\n * Injects a signal that tracks the number of mutations that your application is fetching.\n *\n * Can be used for app-wide loading indicators\n * @param filters - The filters to apply to the query.\n * @param injector - The Angular injector to use.\n * @returns signal with number of fetching mutations.\n * @public\n */\nexport function injectIsMutating(\n filters?: MutationFilters,\n injector?: Injector,\n): Signal<number> {\n return assertInjector(injectIsMutating, injector, () => {\n const destroyRef = inject(DestroyRef)\n const ngZone = inject(NgZone)\n const queryClient = inject(QueryClient)\n\n const cache = queryClient.getMutationCache()\n // isMutating is the prev value initialized on mount *\n let isMutating = queryClient.isMutating(filters)\n\n const result = signal(isMutating)\n\n const unsubscribe = ngZone.runOutsideAngular(() =>\n cache.subscribe(\n notifyManager.batchCalls(() => {\n const newIsMutating = queryClient.isMutating(filters)\n if (isMutating !== newIsMutating) {\n // * and update with each change\n isMutating = newIsMutating\n ngZone.run(() => {\n result.set(isMutating)\n })\n }\n }),\n ),\n )\n\n destroyRef.onDestroy(unsubscribe)\n\n return result\n })\n}\n","import {\n DestroyRef,\n NgZone,\n computed,\n effect,\n inject,\n signal,\n untracked,\n} from '@angular/core'\nimport {\n MutationObserver,\n QueryClient,\n notifyManager,\n} from '@tanstack/query-core'\nimport { assertInjector } from './util/assert-injector/assert-injector'\nimport { signalProxy } from './signal-proxy'\nimport { noop, shouldThrowError } from './util'\nimport type { Injector } from '@angular/core'\nimport type { DefaultError, MutationObserverResult } from '@tanstack/query-core'\nimport type { CreateMutateFunction, CreateMutationResult } from './types'\nimport type { CreateMutationOptions } from './mutation-options'\n\n/**\n * Injects a mutation: an imperative function that can be invoked which typically performs server side effects.\n *\n * Unlike queries, mutations are not run automatically.\n * @param optionsFn - A function that returns mutation options.\n * @param injector - The Angular injector to use.\n * @returns The mutation.\n * @public\n */\nexport function injectMutation<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TContext = unknown,\n>(\n optionsFn: () => CreateMutationOptions<TData, TError, TVariables, TContext>,\n injector?: Injector,\n): CreateMutationResult<TData, TError, TVariables, TContext> {\n return assertInjector(injectMutation, injector, () => {\n const destroyRef = inject(DestroyRef)\n const ngZone = inject(NgZone)\n const queryClient = inject(QueryClient)\n\n /**\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 optionsSignal = computed(optionsFn)\n\n const observerSignal = (() => {\n let instance: MutationObserver<\n TData,\n TError,\n TVariables,\n TContext\n > | null = null\n\n return computed(() => {\n return (instance ||= new MutationObserver(queryClient, optionsSignal()))\n })\n })()\n\n const mutateFnSignal = computed<\n CreateMutateFunction<TData, TError, TVariables, TContext>\n >(() => {\n const observer = observerSignal()\n return (variables, mutateOptions) => {\n observer.mutate(variables, mutateOptions).catch(noop)\n }\n })\n\n /**\n * Computed signal that gets result from mutation cache based on passed options\n */\n const resultFromInitialOptionsSignal = computed(() => {\n const observer = observerSignal()\n return observer.getCurrentResult()\n })\n\n /**\n * Signal that contains result set by subscriber\n */\n const resultFromSubscriberSignal = signal<MutationObserverResult<\n TData,\n TError,\n TVariables,\n TContext\n > | null>(null)\n\n effect(\n () => {\n const observer = observerSignal()\n const options = optionsSignal()\n\n untracked(() => {\n observer.setOptions(options)\n })\n },\n {\n injector,\n },\n )\n\n effect(\n () => {\n // observer.trackResult is not used as this optimization is not needed for Angular\n const observer = observerSignal()\n\n untracked(() => {\n const unsubscribe = ngZone.runOutsideAngular(() =>\n observer.subscribe(\n notifyManager.batchCalls((state) => {\n ngZone.run(() => {\n if (\n state.isError &&\n shouldThrowError(observer.options.throwOnError, [\n state.error,\n ])\n ) {\n ngZone.onError.emit(state.error)\n throw state.error\n }\n\n resultFromSubscriberSignal.set(state)\n })\n }),\n ),\n )\n destroyRef.onDestroy(unsubscribe)\n })\n },\n {\n injector,\n },\n )\n\n const resultSignal = computed(() => {\n const resultFromSubscriber = resultFromSubscriberSignal()\n const resultFromInitialOptions = resultFromInitialOptionsSignal()\n\n const result = resultFromSubscriber ?? resultFromInitialOptions\n\n return {\n ...result,\n mutate: mutateFnSignal(),\n mutateAsync: result.mutate,\n }\n })\n\n return signalProxy(resultSignal) as CreateMutationResult<\n TData,\n TError,\n TVariables,\n TContext\n >\n })\n}\n","import { DestroyRef, NgZone, computed, inject, signal } from '@angular/core'\nimport {\n QueryClient,\n notifyManager,\n replaceEqualDeep,\n} from '@tanstack/query-core'\nimport { assertInjector } from './util/assert-injector/assert-injector'\nimport type { Injector, Signal } from '@angular/core'\nimport type {\n Mutation,\n MutationCache,\n MutationFilters,\n MutationState,\n} from '@tanstack/query-core'\n\ntype MutationStateOptions<TResult = MutationState> = {\n filters?: MutationFilters\n select?: (mutation: Mutation) => TResult\n}\n\nfunction getResult<TResult = MutationState>(\n mutationCache: MutationCache,\n options: MutationStateOptions<TResult>,\n): Array<TResult> {\n return mutationCache\n .findAll(options.filters)\n .map(\n (mutation): TResult =>\n (options.select ? options.select(mutation) : mutation.state) as TResult,\n )\n}\n\n/**\n * @public\n */\nexport interface InjectMutationStateOptions {\n injector?: Injector\n}\n\n/**\n * Injects a signal that tracks the state of all mutations.\n * @param mutationStateOptionsFn - A function that returns mutation state options.\n * @param options - The Angular injector to use.\n * @returns The signal that tracks the state of all mutations.\n * @public\n */\nexport function injectMutationState<TResult = MutationState>(\n mutationStateOptionsFn: () => MutationStateOptions<TResult> = () => ({}),\n options?: InjectMutationStateOptions,\n): Signal<Array<TResult>> {\n return assertInjector(injectMutationState, options?.injector, () => {\n const destroyRef = inject(DestroyRef)\n const ngZone = inject(NgZone)\n const queryClient = inject(QueryClient)\n\n const mutationCache = queryClient.getMutationCache()\n\n /**\n * Computed signal that gets result from mutation cache based on passed options\n * First element is the result, second element is the time when the result was set\n */\n const resultFromOptionsSignal = computed(() => {\n return [\n getResult(mutationCache, mutationStateOptionsFn()),\n performance.now(),\n ] as const\n })\n\n /**\n * Signal that contains result set by subscriber\n * First element is the result, second element is the time when the result was set\n */\n const resultFromSubscriberSignal = signal<[Array<TResult>, number] | null>(\n null,\n )\n\n /**\n * Returns the last result by either subscriber or options\n */\n const effectiveResultSignal = computed(() => {\n const optionsResult = resultFromOptionsSignal()\n const subscriberResult = resultFromSubscriberSignal()\n return subscriberResult && subscriberResult[1] > optionsResult[1]\n ? subscriberResult[0]\n : optionsResult[0]\n })\n\n const unsubscribe = ngZone.runOutsideAngular(() =>\n mutationCache.subscribe(\n notifyManager.batchCalls(() => {\n const [lastResult] = effectiveResultSignal()\n const nextResult = replaceEqualDeep(\n lastResult,\n getResult(mutationCache, mutationStateOptionsFn()),\n )\n if (lastResult !== nextResult) {\n ngZone.run(() => {\n resultFromSubscriberSignal.set([nextResult, performance.now()])\n })\n }\n }),\n ),\n )\n\n destroyRef.onDestroy(unsubscribe)\n\n return effectiveResultSignal\n })\n}\n","import {\n QueriesObserver,\n QueryClient,\n notifyManager,\n} from '@tanstack/query-core'\nimport {\n DestroyRef,\n NgZone,\n computed,\n effect,\n inject,\n signal,\n} from '@angular/core'\nimport { assertInjector } from './util/assert-injector/assert-injector'\nimport type { Injector, Signal } from '@angular/core'\nimport type {\n DefaultError,\n OmitKeyof,\n QueriesObserverOptions,\n QueriesPlaceholderDataFunction,\n QueryFunction,\n QueryKey,\n QueryObserverOptions,\n QueryObserverResult,\n ThrowOnError,\n} from '@tanstack/query-core'\n\n// This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.\n// `placeholderData` function does not have a parameter\ntype QueryObserverOptionsForCreateQueries<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = OmitKeyof<\n QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,\n 'placeholderData'\n> & {\n placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>\n}\n\n// Avoid TS depth-limit error in case of large array literal\ntype MAXIMUM_DEPTH = 20\n\n// Widen the type of the symbol to enable type inference even if skipToken is not immutable.\ntype SkipTokenForUseQueries = symbol\n\ntype GetOptions<T> =\n // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }\n T extends {\n queryFnData: infer TQueryFnData\n error?: infer TError\n data: infer TData\n }\n ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? QueryObserverOptionsForCreateQueries<unknown, TError, TData>\n : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]\n T extends [infer TQueryFnData, infer TError, infer TData]\n ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>\n : T extends [infer TQueryFnData, infer TError]\n ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? QueryObserverOptionsForCreateQueries<TQueryFnData>\n : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n select: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? QueryObserverOptionsForCreateQueries<\n TQueryFnData,\n unknown extends TError ? DefaultError : TError,\n unknown extends TData ? TQueryFnData : TData,\n TQueryKey\n >\n : // Fallback\n QueryObserverOptionsForCreateQueries\n\ntype GetResults<T> =\n // Part 1: responsible for mapping explicit type parameter to function result, if object\n T extends { queryFnData: any; error?: infer TError; data: infer TData }\n ? QueryObserverResult<TData, TError>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? QueryObserverResult<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? QueryObserverResult<TData, TError>\n : // Part 2: responsible for mapping explicit type parameter to function result, if tuple\n T extends [any, infer TError, infer TData]\n ? QueryObserverResult<TData, TError>\n : T extends [infer TQueryFnData, infer TError]\n ? QueryObserverResult<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? QueryObserverResult<TQueryFnData>\n : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n select: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? QueryObserverResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n : // Fallback\n QueryObserverResult\n\n/**\n * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param\n * @public\n */\nexport type QueriesOptions<\n T extends Array<any>,\n TResult extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<QueryObserverOptionsForCreateQueries>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResult, GetOptions<Head>]\n : T extends [infer Head, ...infer Tail]\n ? QueriesOptions<\n [...Tail],\n [...TResult, GetOptions<Head>],\n [...TDepth, 1]\n >\n : ReadonlyArray<unknown> extends T\n ? T\n : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!\n // use this to infer the param types in the case of Array.map() argument\n T extends Array<\n QueryObserverOptionsForCreateQueries<\n infer TQueryFnData,\n infer TError,\n infer TData,\n infer TQueryKey\n >\n >\n ? Array<\n QueryObserverOptionsForCreateQueries<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >\n >\n : // Fallback\n Array<QueryObserverOptionsForCreateQueries>\n\n/**\n * QueriesResults reducer recursively maps type param to results\n * @public\n */\nexport type QueriesResults<\n T extends Array<any>,\n TResult extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<QueryObserverResult>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResult, GetResults<Head>]\n : T extends [infer Head, ...infer Tail]\n ? QueriesResults<\n [...Tail],\n [...TResult, GetResults<Head>],\n [...TDepth, 1]\n >\n : T extends Array<\n QueryObserverOptionsForCreateQueries<\n infer TQueryFnData,\n infer TError,\n infer TData,\n any\n >\n >\n ? // Dynamic-size (homogenous) CreateQueryOptions array: map directly to array of results\n Array<\n QueryObserverResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n >\n : // Fallback\n Array<QueryObserverResult>\n\n/**\n * @param root0\n * @param root0.queries\n * @param root0.combine\n * @param injector\n * @public\n */\nexport function injectQueries<\n T extends Array<any>,\n TCombinedResult = QueriesResults<T>,\n>(\n {\n queries,\n ...options\n }: {\n queries: Signal<[...QueriesOptions<T>]>\n combine?: (result: QueriesResults<T>) => TCombinedResult\n },\n injector?: Injector,\n): Signal<TCombinedResult> {\n return assertInjector(injectQueries, injector, () => {\n const destroyRef = inject(DestroyRef)\n const ngZone = inject(NgZone)\n const queryClient = inject(QueryClient)\n\n const defaultedQueries = computed(() => {\n return queries().map((opts) => {\n const defaultedOptions = queryClient.defaultQueryOptions(opts)\n // Make sure the results are already in fetching state before subscribing or updating options\n defaultedOptions._optimisticResults = 'optimistic'\n\n return defaultedOptions as QueryObserverOptions\n })\n })\n\n const observer = new QueriesObserver<TCombinedResult>(\n queryClient,\n defaultedQueries(),\n options as QueriesObserverOptions<TCombinedResult>,\n )\n\n // Do not notify on updates because of changes in the options because\n // these changes should already be reflected in the optimistic result.\n effect(() => {\n observer.setQueries(\n defaultedQueries(),\n options as QueriesObserverOptions<TCombinedResult>,\n )\n })\n\n const [, getCombinedResult] = observer.getOptimisticResult(\n defaultedQueries(),\n (options as QueriesObserverOptions<TCombinedResult>).combine,\n )\n\n const result = signal(getCombinedResult() as any)\n\n const unsubscribe = ngZone.runOutsideAngular(() =>\n observer.subscribe(notifyManager.batchCalls(result.set)),\n )\n destroyRef.onDestroy(unsubscribe)\n\n return result\n })\n}\n","import { QueryObserver } from '@tanstack/query-core'\nimport { assertInjector } from './util/assert-injector/assert-injector'\nimport { createBaseQuery } from './create-base-query'\nimport type { Injector } from '@angular/core'\nimport type { DefaultError, QueryKey } from '@tanstack/query-core'\nimport type {\n CreateQueryOptions,\n CreateQueryResult,\n DefinedCreateQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataOptions,\n UndefinedInitialDataOptions,\n} from './query-options'\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param optionsFn - A function that returns query options.\n * @param injector - The Angular injector to use.\n * @returns The query result.\n * @public\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n optionsFn: () => DefinedInitialDataOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n injector?: Injector,\n): DefinedCreateQueryResult<TData, TError>\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param optionsFn - A function that returns query options.\n * @param injector - The Angular injector to use.\n * @returns The query result.\n * @public\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n optionsFn: () => UndefinedInitialDataOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >,\n injector?: Injector,\n): CreateQueryResult<TData, TError>\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param optionsFn - A function that returns query options.\n * @param injector - The Angular injector to use.\n * @returns The query result.\n * @public\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n optionsFn: () => CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n injector?: Injector,\n): CreateQueryResult<TData, TError>\n\n/**\n * Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.\n *\n * **Basic example**\n * ```ts\n * class ServiceOrComponent {\n * query = injectQuery(() => ({\n * queryKey: ['repoData'],\n * queryFn: () =>\n * this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),\n * }))\n * }\n * ```\n *\n * Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.\n * In the example below, the query will be automatically enabled and executed when the filter signal changes\n * to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.\n *\n * **Reactive example**\n * ```ts\n * class ServiceOrComponent {\n * filter = signal('')\n *\n * todosQuery = injectQuery(() => ({\n * queryKey: ['todos', this.filter()],\n * queryFn: () => fetchTodos(this.filter()),\n * // Signals can be combined with expressions\n * enabled: !!this.filter(),\n * }))\n * }\n * ```\n * @param optionsFn - A function that returns query options.\n * @param injector - The Angular injector to use.\n * @returns The query result.\n * @public\n * @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries\n */\nexport function injectQuery(\n optionsFn: () => CreateQueryOptions,\n injector?: Injector,\n) {\n return assertInjector(injectQuery, injector, () =>\n createBaseQuery(optionsFn, QueryObserver),\n ) as unknown as CreateQueryResult\n}\n","import { Injector, inject } from '@angular/core'\nimport { QueryClient } from '@tanstack/query-core'\nimport type { InjectOptions } from '@angular/core'\n\n/**\n * Injects a `QueryClient` instance and allows passing a custom injector.\n * @param injectOptions - Type of the options argument to inject and optionally a custom injector.\n * @returns The `QueryClient` instance.\n * @public\n * @deprecated Use `inject(QueryClient)` instead.\n * If you need to get a `QueryClient` from a custom injector, use `injector.get(QueryClient)`.