111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
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,
|
|
}
|
|
})
|
|
}
|