Enable DI via deps options

Author: arnoud-dv

docs/framework/angular/devtools.md

@@ -81,18 +81,23 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(),
     provideTanStackQuery(
       new QueryClient(),
-      withDevtools(() => ({
-        initialIsOpen: true,
-        loadDevtools: inject(DevtoolsOptionsManager).loadDevtools(),
-      })),
+      withDevtools(
+        (devToolsOptionsManager: DevtoolsOptionsManager) => ({
+          loadDevtools: devToolsOptionsManager.loadDevtools(),
+        }),
+        {
+          // `deps` can be used to pass one or more injectables as parameters to the `withDevtools` callback.
+          deps: [DevtoolsOptionsManager],
+        },
+      ),
     ),
   ],
 }
 ```
 
 ### Options
 
-Of these options `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
+Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosition`, and `initialIsOpen` support reactivity through signals.
 
 - `loadDevtools?: 'auto' | boolean`
   - Defaults to `auto`: lazily loads devtools when in development mode. Skips loading in production mode.

packages/angular-query-experimental/src/devtools-setup.ts

@@ -1,6 +1,6 @@
 import { DestroyRef, computed, effect } from '@angular/core'
 import { QueryClient, onlineManager } from '@tanstack/query-core'
-import type { Injector } from '@angular/core'
+import type { Injector, Signal } from '@angular/core'
 import type { TanstackQueryDevtools } from '@tanstack/query-devtools'
 import type { DevtoolsOptions } from './providers'
 
@@ -10,26 +10,24 @@ declare const ngDevMode: unknown
 // and to minimize bundle size
 export function setupDevtools(
   injector: Injector,
-  withDevtoolsFn?: () => DevtoolsOptions,
+  devtoolsOptions: Signal<DevtoolsOptions>,
 ) {
   const isDevMode = typeof ngDevMode !== 'undefined' && ngDevMode
   const injectedClient = injector.get(QueryClient, {
     optional: true,
   })
   const destroyRef = injector.get(DestroyRef)
 
-  const options = computed(() => withDevtoolsFn?.() ?? {})
-
   let devtools: TanstackQueryDevtools | null = null
   let el: HTMLElement | null = null
 
   const shouldLoadToolsSignal = computed(() => {
-    const { loadDevtools } = options()
+    const { loadDevtools } = devtoolsOptions()
     return typeof loadDevtools === 'boolean' ? loadDevtools : isDevMode
   })
 
   const getResolvedQueryClient = () => {
-    const client = options().client ?? injectedClient
+    const client = devtoolsOptions().client ?? injectedClient
     if (!client) {
       throw new Error('No QueryClient found')
     }
@@ -46,7 +44,7 @@ export function setupDevtools(
     () => {
       const shouldLoadTools = shouldLoadToolsSignal()
       const { client, position, errorTypes, buttonPosition, initialIsOpen } =
-        options()
+        devtoolsOptions()
 
       if (devtools && !shouldLoadTools) {
         destroyDevtools()
@@ -67,7 +65,7 @@ export function setupDevtools(
 
       import('@tanstack/query-devtools').then((queryDevtools) => {
         devtools = new queryDevtools.TanstackQueryDevtools({
-          ...options(),
+          ...devtoolsOptions(),
           client: getResolvedQueryClient(),
           queryFlavor: 'Angular Query',
           version: '5',

packages/angular-query-experimental/src/providers.ts

@@ -1,15 +1,17 @@
 import {
   DestroyRef,
   ENVIRONMENT_INITIALIZER,
+  InjectionToken,
   Injector,
   PLATFORM_ID,
+  computed,
   inject,
   makeEnvironmentProviders,
 } from '@angular/core'
 import { QueryClient } from '@tanstack/query-core'
 import { isPlatformBrowser } from '@angular/common'
 import { noop } from './util'
-import type { EnvironmentProviders, Provider } from '@angular/core'
+import type { EnvironmentProviders, Provider, Signal } from '@angular/core'
 import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
@@ -18,6 +20,13 @@ import type {
 
 declare const ngDevMode: unknown
 
+/**
+ * @internal
+ */
+const DEVTOOLS_OPTIONS_SIGNAL = new InjectionToken<Signal<DevtoolsOptions>>(
+  'devtools options signal',
+)
+
 /**
  * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the
  * {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}
@@ -163,6 +172,36 @@ export type DeveloperToolsFeature =
 export type PersistQueryClientFeature =
   QueryFeature<QueryFeatureKind.PersistQueryClient>
 
+/**
+ * Options for configuring withDevtools.
+ * @public
+ */
+export interface WithDevtoolsOptions {
+  /**
+   * An array of dependencies to be injected and passed to the `withDevtoolsFn` function.
+   *
+   * **Example**
+   * ```ts
+   * export const appConfig: ApplicationConfig = {
+   *   providers: [
+   *     provideTanStackQuery(
+   *       new QueryClient(),
+   *       withDevtools(
+   *         (devToolsOptionsManager: DevtoolsOptionsManager) => ({
+   *           loadDevtools: devToolsOptionsManager.loadDevtools(),
+   *         }),
+   *         {
+   *           deps: [DevtoolsOptionsManager],
+   *         },
+   *       ),
+   *     ),
+   *   ],
+   * }
+   * ```
+   */
+  deps?: Array<any>
+}
+
 /**
  * Options for configuring the TanStack Query devtools.
  * @public
@@ -242,39 +281,47 @@ export interface DevtoolsOptions {
  *
  * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example.
  * @param withDevtoolsFn - A function that returns `DevtoolsOptions`.
+ * @param options - Additional options for configuring `withDevtools`.
  * @returns A set of providers for use with `provideTanStackQuery`.
  * @public
  * @see {@link provideTanStackQuery}
  * @see {@link DevtoolsOptions}
  */
 export function withDevtools(
-  withDevtoolsFn?: () => DevtoolsOptions,
+  withDevtoolsFn?: (...deps: Array<any>) => DevtoolsOptions,
+  options: WithDevtoolsOptions = {},
 ): DeveloperToolsFeature {
+  let providers: Array<Provider> = []
   if (withDevtoolsFn === undefined && typeof ngDevMode === 'undefined') {
-    return queryFeature(QueryFeatureKind.DeveloperTools, [])
+    return queryFeature(QueryFeatureKind.DeveloperTools, providers)
   } else {
-    return createDevtoolsFeature(withDevtoolsFn)
-  }
-}
-
-function createDevtoolsFeature(withDevtoolsFn?: () => DevtoolsOptions) {
-  const providers = [
-    {
-      provide: ENVIRONMENT_INITIALIZER,
-      multi: true,
-      useFactory: () => {
-        if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop
-        let destroyed = false
-        const injector = inject(Injector)
-        inject(DestroyRef).onDestroy(() => (destroyed = true))
+    providers = [
+      {
+        provide: DEVTOOLS_OPTIONS_SIGNAL,
+        useFactory: (...deps: Array<any>) =>
+          computed(() => withDevtoolsFn?.(...deps) ?? {}),
+        deps: options.deps || [],
+      },
+      {
+        // Do not use provideEnvironmentInitializer while Angular < v19 is supported
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (devtoolsOptionsSignal: Signal<DevtoolsOptions>) => {
+          if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop
+          let destroyed = false
+          const injector = inject(Injector)
+          inject(DestroyRef).onDestroy(() => (destroyed = true))
 
-        return () =>
-          import('./devtools-setup').then((module) => {
-            !destroyed && module.setupDevtools(injector, withDevtoolsFn)
-          })
+          return () =>
+            import('./devtools-setup').then((module) => {
+              !destroyed &&
+                module.setupDevtools(injector, devtoolsOptionsSignal)
+            })
+        },
+        deps: [DEVTOOLS_OPTIONS_SIGNAL],
       },
-    },
-  ]
+    ]
+  }
   return queryFeature(QueryFeatureKind.DeveloperTools, providers)
 }