refactor(angular-query): change query functions to accept an options object instead of an injector

examples/angular/devtools-panel/src/app/components/lazy-load-devtools-panel-example.component.ts

@@ -51,7 +51,9 @@ export default class LazyLoadDevtoolsPanelExampleComponent {
       this.devtools.set(
         import('@tanstack/angular-query-devtools-experimental').then(
           ({ injectDevtoolsPanel }) =>
-            injectDevtoolsPanel(this.devToolsOptions, this.injector),
+            injectDevtoolsPanel(this.devToolsOptions, {
+              injector: this.injector,
+            }),
         ),
       )
     }

packages/angular-query-devtools-experimental/src/inject-devtools-panel.ts

@@ -18,31 +18,40 @@ import { isPlatformBrowser } from '@angular/common'
 import type { ElementRef } from '@angular/core'
 import type { DevtoolsErrorType } from '@tanstack/query-devtools'
 
+export interface InjectDevtoolsPanelOptions {
+  /**
+   * The `Injector` in which to create the devtools panel.
+   *
+   * If this is not provided, the current injection context will be used instead (via `inject`).
+   */
+  injector?: Injector
+}
+
 /**
  * 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 optionsFn - A function that returns devtools panel options.
- * @param injector - The Angular injector to use.
+ * @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 function injectDevtoolsPanel(
-  optionsFn: () => DevtoolsPanelOptions,
-  injector?: Injector,
+  injectDevtoolsPanelFn: () => DevtoolsPanelOptions,
+  options?: InjectDevtoolsPanelOptions,
 ): DevtoolsPanelRef {
-  !injector && assertInInjectionContext(injectDevtoolsPanel)
-  const currentInjector = injector ?? inject(Injector)
+  !options?.injector && assertInInjectionContext(injectDevtoolsPanel)
+  const currentInjector = options?.injector ?? inject(Injector)
 
   return runInInjectionContext(currentInjector, () => {
     const destroyRef = inject(DestroyRef)
     const isBrowser = isPlatformBrowser(inject(PLATFORM_ID))
     const injectedClient = inject(QueryClient, { optional: true })
 
-    const options = computed(optionsFn)
+    const queryOptions = computed(injectDevtoolsPanelFn)
     let devtools: TanstackQueryDevtoolsPanel | null = null
 
     const destroy = () => {
@@ -63,7 +72,7 @@ export function injectDevtoolsPanel(
         shadowDOMTarget,
         onClose,
         hostElement,
-      } = options()
+      } = queryOptions()
 
       untracked(() => {
         if (!client) throw new Error('No QueryClient found')

packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts

@@ -87,7 +87,9 @@ describe('injectInfiniteQuery', () => {
           initialPageParam: 0,
           getNextPageParam: () => 12,
         }),
-        TestBed.inject(Injector),
+        {
+          injector: TestBed.inject(Injector),
+        },
       )
 
       expect(query.status()).toBe('pending')

packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts

@@ -60,7 +60,9 @@ describe('injectIsFetching', () => {
 
     test('can be used outside injection context when passing an injector', () => {
       expect(
-        injectIsFetching(undefined, TestBed.inject(Injector)),
+        injectIsFetching(undefined, {
+          injector: TestBed.inject(Injector),
+        }),
       ).not.toThrow()
     })
   })

packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts

@@ -60,7 +60,9 @@ describe('injectIsMutating', () => {
 
     test('can be used outside injection context when passing an injector', () => {
       expect(
-        injectIsMutating(undefined, TestBed.inject(Injector)),
+        injectIsMutating(undefined, {
+          injector: TestBed.inject(Injector),
+        }),
       ).not.toThrow()
     })
   })

packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts

@@ -466,7 +466,9 @@ describe('injectMutation', () => {
             mutationKey: ['injectionContextError'],
             mutationFn: () => Promise.resolve(),
           }),
-          TestBed.inject(Injector),
+          {
+            injector: TestBed.inject(Injector),
+          },
         )
       }).not.toThrow()
     })

packages/angular-query-experimental/src/__tests__/inject-query.test.ts

@@ -551,7 +551,9 @@ describe('injectQuery', () => {
           queryKey: ['manualInjector'],
           queryFn: simpleFetcher,
         }),
-        TestBed.inject(Injector),
+        {
+          injector: TestBed.inject(Injector),
+        },
       )
 
       expect(query.status()).toBe('pending')

packages/angular-query-experimental/src/inject-infinite-query.ts

@@ -1,7 +1,6 @@
 import { InfiniteQueryObserver } from '@tanstack/query-core'
 import { createBaseQuery } from './create-base-query'
 import { assertInjector } from './util/assert-injector/assert-injector'
-import type { Injector } from '@angular/core'
 import type {
   DefaultError,
   InfiniteData,
@@ -17,12 +16,22 @@ import type {
   DefinedInitialDataInfiniteOptions,
   UndefinedInitialDataInfiniteOptions,
 } from './infinite-query-options'
+import type { Injector } from '@angular/core'
+
+export interface InjectInfiniteQueryOptions {
+  /**
+   * The `Injector` in which to create the infinite query.
+   *
+   * If this is not provided, the current injection context will be used instead (via `inject`).
+   */
+  injector?: Injector
+}
 
 /**
  * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
  * Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
- * @param optionsFn - A function that returns infinite query options.
- * @param injector - The Angular injector to use.
+ * @param injectInfiniteQueryFn - A function that returns infinite query options.
+ * @param options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
@@ -33,21 +42,21 @@ export function injectInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  optionsFn: () => DefinedInitialDataInfiniteOptions<
+  injectInfiniteQueryFn: () => DefinedInitialDataInfiniteOptions<
     TQueryFnData,
     TError,
     TData,
     TQueryKey,
     TPageParam
   >,
-  injector?: Injector,
+  options?: InjectInfiniteQueryOptions,
 ): DefinedCreateInfiniteQueryResult<TData, TError>
 
 /**
  * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
  * Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
- * @param optionsFn - A function that returns infinite query options.
- * @param injector - The Angular injector to use.
+ * @param injectInfiniteQueryFn - A function that returns infinite query options.
+ * @param options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
@@ -58,21 +67,21 @@ export function injectInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  optionsFn: () => UndefinedInitialDataInfiniteOptions<
+  injectInfiniteQueryFn: () => UndefinedInitialDataInfiniteOptions<
     TQueryFnData,
     TError,
     TData,
     TQueryKey,
     TPageParam
   >,
-  injector?: Injector,
+  options?: InjectInfiniteQueryOptions,
 ): CreateInfiniteQueryResult<TData, TError>
 
 /**
  * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
  * Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
- * @param optionsFn - A function that returns infinite query options.
- * @param injector - The Angular injector to use.
+ * @param injectInfiniteQueryFn - A function that returns infinite query options.
+ * @param options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
@@ -83,30 +92,37 @@ export function injectInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  optionsFn: () => CreateInfiniteQueryOptions<
+  injectInfiniteQueryFn: () => CreateInfiniteQueryOptions<
     TQueryFnData,
     TError,
     TData,
     TQueryFnData,
     TQueryKey,
     TPageParam
   >,
-  injector?: Injector,
+  options?: InjectInfiniteQueryOptions,
 ): CreateInfiniteQueryResult<TData, TError>
 
 /**
  * Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
  * Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
- * @param optionsFn - A function that returns infinite query options.
- * @param injector - The Angular injector to use.
+ * @param injectInfiniteQueryFn - A function that returns infinite query options.
+ * @param options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
 export function injectInfiniteQuery(
-  optionsFn: () => CreateInfiniteQueryOptions,
-  injector?: Injector,
+  injectInfiniteQueryFn: () => CreateInfiniteQueryOptions,
+  options?: InjectInfiniteQueryOptions,
 ) {
-  return assertInjector(injectInfiniteQuery, injector, () =>
-    createBaseQuery(optionsFn, InfiniteQueryObserver as typeof QueryObserver),
+  return assertInjector(injectInfiniteQuery, options?.injector, () =>
+    createBaseQuery(
+      injectInfiniteQueryFn,
+      InfiniteQueryObserver as typeof QueryObserver,
+    ),
   )
 }
+
+export interface InjectInfiniteQueryOptions {
+  injector?: Injector
+}

packages/angular-query-experimental/src/inject-is-fetching.ts

@@ -4,21 +4,30 @@ import { assertInjector } from './util/assert-injector/assert-injector'
 import type { QueryFilters } from '@tanstack/query-core'
 import type { Injector, Signal } from '@angular/core'
 
+export interface InjectIsFetchingOptions {
+  /**
+   * The `Injector` in which to create the isFetching signal.
+   *
+   * If this is not provided, the current injection context will be used instead (via `inject`).
+   */
+  injector?: Injector
+}
+
 /**
  * Injects a signal that tracks the number of queries that your application is loading or
  * fetching in the background.
  *
  * Can be used for app-wide loading indicators
  * @param filters - The filters to apply to the query.
- * @param injector - The Angular injector to use.
+ * @param options - Additional configuration
  * @returns signal with number of loading or fetching queries.
  * @public
  */
 export function injectIsFetching(
   filters?: QueryFilters,
-  injector?: Injector,
+  options?: InjectIsFetchingOptions,
 ): Signal<number> {
-  return assertInjector(injectIsFetching, injector, () => {
+  return assertInjector(injectIsFetching, options?.injector, () => {
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
     const queryClient = inject(QueryClient)

packages/angular-query-experimental/src/inject-is-mutating.ts

@@ -4,20 +4,29 @@ import { assertInjector } from './util/assert-injector/assert-injector'
 import type { MutationFilters } from '@tanstack/query-core'
 import type { Injector, Signal } from '@angular/core'
 
+export interface InjectIsMutatingOptions {
+  /**
+   * The `Injector` in which to create the isMutating signal.
+   *
+   * If this is not provided, the current injection context will be used instead (via `inject`).
+   */
+  injector?: Injector
+}
+
 /**
  * Injects a signal that tracks the number of mutations that your application is fetching.
  *
  * Can be used for app-wide loading indicators
  * @param filters - The filters to apply to the query.
- * @param injector - The Angular injector to use.
+ * @param options - Additional configuration
  * @returns signal with number of fetching mutations.
  * @public
  */
 export function injectIsMutating(
   filters?: MutationFilters,
-  injector?: Injector,
+  options?: InjectIsMutatingOptions,
 ): Signal<number> {
-  return assertInjector(injectIsMutating, injector, () => {
+  return assertInjector(injectIsMutating, options?.injector, () => {
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
     const queryClient = inject(QueryClient)

packages/angular-query-experimental/src/inject-mutation-state.ts

@@ -18,6 +18,11 @@ type MutationStateOptions<TResult = MutationState> = {
   select?: (mutation: Mutation) => TResult
 }
 
+/**
+ *
+ * @param mutationCache
+ * @param options
+ */
 function getResult<TResult = MutationState>(
   mutationCache: MutationCache,
   options: MutationStateOptions<TResult>,
@@ -34,18 +39,23 @@ function getResult<TResult = MutationState>(
  * @public
  */
 export interface InjectMutationStateOptions {
+  /**
+   * The `Injector` in which to create the mutation state signal.
+   *
+   * If this is not provided, the current injection context will be used instead (via `inject`).
+   */
   injector?: Injector
 }
 
 /**
  * Injects a signal that tracks the state of all mutations.
- * @param mutationStateOptionsFn - A function that returns mutation state options.
+ * @param injectMutationStateFn - A function that returns mutation state options.
  * @param options - The Angular injector to use.
  * @returns The signal that tracks the state of all mutations.
  * @public
  */
 export function injectMutationState<TResult = MutationState>(
-  mutationStateOptionsFn: () => MutationStateOptions<TResult> = () => ({}),
+  injectMutationStateFn: () => MutationStateOptions<TResult> = () => ({}),
   options?: InjectMutationStateOptions,
 ): Signal<Array<TResult>> {
   return assertInjector(injectMutationState, options?.injector, () => {
@@ -61,7 +71,7 @@ export function injectMutationState<TResult = MutationState>(
      */
     const resultFromOptionsSignal = computed(() => {
       return [
-        getResult(mutationCache, mutationStateOptionsFn()),
+        getResult(mutationCache, injectMutationStateFn()),
         performance.now(),
       ] as const
     })
@@ -91,7 +101,7 @@ export function injectMutationState<TResult = MutationState>(
           const [lastResult] = effectiveResultSignal()
           const nextResult = replaceEqualDeep(
             lastResult,
-            getResult(mutationCache, mutationStateOptionsFn()),
+            getResult(mutationCache, injectMutationStateFn()),
           )
           if (lastResult !== nextResult) {
             ngZone.run(() => {