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

change query functions to accept an options object instead of an injector so that it matches angular APIs such as effect and allows adding more options in the future.

BREAKING CHANGE: The injector option has been replaced with an options object. The injector can now be provided with the options object.
Closes #8711

Author: dominicbachmann

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

@@ -45,7 +45,7 @@ export default class LazyLoadDevtoolsPanelExampleComponent {
       this.devtools = 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

@@ -12,9 +12,12 @@ import {
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
 import {
   QueryClient,
-  onlineManager,
+  onlineManager
 } from '@tanstack/angular-query-experimental'
 import { isPlatformBrowser } from '@angular/common'
+import type {
+  WithOptionalInjector
+} from '@tanstack/angular-query-experimental'
 import type { ElementRef } from '@angular/core'
 import type { DevtoolsErrorType } from '@tanstack/query-devtools'
 
@@ -26,19 +29,19 @@ import type { DevtoolsErrorType } from '@tanstack/query-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 options - Additional configuration
  * @returns DevtoolsPanelRef
  * @see https://tanstack.com/query/v5/docs/framework/angular/devtools
  */
 export function injectDevtoolsPanel(
   optionsFn: () => DevtoolsPanelOptions,
-  injector?: Injector,
+  options?: WithOptionalInjector,
 ): DevtoolsPanelRef {
-  !injector && assertInInjectionContext(injectDevtoolsPanel)
-  const currentInjector = injector ?? inject(Injector)
+  !options?.injector && assertInInjectionContext(injectDevtoolsPanel)
+  const currentInjector = options?.injector ?? inject(Injector)
 
   return runInInjectionContext(currentInjector, () => {
-    const options = computed(optionsFn)
+    const queryOptions = computed(optionsFn)
     let devtools: TanstackQueryDevtoolsPanel | null = null
 
     const isBrowser = isPlatformBrowser(inject(PLATFORM_ID))
@@ -64,7 +67,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,12 @@ 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,12 @@ 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

@@ -509,7 +509,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

@@ -638,7 +638,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,
@@ -11,7 +10,7 @@ import type {
 import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
-  DefinedCreateInfiniteQueryResult,
+  DefinedCreateInfiniteQueryResult, WithOptionalInjector,
 } from './types'
 import type {
   DefinedInitialDataInfiniteOptions,
@@ -22,7 +21,7 @@ import type {
  * 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 options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
@@ -40,14 +39,14 @@ export function injectInfiniteQuery<
     TQueryKey,
     TPageParam
   >,
-  injector?: Injector,
+  options?: WithOptionalInjector,
 ): 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 options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
@@ -65,14 +64,14 @@ export function injectInfiniteQuery<
     TQueryKey,
     TPageParam
   >,
-  injector?: Injector,
+  options?: WithOptionalInjector,
 ): 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 options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
@@ -91,22 +90,22 @@ export function injectInfiniteQuery<
     TQueryKey,
     TPageParam
   >,
-  injector?: Injector,
+  options?: WithOptionalInjector,
 ): 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 options - Additional configuration.
  * @returns The infinite query result.
  * @public
  */
 export function injectInfiniteQuery(
   optionsFn: () => CreateInfiniteQueryOptions,
-  injector?: Injector,
+  options?: WithOptionalInjector,
 ) {
-  return assertInjector(injectInfiniteQuery, injector, () =>
+  return assertInjector(injectInfiniteQuery, options?.injector, () =>
     createBaseQuery(optionsFn, InfiniteQueryObserver as typeof QueryObserver),
   )
 }

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

@@ -2,23 +2,24 @@ import { DestroyRef, NgZone, inject, signal } from '@angular/core'
 import { QueryClient, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import type { QueryFilters } from '@tanstack/query-core'
-import type { Injector, Signal } from '@angular/core'
+import type { Signal } from '@angular/core'
+import type { WithOptionalInjector } from "./types";
 
 /**
  * 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?: WithOptionalInjector,
 ): 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

@@ -2,22 +2,23 @@ import { DestroyRef, NgZone, inject, signal } from '@angular/core'
 import { QueryClient, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import type { MutationFilters } from '@tanstack/query-core'
-import type { Injector, Signal } from '@angular/core'
+import type { Signal } from '@angular/core'
+import type { WithOptionalInjector } from "./types";
 
 /**
  * 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?: WithOptionalInjector,
 ): 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

@@ -5,13 +5,14 @@ import {
   replaceEqualDeep,
 } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
-import type { Injector, Signal } from '@angular/core'
+import type { Signal } from '@angular/core'
 import type {
   Mutation,
   MutationCache,
   MutationFilters,
   MutationState,
 } from '@tanstack/query-core'
+import type { WithOptionalInjector } from "./types";
 
 type MutationStateOptions<TResult = MutationState> = {
   filters?: MutationFilters
@@ -33,9 +34,7 @@ function getResult<TResult = MutationState>(
 /**
  * @public
  */
-export interface InjectMutationStateOptions {
-  injector?: Injector
-}
+export type InjectMutationStateOptions = WithOptionalInjector
 
 /**
  * Injects a signal that tracks the state of all mutations.

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

@@ -18,15 +18,15 @@ import { assertInjector } from './util/assert-injector/assert-injector'
 import { signalProxy } from './signal-proxy'
 import { noop, shouldThrowError } from './util'
 import type { DefaultError, MutationObserverResult } from '@tanstack/query-core'
-import type { CreateMutateFunction, CreateMutationResult } from './types'
+import type {CreateMutateFunction, CreateMutationResult, WithOptionalInjector} from './types'
 import type { CreateMutationOptions } from './mutation-options'
 
 /**
  * Injects a mutation: an imperative function that can be invoked which typically performs server side effects.
  *
  * Unlike queries, mutations are not run automatically.
  * @param optionsFn - A function that returns mutation options.
- * @param injector - The Angular injector to use.
+ * @param options - Additional configuration
  * @returns The mutation.
  * @public
  */
@@ -37,9 +37,9 @@ export function injectMutation<
   TContext = unknown,
 >(
   optionsFn: () => CreateMutationOptions<TData, TError, TVariables, TContext>,
-  injector?: Injector,
+  options?: WithOptionalInjector,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
-  return assertInjector(injectMutation, injector, () => {
+  return assertInjector(injectMutation, options?.injector, () => {
     const currentInjector = inject(Injector)
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
@@ -104,7 +104,7 @@ export function injectMutation<
         })
       },
       {
-        injector,
+        injector: options?.injector,
       },
     )
 
@@ -136,7 +136,7 @@ export function injectMutation<
         })
       },
       {
-        injector,
+        injector: options?.injector,
       },
     )
 

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

@@ -12,7 +12,7 @@ import {
   signal,
 } from '@angular/core'
 import { assertInjector } from './util/assert-injector/assert-injector'
-import type { Injector, Signal } from '@angular/core'
+import type { Signal } from '@angular/core'
 import type {
   DefaultError,
   OmitKeyof,
@@ -24,6 +24,7 @@ import type {
   QueryObserverResult,
   ThrowOnError,
 } from '@tanstack/query-core'
+import type { WithOptionalInjector } from "./types";
 
 // This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
 // `placeholderData` function does not have a parameter
@@ -196,7 +197,7 @@ export type QueriesResults<
  * @param root0
  * @param root0.queries
  * @param root0.combine
- * @param injector
+ * @param props
  * @public
  */
 export function injectQueries<
@@ -210,9 +211,9 @@ export function injectQueries<
     queries: Signal<[...QueriesOptions<T>]>
     combine?: (result: QueriesResults<T>) => TCombinedResult
   },
-  injector?: Injector,
+  props?: WithOptionalInjector,
 ): Signal<TCombinedResult> {
-  return assertInjector(injectQueries, injector, () => {
+  return assertInjector(injectQueries, props?.injector, () => {
     const destroyRef = inject(DestroyRef)
     const ngZone = inject(NgZone)
     const queryClient = inject(QueryClient)

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

@@ -1,6 +1,7 @@
 import { Injector, inject } from '@angular/core'
 import { QueryClient } from '@tanstack/query-core'
 import type { InjectOptions } from '@angular/core'
+import type { WithOptionalInjector} from "./types";
 
 /**
  * Injects a `QueryClient` instance and allows passing a custom injector.
@@ -17,7 +18,7 @@ import type { InjectOptions } from '@angular/core'
  * ```
  */
 export function injectQueryClient(
-  injectOptions: InjectOptions & { injector?: Injector } = {},
+  injectOptions: InjectOptions & WithOptionalInjector = {},
 ) {
   return (injectOptions.injector ?? inject(Injector)).get(QueryClient)
 }