snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,110 @@
+import {
+  DestroyRef,
+  Injector,
+  PLATFORM_ID,
+  assertInInjectionContext,
+  computed,
+  effect,
+  inject,
+  runInInjectionContext,
+  untracked,
+} from '@angular/core'
+import { QueryClient, onlineManager } from '@tanstack/query-core'
+import { isPlatformBrowser } from '@angular/common'
+import type { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type {
+  DevtoolsPanelOptions,
+  InjectDevtoolsPanel,
+  InjectDevtoolsPanelOptions,
+} from './types'
+
+/**
+ * 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 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 const injectDevtoolsPanel: InjectDevtoolsPanel = (
+  injectDevtoolsPanelFn: () => DevtoolsPanelOptions,
+  options?: InjectDevtoolsPanelOptions,
+) => {
+  !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 queryOptions = computed(injectDevtoolsPanelFn)
+    let devtools: TanstackQueryDevtoolsPanel | null = null
+
+    const destroy = () => {
+      devtools?.unmount()
+      devtools = null
+    }
+
+    if (!isBrowser)
+      return {
+        destroy,
+      }
+
+    effect(() => {
+      const {
+        client = injectedClient,
+        errorTypes = [],
+        styleNonce,
+        shadowDOMTarget,
+        onClose,
+        hostElement,
+      } = queryOptions()
+
+      untracked(() => {
+        if (!client) throw new Error('No QueryClient found')
+        if (!devtools && hostElement) {
+          import('@tanstack/query-devtools')
+            .then((queryDevtools) => {
+              devtools = new queryDevtools.TanstackQueryDevtoolsPanel({
+                client,
+                queryFlavor: 'Angular Query',
+                version: '5',
+                buttonPosition: 'bottom-left',
+                position: 'bottom',
+                initialIsOpen: true,
+                errorTypes,
+                styleNonce,
+                shadowDOMTarget,
+                onClose,
+                onlineManager,
+              })
+              devtools.mount(hostElement.nativeElement)
+            })
+            .catch((error) => {
+              console.error(
+                'Install @tanstack/query-devtools or reinstall without --omit=optional.',
+                error,
+              )
+            })
+        } else if (devtools && hostElement) {
+          devtools.setClient(client)
+          devtools.setErrorTypes(errorTypes)
+          onClose && devtools.setOnClose(onClose)
+        } else if (devtools && !hostElement) {
+          destroy()
+        }
+      })
+    })
+
+    destroyRef.onDestroy(destroy)
+
+    return {
+      destroy,
+    }
+  })
+}