From af5b47b31511dd2db180abfd92f08541f29532d4 Mon Sep 17 00:00:00 2001 From: omergronich Date: Fri, 29 Nov 2024 12:46:23 +0200 Subject: [PATCH] feat(angular-query): migrate to provideEnvironmentInitializer --- .../src/with-persist-query-client.ts | 52 +++--- .../src/providers.ts | 162 +++++++++--------- 2 files changed, 101 insertions(+), 113 deletions(-) diff --git a/packages/angular-persist-query-client-experimental/src/with-persist-query-client.ts b/packages/angular-persist-query-client-experimental/src/with-persist-query-client.ts index cee649cdd63..ef55b3c1095 100644 --- a/packages/angular-persist-query-client-experimental/src/with-persist-query-client.ts +++ b/packages/angular-persist-query-client-experimental/src/with-persist-query-client.ts @@ -5,9 +5,9 @@ import { } from '@tanstack/angular-query-experimental' import { DestroyRef, - ENVIRONMENT_INITIALIZER, PLATFORM_ID, inject, + provideEnvironmentInitializer, signal, } from '@angular/core' import { isPlatformBrowser } from '@angular/common' @@ -60,35 +60,31 @@ export function withPersistQueryClient( const isRestoring = signal(false) const providers = [ provideIsRestoring(isRestoring.asReadonly()), - { - provide: ENVIRONMENT_INITIALIZER, - multi: true, - useValue: () => { - if (!isPlatformBrowser(inject(PLATFORM_ID))) return - const destroyRef = inject(DestroyRef) - const queryClient = injectQueryClient() + provideEnvironmentInitializer(() => { + if (!isPlatformBrowser(inject(PLATFORM_ID))) return + const destroyRef = inject(DestroyRef) + const queryClient = injectQueryClient() - isRestoring.set(true) - const restorations = persistQueryClientOptions.map( - ({ onSuccess, persistOptions }) => { - const options = { queryClient, ...persistOptions } - return persistQueryClientRestore(options).then(async () => { - try { - if (onSuccess) { - await onSuccess() - } - } finally { - const cleanup = persistQueryClientSubscribe(options) - destroyRef.onDestroy(cleanup) + isRestoring.set(true) + const restorations = persistQueryClientOptions.map( + ({ onSuccess, persistOptions }) => { + const options = { queryClient, ...persistOptions } + return persistQueryClientRestore(options).then(async () => { + try { + if (onSuccess) { + await onSuccess() } - }) - }, - ) - Promise.all(restorations).finally(() => { - isRestoring.set(false) - }) - }, - }, + } finally { + const cleanup = persistQueryClientSubscribe(options) + destroyRef.onDestroy(cleanup) + } + }) + }, + ) + Promise.all(restorations).finally(() => { + isRestoring.set(false) + }) + }), ] return queryFeature('PersistQueryClient', providers) } diff --git a/packages/angular-query-experimental/src/providers.ts b/packages/angular-query-experimental/src/providers.ts index 50fffaff2d8..dc02533143a 100644 --- a/packages/angular-query-experimental/src/providers.ts +++ b/packages/angular-query-experimental/src/providers.ts @@ -1,12 +1,12 @@ import { DestroyRef, - ENVIRONMENT_INITIALIZER, Injector, PLATFORM_ID, computed, effect, inject, makeEnvironmentProviders, + provideEnvironmentInitializer, runInInjectionContext, } from '@angular/core' import { QueryClient, onlineManager } from '@tanstack/query-core' @@ -21,6 +21,8 @@ import type { TanstackQueryDevtools, } from '@tanstack/query-devtools' +type Providers = Provider | EnvironmentProviders + /** * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the * {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient} @@ -98,15 +100,11 @@ export function provideTanStackQuery( ): EnvironmentProviders { return makeEnvironmentProviders([ provideQueryClient(queryClient), - { - provide: ENVIRONMENT_INITIALIZER, - multi: true, - useValue: () => { - queryClient.mount() - // Unmount the query client on application destroy - inject(DestroyRef).onDestroy(() => queryClient.unmount()) - }, - }, + provideEnvironmentInitializer(() => { + queryClient.mount() + // Unmount the query client on application destroy + inject(DestroyRef).onDestroy(() => queryClient.unmount()) + }), features.map((feature) => feature.ɵproviders), ]) } @@ -132,7 +130,7 @@ export function provideAngularQuery( */ export interface QueryFeature { ɵkind: TFeatureKind - ɵproviders: Array + ɵproviders: Providers } /** @@ -143,7 +141,7 @@ export interface QueryFeature { */ export function queryFeature( kind: TFeatureKind, - providers: Array, + providers: Providers, ): QueryFeature { return { ɵkind: kind, ɵproviders: providers } } @@ -250,95 +248,89 @@ export interface DevtoolsOptions { export function withDevtools( optionsFn?: () => DevtoolsOptions, ): DeveloperToolsFeature { - let providers: Array = [] + let providers: Providers = [] if (!isDevMode() && !optionsFn) { providers = [] } else { providers = [ - { - provide: ENVIRONMENT_INITIALIZER, - multi: true, - useFactory: () => { - if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop - const injector = inject(Injector) - const options = computed(() => - runInInjectionContext(injector, () => optionsFn?.() ?? {}), - ) + provideEnvironmentInitializer(() => { + if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop + const injector = inject(Injector) + const options = computed(() => + runInInjectionContext(injector, () => optionsFn?.() ?? {}), + ) - let devtools: TanstackQueryDevtools | null = null - let el: HTMLElement | null = null + let devtools: TanstackQueryDevtools | null = null + let el: HTMLElement | null = null - const shouldLoadToolsSignal = computed(() => { - const { loadDevtools } = options() - return typeof loadDevtools === 'boolean' - ? loadDevtools - : isDevMode() - }) + const shouldLoadToolsSignal = computed(() => { + const { loadDevtools } = options() + return typeof loadDevtools === 'boolean' ? loadDevtools : isDevMode() + }) - const destroyRef = inject(DestroyRef) + const destroyRef = inject(DestroyRef) - const getResolvedQueryClient = () => { - const injectedClient = injector.get(QueryClient, null) - const client = options().client ?? injectedClient - if (!client) { - throw new Error('No QueryClient found') - } - return client + const getResolvedQueryClient = () => { + const injectedClient = injector.get(QueryClient, null) + const client = options().client ?? injectedClient + if (!client) { + throw new Error('No QueryClient found') } + return client + } - const destroyDevtools = () => { - devtools?.unmount() - el?.remove() - devtools = null - } + const destroyDevtools = () => { + devtools?.unmount() + el?.remove() + devtools = null + } - return () => - effect(() => { - const shouldLoadTools = shouldLoadToolsSignal() - const { - client, - position, - errorTypes, - buttonPosition, - initialIsOpen, - } = options() + return () => + effect(() => { + const shouldLoadTools = shouldLoadToolsSignal() + const { + client, + position, + errorTypes, + buttonPosition, + initialIsOpen, + } = options() - if (devtools && !shouldLoadTools) { - destroyDevtools() - return - } else if (devtools && shouldLoadTools) { - client && devtools.setClient(client) - position && devtools.setPosition(position) - errorTypes && devtools.setErrorTypes(errorTypes) - buttonPosition && devtools.setButtonPosition(buttonPosition) - initialIsOpen && devtools.setInitialIsOpen(initialIsOpen) - return - } else if (!shouldLoadTools) { - return - } + if (devtools && !shouldLoadTools) { + destroyDevtools() + return + } else if (devtools && shouldLoadTools) { + client && devtools.setClient(client) + position && devtools.setPosition(position) + errorTypes && devtools.setErrorTypes(errorTypes) + buttonPosition && devtools.setButtonPosition(buttonPosition) + initialIsOpen && devtools.setInitialIsOpen(initialIsOpen) + return + } else if (!shouldLoadTools) { + return + } - el = document.body.appendChild(document.createElement('div')) - el.classList.add('tsqd-parent-container') + el = document.body.appendChild(document.createElement('div')) + el.classList.add('tsqd-parent-container') - import('@tanstack/query-devtools').then((queryDevtools) => - runInInjectionContext(injector, () => { - devtools = new queryDevtools.TanstackQueryDevtools({ - ...options(), - client: getResolvedQueryClient(), - queryFlavor: 'Angular Query', - version: '5', - onlineManager, - }) + import('@tanstack/query-devtools').then((queryDevtools) => + runInInjectionContext(injector, () => { + devtools = new queryDevtools.TanstackQueryDevtools({ + ...options(), + client: getResolvedQueryClient(), + queryFlavor: 'Angular Query', + version: '5', + onlineManager, + }) - el && devtools.mount(el) + el && devtools.mount(el) - // Unmount the devtools on application destroy - destroyRef.onDestroy(destroyDevtools) - }), - ) - }) - }, - }, + // Unmount the devtools on application destroy + destroyRef.onDestroy(destroyDevtools) + }), + ) + }) + }), ] } return queryFeature('DeveloperTools', providers)