@tanstack/angular-query-experimental 5.80.7 → 5.80.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/create-base-query.mjs +74 -0
  2. package/dist/create-base-query.mjs.map +1 -0
  3. package/dist/index.mjs +35 -0
  4. package/dist/index.mjs.map +1 -0
  5. package/dist/infinite-query-options.mjs +7 -0
  6. package/dist/infinite-query-options.mjs.map +1 -0
  7. package/dist/inject-infinite-query.mjs +18 -0
  8. package/dist/inject-infinite-query.mjs.map +1 -0
  9. package/dist/inject-is-fetching.mjs +31 -0
  10. package/dist/inject-is-fetching.mjs.map +1 -0
  11. package/dist/inject-is-mutating.mjs +31 -0
  12. package/dist/inject-is-mutating.mjs.map +1 -0
  13. package/dist/inject-is-restoring.mjs +24 -0
  14. package/dist/inject-is-restoring.mjs.map +1 -0
  15. package/dist/inject-mutation-state.mjs +51 -0
  16. package/dist/inject-mutation-state.mjs.map +1 -0
  17. package/dist/inject-mutation.mjs +79 -0
  18. package/dist/inject-mutation.mjs.map +1 -0
  19. package/dist/inject-queries.mjs +49 -0
  20. package/dist/inject-queries.mjs.map +1 -0
  21. package/dist/inject-query-client.mjs +9 -0
  22. package/dist/inject-query-client.mjs.map +1 -0
  23. package/dist/inject-query.mjs +14 -0
  24. package/dist/inject-query.mjs.map +1 -0
  25. package/dist/mutation-options.mjs +7 -0
  26. package/dist/mutation-options.mjs.map +1 -0
  27. package/dist/providers.mjs +109 -0
  28. package/dist/providers.mjs.map +1 -0
  29. package/dist/query-options.mjs +7 -0
  30. package/dist/query-options.mjs.map +1 -0
  31. package/dist/signal-proxy.mjs +29 -0
  32. package/dist/signal-proxy.mjs.map +1 -0
  33. package/dist-ts/eslint.config.d.ts +3 -0
  34. package/dist-ts/root.eslint.config.d.ts +3 -0
  35. package/dist-ts/src/__tests__/inject-infinite-query.test-d.d.ts +2 -0
  36. package/dist-ts/src/__tests__/inject-infinite-query.test.d.ts +2 -0
  37. package/dist-ts/src/__tests__/inject-is-fetching.test.d.ts +2 -0
  38. package/dist-ts/src/__tests__/inject-is-mutating.test.d.ts +2 -0
  39. package/dist-ts/src/__tests__/inject-mutation-state.test-d.d.ts +2 -0
  40. package/dist-ts/src/__tests__/inject-mutation-state.test.d.ts +2 -0
  41. package/dist-ts/src/__tests__/inject-mutation.test-d.d.ts +2 -0
  42. package/dist-ts/src/__tests__/inject-mutation.test.d.ts +2 -0
  43. package/dist-ts/src/__tests__/inject-query.test-d.d.ts +2 -0
  44. package/dist-ts/src/__tests__/inject-query.test.d.ts +2 -0
  45. package/dist-ts/src/__tests__/mutation-options.test-d.d.ts +2 -0
  46. package/dist-ts/src/__tests__/provide-query-client.test.d.ts +2 -0
  47. package/dist-ts/src/__tests__/provide-tanstack-query.test.d.ts +2 -0
  48. package/dist-ts/src/__tests__/providers.test.d.ts +2 -0
  49. package/dist-ts/src/__tests__/query-options.test-d.d.ts +2 -0
  50. package/dist-ts/src/__tests__/signal-proxy.test.d.ts +2 -0
  51. package/dist-ts/src/__tests__/test-utils.d.ts +16 -0
  52. package/dist-ts/src/create-base-query.d.ts +9 -0
  53. package/dist-ts/src/index.d.ts +27 -0
  54. package/dist-ts/src/infinite-query-options.d.ts +45 -0
  55. package/dist-ts/src/inject-infinite-query.d.ts +40 -0
  56. package/dist-ts/src/inject-is-fetching.d.ts +23 -0
  57. package/dist-ts/src/inject-is-mutating.d.ts +22 -0
  58. package/{src/inject-is-restoring.ts → dist-ts/src/inject-is-restoring.d.ts} +7 -33
  59. package/dist-ts/src/inject-mutation-state.d.ts +28 -0
  60. package/dist-ts/src/inject-mutation.d.ts +23 -0
  61. package/dist-ts/src/inject-queries.d.ts +78 -0
  62. package/{src/inject-query-client.ts → dist-ts/src/inject-query-client.d.ts} +7 -9
  63. package/{src/inject-query.ts → dist-ts/src/inject-query.d.ts} +14 -117
  64. package/{src/mutation-options.ts → dist-ts/src/mutation-options.d.ts} +5 -26
  65. package/dist-ts/src/providers.d.ts +217 -0
  66. package/dist-ts/src/query-options.d.ts +88 -0
  67. package/dist-ts/src/signal-proxy.d.ts +12 -0
  68. package/dist-ts/src/test-setup.d.ts +2 -0
  69. package/dist-ts/src/types.d.ts +90 -0
  70. package/dist-ts/src/util/is-dev-mode/is-dev-mode.d.ts +2 -0
  71. package/dist-ts/vite.config.d.ts +5 -0
  72. package/package.json +13 -11
  73. package/build/index.d.ts +0 -821
  74. package/build/index.mjs +0 -622
  75. package/build/index.mjs.map +0 -1
  76. package/src/create-base-query.ts +0 -142
  77. package/src/index.ts +0 -64
  78. package/src/infinite-query-options.ts +0 -187
  79. package/src/inject-infinite-query.ts +0 -129
  80. package/src/inject-is-fetching.ts +0 -66
  81. package/src/inject-is-mutating.ts +0 -65
  82. package/src/inject-mutation-state.ts +0 -125
  83. package/src/inject-mutation.ts +0 -169
  84. package/src/inject-queries.ts +0 -271
  85. package/src/providers.ts +0 -368
  86. package/src/query-options.ts +0 -178
  87. package/src/signal-proxy.ts +0 -46
  88. package/src/test-setup.ts +0 -10
  89. package/src/types.ts +0 -309
  90. package/src/util/is-dev-mode/is-dev-mode.ts +0 -3
@@ -1,271 +0,0 @@
1
- import {
2
- QueriesObserver,
3
- QueryClient,
4
- notifyManager,
5
- } from '@tanstack/query-core'
6
- import {
7
- DestroyRef,
8
- Injector,
9
- NgZone,
10
- assertInInjectionContext,
11
- computed,
12
- effect,
13
- inject,
14
- runInInjectionContext,
15
- signal,
16
- } from '@angular/core'
17
- import { injectIsRestoring } from './inject-is-restoring'
18
- import type { Signal } from '@angular/core'
19
- import type {
20
- DefaultError,
21
- OmitKeyof,
22
- QueriesObserverOptions,
23
- QueriesPlaceholderDataFunction,
24
- QueryFunction,
25
- QueryKey,
26
- QueryObserverOptions,
27
- QueryObserverResult,
28
- ThrowOnError,
29
- } from '@tanstack/query-core'
30
-
31
- // This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
32
- // `placeholderData` function does not have a parameter
33
- type QueryObserverOptionsForCreateQueries<
34
- TQueryFnData = unknown,
35
- TError = DefaultError,
36
- TData = TQueryFnData,
37
- TQueryKey extends QueryKey = QueryKey,
38
- > = OmitKeyof<
39
- QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
40
- 'placeholderData'
41
- > & {
42
- placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>
43
- }
44
-
45
- // Avoid TS depth-limit error in case of large array literal
46
- type MAXIMUM_DEPTH = 20
47
-
48
- // Widen the type of the symbol to enable type inference even if skipToken is not immutable.
49
- type SkipTokenForUseQueries = symbol
50
-
51
- type GetOptions<T> =
52
- // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }
53
- T extends {
54
- queryFnData: infer TQueryFnData
55
- error?: infer TError
56
- data: infer TData
57
- }
58
- ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>
59
- : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
60
- ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>
61
- : T extends { data: infer TData; error?: infer TError }
62
- ? QueryObserverOptionsForCreateQueries<unknown, TError, TData>
63
- : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]
64
- T extends [infer TQueryFnData, infer TError, infer TData]
65
- ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>
66
- : T extends [infer TQueryFnData, infer TError]
67
- ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>
68
- : T extends [infer TQueryFnData]
69
- ? QueryObserverOptionsForCreateQueries<TQueryFnData>
70
- : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
71
- T extends {
72
- queryFn?:
73
- | QueryFunction<infer TQueryFnData, infer TQueryKey>
74
- | SkipTokenForUseQueries
75
- select: (data: any) => infer TData
76
- throwOnError?: ThrowOnError<any, infer TError, any, any>
77
- }
78
- ? QueryObserverOptionsForCreateQueries<
79
- TQueryFnData,
80
- unknown extends TError ? DefaultError : TError,
81
- unknown extends TData ? TQueryFnData : TData,
82
- TQueryKey
83
- >
84
- : // Fallback
85
- QueryObserverOptionsForCreateQueries
86
-
87
- type GetResults<T> =
88
- // Part 1: responsible for mapping explicit type parameter to function result, if object
89
- T extends { queryFnData: any; error?: infer TError; data: infer TData }
90
- ? QueryObserverResult<TData, TError>
91
- : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
92
- ? QueryObserverResult<TQueryFnData, TError>
93
- : T extends { data: infer TData; error?: infer TError }
94
- ? QueryObserverResult<TData, TError>
95
- : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
96
- T extends [any, infer TError, infer TData]
97
- ? QueryObserverResult<TData, TError>
98
- : T extends [infer TQueryFnData, infer TError]
99
- ? QueryObserverResult<TQueryFnData, TError>
100
- : T extends [infer TQueryFnData]
101
- ? QueryObserverResult<TQueryFnData>
102
- : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
103
- T extends {
104
- queryFn?:
105
- | QueryFunction<infer TQueryFnData, any>
106
- | SkipTokenForUseQueries
107
- select: (data: any) => infer TData
108
- throwOnError?: ThrowOnError<any, infer TError, any, any>
109
- }
110
- ? QueryObserverResult<
111
- unknown extends TData ? TQueryFnData : TData,
112
- unknown extends TError ? DefaultError : TError
113
- >
114
- : // Fallback
115
- QueryObserverResult
116
-
117
- /**
118
- * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
119
- * @public
120
- */
121
- export type QueriesOptions<
122
- T extends Array<any>,
123
- TResult extends Array<any> = [],
124
- TDepth extends ReadonlyArray<number> = [],
125
- > = TDepth['length'] extends MAXIMUM_DEPTH
126
- ? Array<QueryObserverOptionsForCreateQueries>
127
- : T extends []
128
- ? []
129
- : T extends [infer Head]
130
- ? [...TResult, GetOptions<Head>]
131
- : T extends [infer Head, ...infer Tail]
132
- ? QueriesOptions<
133
- [...Tail],
134
- [...TResult, GetOptions<Head>],
135
- [...TDepth, 1]
136
- >
137
- : ReadonlyArray<unknown> extends T
138
- ? T
139
- : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
140
- // use this to infer the param types in the case of Array.map() argument
141
- T extends Array<
142
- QueryObserverOptionsForCreateQueries<
143
- infer TQueryFnData,
144
- infer TError,
145
- infer TData,
146
- infer TQueryKey
147
- >
148
- >
149
- ? Array<
150
- QueryObserverOptionsForCreateQueries<
151
- TQueryFnData,
152
- TError,
153
- TData,
154
- TQueryKey
155
- >
156
- >
157
- : // Fallback
158
- Array<QueryObserverOptionsForCreateQueries>
159
-
160
- /**
161
- * QueriesResults reducer recursively maps type param to results
162
- * @public
163
- */
164
- export type QueriesResults<
165
- T extends Array<any>,
166
- TResult extends Array<any> = [],
167
- TDepth extends ReadonlyArray<number> = [],
168
- > = TDepth['length'] extends MAXIMUM_DEPTH
169
- ? Array<QueryObserverResult>
170
- : T extends []
171
- ? []
172
- : T extends [infer Head]
173
- ? [...TResult, GetResults<Head>]
174
- : T extends [infer Head, ...infer Tail]
175
- ? QueriesResults<
176
- [...Tail],
177
- [...TResult, GetResults<Head>],
178
- [...TDepth, 1]
179
- >
180
- : T extends Array<
181
- QueryObserverOptionsForCreateQueries<
182
- infer TQueryFnData,
183
- infer TError,
184
- infer TData,
185
- any
186
- >
187
- >
188
- ? // Dynamic-size (homogenous) CreateQueryOptions array: map directly to array of results
189
- Array<
190
- QueryObserverResult<
191
- unknown extends TData ? TQueryFnData : TData,
192
- unknown extends TError ? DefaultError : TError
193
- >
194
- >
195
- : // Fallback
196
- Array<QueryObserverResult>
197
-
198
- /**
199
- * @param root0
200
- * @param root0.queries
201
- * @param root0.combine
202
- * @param injector
203
- * @param injector
204
- * @public
205
- */
206
- export function injectQueries<
207
- T extends Array<any>,
208
- TCombinedResult = QueriesResults<T>,
209
- >(
210
- {
211
- queries,
212
- ...options
213
- }: {
214
- queries: Signal<[...QueriesOptions<T>]>
215
- combine?: (result: QueriesResults<T>) => TCombinedResult
216
- },
217
- injector?: Injector,
218
- ): Signal<TCombinedResult> {
219
- !injector && assertInInjectionContext(injectQueries)
220
- return runInInjectionContext(injector ?? inject(Injector), () => {
221
- const destroyRef = inject(DestroyRef)
222
- const ngZone = inject(NgZone)
223
- const queryClient = inject(QueryClient)
224
- const isRestoring = injectIsRestoring()
225
-
226
- const defaultedQueries = computed(() => {
227
- return queries().map((opts) => {
228
- const defaultedOptions = queryClient.defaultQueryOptions(opts)
229
- // Make sure the results are already in fetching state before subscribing or updating options
230
- defaultedOptions._optimisticResults = isRestoring()
231
- ? 'isRestoring'
232
- : 'optimistic'
233
-
234
- return defaultedOptions as QueryObserverOptions
235
- })
236
- })
237
-
238
- const observer = new QueriesObserver<TCombinedResult>(
239
- queryClient,
240
- defaultedQueries(),
241
- options as QueriesObserverOptions<TCombinedResult>,
242
- )
243
-
244
- // Do not notify on updates because of changes in the options because
245
- // these changes should already be reflected in the optimistic result.
246
- effect(() => {
247
- observer.setQueries(
248
- defaultedQueries(),
249
- options as QueriesObserverOptions<TCombinedResult>,
250
- )
251
- })
252
-
253
- const [, getCombinedResult] = observer.getOptimisticResult(
254
- defaultedQueries(),
255
- (options as QueriesObserverOptions<TCombinedResult>).combine,
256
- )
257
-
258
- const result = signal(getCombinedResult() as any)
259
-
260
- effect(() => {
261
- const unsubscribe = isRestoring()
262
- ? () => undefined
263
- : ngZone.runOutsideAngular(() =>
264
- observer.subscribe(notifyManager.batchCalls(result.set)),
265
- )
266
- destroyRef.onDestroy(unsubscribe)
267
- })
268
-
269
- return result
270
- })
271
- }
package/src/providers.ts DELETED
@@ -1,368 +0,0 @@
1
- import {
2
- DestroyRef,
3
- ENVIRONMENT_INITIALIZER,
4
- InjectionToken,
5
- PLATFORM_ID,
6
- computed,
7
- effect,
8
- inject,
9
- } from '@angular/core'
10
- import { QueryClient, noop, onlineManager } from '@tanstack/query-core'
11
- import { isPlatformBrowser } from '@angular/common'
12
- import { isDevMode } from './util/is-dev-mode/is-dev-mode'
13
- import type { Provider } from '@angular/core'
14
- import type {
15
- DevtoolsButtonPosition,
16
- DevtoolsErrorType,
17
- DevtoolsPosition,
18
- TanstackQueryDevtools,
19
- } from '@tanstack/query-devtools'
20
-
21
- /**
22
- * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the
23
- * {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}
24
- * for the entire application. Internally it calls `provideQueryClient`.
25
- * You can use `provideQueryClient` to provide a different `QueryClient` instance for a part
26
- * of the application or for unit testing purposes.
27
- * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.
28
- * @returns a provider object that can be used to provide the `QueryClient` instance.
29
- */
30
- export function provideQueryClient(
31
- queryClient: QueryClient | InjectionToken<QueryClient>,
32
- ): Provider {
33
- return {
34
- provide: QueryClient,
35
- useFactory: () => {
36
- const client =
37
- queryClient instanceof InjectionToken
38
- ? inject(queryClient)
39
- : queryClient
40
- // Unmount the query client on injector destroy
41
- inject(DestroyRef).onDestroy(() => client.unmount())
42
- client.mount()
43
- return client
44
- },
45
- }
46
- }
47
-
48
- /**
49
- * Sets up providers necessary to enable TanStack Query functionality for Angular applications.
50
- *
51
- * Allows to configure a `QueryClient` and optional features such as developer tools.
52
- *
53
- * **Example - standalone**
54
- *
55
- * ```ts
56
- * import {
57
- * provideTanStackQuery,
58
- * QueryClient,
59
- * } from '@tanstack/angular-query-experimental'
60
- *
61
- * bootstrapApplication(AppComponent, {
62
- * providers: [provideTanStackQuery(new QueryClient())],
63
- * })
64
- * ```
65
- *
66
- * **Example - NgModule-based**
67
- *
68
- * ```ts
69
- * import {
70
- * provideTanStackQuery,
71
- * QueryClient,
72
- * } from '@tanstack/angular-query-experimental'
73
- *
74
- * @NgModule({
75
- * declarations: [AppComponent],
76
- * imports: [BrowserModule],
77
- * providers: [provideTanStackQuery(new QueryClient())],
78
- * bootstrap: [AppComponent],
79
- * })
80
- * export class AppModule {}
81
- * ```
82
- *
83
- * You can also enable optional developer tools by adding `withDevtools`. By
84
- * default the tools will then be loaded when your app is in development mode.
85
- * ```ts
86
- * import {
87
- * provideTanStackQuery,
88
- * withDevtools
89
- * QueryClient,
90
- * } from '@tanstack/angular-query-experimental'
91
- *
92
- * bootstrapApplication(AppComponent,
93
- * {
94
- * providers: [
95
- * provideTanStackQuery(new QueryClient(), withDevtools())
96
- * ]
97
- * }
98
- * )
99
- * ```
100
- *
101
- * **Example: using an InjectionToken**
102
- *
103
- * ```ts
104
- * export const MY_QUERY_CLIENT = new InjectionToken('', {
105
- * factory: () => new QueryClient(),
106
- * })
107
- *
108
- * // In a lazy loaded route or lazy loaded component's providers array:
109
- * providers: [provideTanStackQuery(MY_QUERY_CLIENT)]
110
- * ```
111
- * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.
112
- * @param features - Optional features to configure additional Query functionality.
113
- * @returns A set of providers to set up TanStack Query.
114
- * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start
115
- * @see withDevtools
116
- */
117
- export function provideTanStackQuery(
118
- queryClient: QueryClient | InjectionToken<QueryClient>,
119
- ...features: Array<QueryFeatures>
120
- ): Array<Provider> {
121
- return [
122
- provideQueryClient(queryClient),
123
- features.map((feature) => feature.ɵproviders),
124
- ]
125
- }
126
-
127
- /**
128
- * Sets up providers necessary to enable TanStack Query functionality for Angular applications.
129
- *
130
- * Allows to configure a `QueryClient`.
131
- * @param queryClient - A `QueryClient` instance.
132
- * @returns A set of providers to set up TanStack Query.
133
- * @public
134
- * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start
135
- * @deprecated Use `provideTanStackQuery` instead.
136
- */
137
- export function provideAngularQuery(queryClient: QueryClient): Array<Provider> {
138
- return provideTanStackQuery(queryClient)
139
- }
140
-
141
- /**
142
- * Helper type to represent a Query feature.
143
- */
144
- export interface QueryFeature<TFeatureKind extends QueryFeatureKind> {
145
- ɵkind: TFeatureKind
146
- ɵproviders: Array<Provider>
147
- }
148
-
149
- /**
150
- * Helper function to create an object that represents a Query feature.
151
- * @param kind -
152
- * @param providers -
153
- * @returns A Query feature.
154
- */
155
- export function queryFeature<TFeatureKind extends QueryFeatureKind>(
156
- kind: TFeatureKind,
157
- providers: Array<Provider>,
158
- ): QueryFeature<TFeatureKind> {
159
- return { ɵkind: kind, ɵproviders: providers }
160
- }
161
-
162
- /**
163
- * A type alias that represents a feature which enables developer tools.
164
- * The type is used to describe the return value of the `withDevtools` function.
165
- * @public
166
- * @see {@link withDevtools}
167
- */
168
- export type DeveloperToolsFeature = QueryFeature<'DeveloperTools'>
169
-
170
- /**
171
- * A type alias that represents a feature which enables persistence.
172
- * The type is used to describe the return value of the `withPersistQueryClient` function.
173
- * @public
174
- */
175
- export type PersistQueryClientFeature = QueryFeature<'PersistQueryClient'>
176
-
177
- /**
178
- * Options for configuring the TanStack Query devtools.
179
- * @public
180
- */
181
- export interface DevtoolsOptions {
182
- /**
183
- * Set this true if you want the devtools to default to being open
184
- */
185
- initialIsOpen?: boolean
186
- /**
187
- * The position of the TanStack logo to open and close the devtools panel.
188
- * `top-left` | `top-right` | `bottom-left` | `bottom-right` | `relative`
189
- * Defaults to `bottom-right`.
190
- */
191
- buttonPosition?: DevtoolsButtonPosition
192
- /**
193
- * The position of the TanStack Query devtools panel.
194
- * `top` | `bottom` | `left` | `right`
195
- * Defaults to `bottom`.
196
- */
197
- position?: DevtoolsPosition
198
- /**
199
- * Custom instance of QueryClient
200
- */
201
- client?: QueryClient
202
- /**
203
- * Use this so you can define custom errors that can be shown in the devtools.
204
- */
205
- errorTypes?: Array<DevtoolsErrorType>
206
- /**
207
- * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
208
- */
209
- styleNonce?: string
210
- /**
211
- * Use this so you can attach the devtool's styles to a specific element in the DOM.
212
- */
213
- shadowDOMTarget?: ShadowRoot
214
-
215
- /**
216
- * Whether the developer tools should load.
217
- * - `auto`- (Default) Lazily loads devtools when in development mode. Skips loading in production mode.
218
- * - `true`- Always load the devtools, regardless of the environment.
219
- * - `false`- Never load the devtools, regardless of the environment.
220
- *
221
- * You can use `true` and `false` to override loading developer tools from an environment file.
222
- * For example, a test environment might run in production mode but you may want to load developer tools.
223
- *
224
- * Additionally, you can use a signal in the callback to dynamically load the devtools based on a condition. For example,
225
- * a signal created from a RxJS observable that listens for a keyboard shortcut.
226
- *
227
- * **Example**
228
- * ```ts
229
- * withDevtools(() => ({
230
- * initialIsOpen: true,
231
- * loadDevtools: inject(ExampleService).loadDevtools()
232
- * }))
233
- * ```
234
- */
235
- loadDevtools?: 'auto' | boolean
236
- }
237
-
238
- /**
239
- * Enables developer tools.
240
- *
241
- * **Example**
242
- *
243
- * ```ts
244
- * export const appConfig: ApplicationConfig = {
245
- * providers: [
246
- * provideTanStackQuery(new QueryClient(), withDevtools())
247
- * ]
248
- * }
249
- * ```
250
- * By default the devtools will be loaded when Angular runs in development mode and rendered in `<body>`.
251
- *
252
- * If you need more control over when devtools are loaded, you can use the `loadDevtools` option. This is particularly useful if you want to load devtools based on environment configurations. For instance, you might have a test environment running in production mode but still require devtools to be available.
253
- *
254
- * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example.
255
- * @param withDevtoolsFn - A function that returns `DevtoolsOptions`.
256
- * @returns A set of providers for use with `provideTanStackQuery`.
257
- * @public
258
- * @see {@link provideTanStackQuery}
259
- * @see {@link DevtoolsOptions}
260
- */
261
- export function withDevtools(
262
- withDevtoolsFn?: () => DevtoolsOptions,
263
- ): DeveloperToolsFeature {
264
- let providers: Array<Provider> = []
265
- if (!isDevMode() && !withDevtoolsFn) {
266
- providers = []
267
- } else {
268
- providers = [
269
- {
270
- // Do not use provideEnvironmentInitializer while Angular < v19 is supported
271
- provide: ENVIRONMENT_INITIALIZER,
272
- multi: true,
273
- useFactory: () => {
274
- if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop
275
- const injectedClient = inject(QueryClient, {
276
- optional: true,
277
- })
278
- const destroyRef = inject(DestroyRef)
279
-
280
- const options = computed(() => withDevtoolsFn?.() ?? {})
281
-
282
- let devtools: TanstackQueryDevtools | null = null
283
- let el: HTMLElement | null = null
284
-
285
- const shouldLoadToolsSignal = computed(() => {
286
- const { loadDevtools } = options()
287
- return typeof loadDevtools === 'boolean'
288
- ? loadDevtools
289
- : isDevMode()
290
- })
291
-
292
- const getResolvedQueryClient = () => {
293
- const client = options().client ?? injectedClient
294
- if (!client) {
295
- throw new Error('No QueryClient found')
296
- }
297
- return client
298
- }
299
-
300
- const destroyDevtools = () => {
301
- devtools?.unmount()
302
- el?.remove()
303
- devtools = null
304
- }
305
-
306
- return () =>
307
- effect(() => {
308
- const shouldLoadTools = shouldLoadToolsSignal()
309
- const {
310
- client,
311
- position,
312
- errorTypes,
313
- buttonPosition,
314
- initialIsOpen,
315
- } = options()
316
-
317
- if (devtools && !shouldLoadTools) {
318
- destroyDevtools()
319
- return
320
- } else if (devtools && shouldLoadTools) {
321
- client && devtools.setClient(client)
322
- position && devtools.setPosition(position)
323
- errorTypes && devtools.setErrorTypes(errorTypes)
324
- buttonPosition && devtools.setButtonPosition(buttonPosition)
325
- initialIsOpen && devtools.setInitialIsOpen(initialIsOpen)
326
- return
327
- } else if (!shouldLoadTools) {
328
- return
329
- }
330
-
331
- el = document.body.appendChild(document.createElement('div'))
332
- el.classList.add('tsqd-parent-container')
333
-
334
- import('@tanstack/query-devtools').then((queryDevtools) => {
335
- devtools = new queryDevtools.TanstackQueryDevtools({
336
- ...options(),
337
- client: getResolvedQueryClient(),
338
- queryFlavor: 'Angular Query',
339
- version: '5',
340
- onlineManager,
341
- })
342
-
343
- el && devtools.mount(el)
344
-
345
- // Unmount the devtools on application destroy
346
- destroyRef.onDestroy(destroyDevtools)
347
- })
348
- })
349
- },
350
- },
351
- ]
352
- }
353
- return queryFeature('DeveloperTools', providers)
354
- }
355
-
356
- /**
357
- * A type alias that represents all Query features available for use with `provideTanStackQuery`.
358
- * Features can be enabled by adding special functions to the `provideTanStackQuery` call.
359
- * See documentation for each symbol to find corresponding function name. See also `provideTanStackQuery`
360
- * documentation on how to use those functions.
361
- * @public
362
- * @see {@link provideTanStackQuery}
363
- */
364
- export type QueryFeatures = DeveloperToolsFeature | PersistQueryClientFeature
365
-
366
- export const queryFeatures = ['DeveloperTools', 'PersistQueryClient'] as const
367
-
368
- export type QueryFeatureKind = (typeof queryFeatures)[number]