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

@@ -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

@@ -15,6 +15,7 @@ import {
   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 +27,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 +65,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

@@ -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,
@@ -12,6 +11,7 @@ import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
   DefinedCreateInfiniteQueryResult,
+  WithOptionalInjector,
 } from './types'
 import type {
   DefinedInitialDataInfiniteOptions,
@@ -22,7 +22,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 +40,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 +65,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 +91,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,19 @@ 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 +41,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 +108,7 @@ export function injectMutation<
         })
       },
       {
-        injector,
+        injector: options?.injector,
       },
     )
 
@@ -136,7 +140,7 @@ export function injectMutation<
         })
       },
       {
-        injector,
+        injector: options?.injector,
       },
     )
 

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

@@ -12,7 +12,7 @@
   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 @@
   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 @@
  * @param root0
  * @param root0.queries
  * @param root0.combine
- * @param injector
+ * @param props
  * @public
  */
 export function injectQueries<
@@ -210,9 +211,9 @@
     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 @@
  * ```
  */
 export function injectQueryClient(
-  injectOptions: InjectOptions & { injector?: Injector } = {},
+  injectOptions: InjectOptions & WithOptionalInjector = {},
 ) {
   return (injectOptions.injector ?? inject(Injector)).get(QueryClient)
 }