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)