Skip to content

Commit af5b47b

Browse files
OmerGronichOmerGronich
committed
feat(angular-query): migrate to provideEnvironmentInitializer
1 parent 3f690e4 commit af5b47b

File tree

2 files changed

+101
-113
lines changed

2 files changed

+101
-113
lines changed

‎packages/angular-persist-query-client-experimental/src/with-persist-query-client.ts

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import {
55
} from '@tanstack/angular-query-experimental'
66
import {
77
DestroyRef,
8-
ENVIRONMENT_INITIALIZER,
98
PLATFORM_ID,
109
inject,
10+
provideEnvironmentInitializer,
1111
signal,
1212
} from '@angular/core'
1313
import { isPlatformBrowser } from '@angular/common'
@@ -60,35 +60,31 @@ export function withPersistQueryClient(
6060
const isRestoring = signal(false)
6161
const providers = [
6262
provideIsRestoring(isRestoring.asReadonly()),
63-
{
64-
provide: ENVIRONMENT_INITIALIZER,
65-
multi: true,
66-
useValue: () => {
67-
if (!isPlatformBrowser(inject(PLATFORM_ID))) return
68-
const destroyRef = inject(DestroyRef)
69-
const queryClient = injectQueryClient()
63+
provideEnvironmentInitializer(() => {
64+
if (!isPlatformBrowser(inject(PLATFORM_ID))) return
65+
const destroyRef = inject(DestroyRef)
66+
const queryClient = injectQueryClient()
7067

71-
isRestoring.set(true)
72-
const restorations = persistQueryClientOptions.map(
73-
({ onSuccess, persistOptions }) => {
74-
const options = { queryClient, ...persistOptions }
75-
return persistQueryClientRestore(options).then(async () => {
76-
try {
77-
if (onSuccess) {
78-
await onSuccess()
79-
}
80-
} finally {
81-
const cleanup = persistQueryClientSubscribe(options)
82-
destroyRef.onDestroy(cleanup)
68+
isRestoring.set(true)
69+
const restorations = persistQueryClientOptions.map(
70+
({ onSuccess, persistOptions }) => {
71+
const options = { queryClient, ...persistOptions }
72+
return persistQueryClientRestore(options).then(async () => {
73+
try {
74+
if (onSuccess) {
75+
await onSuccess()
8376
}
84-
})
85-
},
86-
)
87-
Promise.all(restorations).finally(() => {
88-
isRestoring.set(false)
89-
})
90-
},
91-
},
77+
} finally {
78+
const cleanup = persistQueryClientSubscribe(options)
79+
destroyRef.onDestroy(cleanup)
80+
}
81+
})
82+
},
83+
)
84+
Promise.all(restorations).finally(() => {
85+
isRestoring.set(false)
86+
})
87+
}),
9288
]
9389
return queryFeature('PersistQueryClient', providers)
9490
}

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

Lines changed: 77 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {
22
DestroyRef,
3-
ENVIRONMENT_INITIALIZER,
43
Injector,
54
PLATFORM_ID,
65
computed,
76
effect,
87
inject,
98
makeEnvironmentProviders,
9+
provideEnvironmentInitializer,
1010
runInInjectionContext,
1111
} from '@angular/core'
1212
import { QueryClient, onlineManager } from '@tanstack/query-core'
@@ -21,6 +21,8 @@ import type {
2121
TanstackQueryDevtools,
2222
} from '@tanstack/query-devtools'
2323

24+
type Providers = Provider | EnvironmentProviders
25+
2426
/**
2527
* Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the
2628
* {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}
@@ -98,15 +100,11 @@ export function provideTanStackQuery(
98100
): EnvironmentProviders {
99101
return makeEnvironmentProviders([
100102
provideQueryClient(queryClient),
101-
{
102-
provide: ENVIRONMENT_INITIALIZER,
103-
multi: true,
104-
useValue: () => {
105-
queryClient.mount()
106-
// Unmount the query client on application destroy
107-
inject(DestroyRef).onDestroy(() => queryClient.unmount())
108-
},
109-
},
103+
provideEnvironmentInitializer(() => {
104+
queryClient.mount()
105+
// Unmount the query client on application destroy
106+
inject(DestroyRef).onDestroy(() => queryClient.unmount())
107+
}),
110108
features.map((feature) => feature.ɵproviders),
111109
])
112110
}
@@ -132,7 +130,7 @@ export function provideAngularQuery(
132130
*/
133131
export interface QueryFeature<TFeatureKind extends QueryFeatureKind> {
134132
ɵkind: TFeatureKind
135-
ɵproviders: Array<Provider>
133+
ɵproviders: Providers
136134
}
137135

138136
/**
@@ -143,7 +141,7 @@ export interface QueryFeature<TFeatureKind extends QueryFeatureKind> {
143141
*/
144142
export function queryFeature<TFeatureKind extends QueryFeatureKind>(
145143
kind: TFeatureKind,
146-
providers: Array<Provider>,
144+
providers: Providers,
147145
): QueryFeature<TFeatureKind> {
148146
return { ɵkind: kind, ɵproviders: providers }
149147
}
@@ -250,95 +248,89 @@ export interface DevtoolsOptions {
250248
export function withDevtools(
251249
optionsFn?: () => DevtoolsOptions,
252250
): DeveloperToolsFeature {
253-
let providers: Array<Provider> = []
251+
let providers: Providers = []
254252
if (!isDevMode() && !optionsFn) {
255253
providers = []
256254
} else {
257255
providers = [
258-
{
259-
provide: ENVIRONMENT_INITIALIZER,
260-
multi: true,
261-
useFactory: () => {
262-
if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop
263-
const injector = inject(Injector)
264-
const options = computed(() =>
265-
runInInjectionContext(injector, () => optionsFn?.() ?? {}),
266-
)
256+
provideEnvironmentInitializer(() => {
257+
if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop
258+
const injector = inject(Injector)
259+
const options = computed(() =>
260+
runInInjectionContext(injector, () => optionsFn?.() ?? {}),
261+
)
267262

268-
let devtools: TanstackQueryDevtools | null = null
269-
let el: HTMLElement | null = null
263+
let devtools: TanstackQueryDevtools | null = null
264+
let el: HTMLElement | null = null
270265

271-
const shouldLoadToolsSignal = computed(() => {
272-
const { loadDevtools } = options()
273-
return typeof loadDevtools === 'boolean'
274-
? loadDevtools
275-
: isDevMode()
276-
})
266+
const shouldLoadToolsSignal = computed(() => {
267+
const { loadDevtools } = options()
268+
return typeof loadDevtools === 'boolean' ? loadDevtools : isDevMode()
269+
})
277270

278-
const destroyRef = inject(DestroyRef)
271+
const destroyRef = inject(DestroyRef)
279272

280-
const getResolvedQueryClient = () => {
281-
const injectedClient = injector.get(QueryClient, null)
282-
const client = options().client ?? injectedClient
283-
if (!client) {
284-
throw new Error('No QueryClient found')
285-
}
286-
return client
273+
const getResolvedQueryClient = () => {
274+
const injectedClient = injector.get(QueryClient, null)
275+
const client = options().client ?? injectedClient
276+
if (!client) {
277+
throw new Error('No QueryClient found')
287278
}
279+
return client
280+
}
288281

289-
const destroyDevtools = () => {
290-
devtools?.unmount()
291-
el?.remove()
292-
devtools = null
293-
}
282+
const destroyDevtools = () => {
283+
devtools?.unmount()
284+
el?.remove()
285+
devtools = null
286+
}
294287

295-
return () =>
296-
effect(() => {
297-
const shouldLoadTools = shouldLoadToolsSignal()
298-
const {
299-
client,
300-
position,
301-
errorTypes,
302-
buttonPosition,
303-
initialIsOpen,
304-
} = options()
288+
return () =>
289+
effect(() => {
290+
const shouldLoadTools = shouldLoadToolsSignal()
291+
const {
292+
client,
293+
position,
294+
errorTypes,
295+
buttonPosition,
296+
initialIsOpen,
297+
} = options()
305298

306-
if (devtools && !shouldLoadTools) {
307-
destroyDevtools()
308-
return
309-
} else if (devtools && shouldLoadTools) {
310-
client && devtools.setClient(client)
311-
position && devtools.setPosition(position)
312-
errorTypes && devtools.setErrorTypes(errorTypes)
313-
buttonPosition && devtools.setButtonPosition(buttonPosition)
314-
initialIsOpen && devtools.setInitialIsOpen(initialIsOpen)
315-
return
316-
} else if (!shouldLoadTools) {
317-
return
318-
}
299+
if (devtools && !shouldLoadTools) {
300+
destroyDevtools()
301+
return
302+
} else if (devtools && shouldLoadTools) {
303+
client && devtools.setClient(client)
304+
position && devtools.setPosition(position)
305+
errorTypes && devtools.setErrorTypes(errorTypes)
306+
buttonPosition && devtools.setButtonPosition(buttonPosition)
307+
initialIsOpen && devtools.setInitialIsOpen(initialIsOpen)
308+
return
309+
} else if (!shouldLoadTools) {
310+
return
311+
}
319312

320-
el = document.body.appendChild(document.createElement('div'))
321-
el.classList.add('tsqd-parent-container')
313+
el = document.body.appendChild(document.createElement('div'))
314+
el.classList.add('tsqd-parent-container')
322315

323-
import('@tanstack/query-devtools').then((queryDevtools) =>
324-
runInInjectionContext(injector, () => {
325-
devtools = new queryDevtools.TanstackQueryDevtools({
326-
...options(),
327-
client: getResolvedQueryClient(),
328-
queryFlavor: 'Angular Query',
329-
version: '5',
330-
onlineManager,
331-
})
316+
import('@tanstack/query-devtools').then((queryDevtools) =>
317+
runInInjectionContext(injector, () => {
318+
devtools = new queryDevtools.TanstackQueryDevtools({
319+
...options(),
320+
client: getResolvedQueryClient(),
321+
queryFlavor: 'Angular Query',
322+
version: '5',
323+
onlineManager,
324+
})
332325

333-
el && devtools.mount(el)
326+
el && devtools.mount(el)
334327

335-
// Unmount the devtools on application destroy
336-
destroyRef.onDestroy(destroyDevtools)
337-
}),
338-
)
339-
})
340-
},
341-
},
328+
// Unmount the devtools on application destroy
329+
destroyRef.onDestroy(destroyDevtools)
330+
}),
331+
)
332+
})
333+
}),
342334
]
343335
}
344336
return queryFeature('DeveloperTools', providers)

0 commit comments

Comments
 (0)