@tanstack/angular-query-experimental 5.59.20 → 5.60.2
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.
- package/README.md +6 -6
- package/build/index.d.ts +680 -0
- package/build/index.js +616 -0
- package/build/index.js.map +1 -0
- package/package.json +13 -14
- package/src/create-base-query.ts +119 -0
- package/src/index.ts +28 -0
- package/src/infinite-query-options.ts +125 -0
- package/src/inject-infinite-query.ts +119 -0
- package/src/inject-is-fetching.ts +50 -0
- package/src/inject-is-mutating.ts +49 -0
- package/src/inject-mutation-state.ts +99 -0
- package/src/inject-mutation.ts +122 -0
- package/src/inject-queries.ts +243 -0
- package/src/inject-query-client.ts +27 -0
- package/src/inject-query.ts +207 -0
- package/src/providers.ts +344 -0
- package/src/query-options.ts +125 -0
- package/src/signal-proxy.ts +46 -0
- package/src/test-setup.ts +12 -0
- package/src/types.ts +328 -0
- package/src/util/assert-injector/assert-injector.test.ts +74 -0
- package/src/util/assert-injector/assert-injector.ts +81 -0
- package/src/util/create-injection-token/create-injection-token.test.ts +32 -0
- package/src/util/create-injection-token/create-injection-token.ts +183 -0
- package/src/util/index.ts +13 -0
- package/src/util/is-dev-mode/is-dev-mode.ts +3 -0
- package/src/util/lazy-init/lazy-init.ts +34 -0
- package/src/util/lazy-signal-initializer/lazy-signal-initializer.ts +23 -0
- package/build/README.md +0 -133
- package/build/esm2022/create-base-query.mjs +0 -62
- package/build/esm2022/index.mjs +0 -16
- package/build/esm2022/infinite-query-options.mjs +0 -12
- package/build/esm2022/inject-infinite-query.mjs +0 -15
- package/build/esm2022/inject-is-fetching.mjs +0 -38
- package/build/esm2022/inject-is-mutating.mjs +0 -37
- package/build/esm2022/inject-mutation-state.mjs +0 -47
- package/build/esm2022/inject-mutation.mjs +0 -51
- package/build/esm2022/inject-queries.mjs +0 -33
- package/build/esm2022/inject-query-client.mjs +0 -22
- package/build/esm2022/inject-query.mjs +0 -44
- package/build/esm2022/providers.mjs +0 -56
- package/build/esm2022/query-options.mjs +0 -26
- package/build/esm2022/signal-proxy.mjs +0 -38
- package/build/esm2022/tanstack-angular-query-experimental.mjs +0 -5
- package/build/esm2022/types.mjs +0 -3
- package/build/esm2022/util/assert-injector/assert-injector.mjs +0 -21
- package/build/esm2022/util/create-injection-token/create-injection-token.mjs +0 -61
- package/build/esm2022/util/index.mjs +0 -9
- package/build/esm2022/util/lazy-init/lazy-init.mjs +0 -31
- package/build/esm2022/util/lazy-signal-initializer/lazy-signal-initializer.mjs +0 -14
- package/build/fesm2022/tanstack-angular-query-experimental.mjs +0 -587
- package/build/fesm2022/tanstack-angular-query-experimental.mjs.map +0 -1
- package/build/rollup.d.ts +0 -605
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Injector, computed, inject, untracked } from '@angular/core';
|
|
2
|
-
export function lazySignalInitializer(initializerFn) {
|
|
3
|
-
const injector = inject(Injector);
|
|
4
|
-
let source = null;
|
|
5
|
-
const unwrapSignal = () => {
|
|
6
|
-
if (!source) {
|
|
7
|
-
source = untracked(() => initializerFn(injector));
|
|
8
|
-
}
|
|
9
|
-
return source();
|
|
10
|
-
};
|
|
11
|
-
queueMicrotask(() => unwrapSignal());
|
|
12
|
-
return computed(unwrapSignal);
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eS1zaWduYWwtaW5pdGlhbGl6ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbC9sYXp5LXNpZ25hbC1pbml0aWFsaXplci9sYXp5LXNpZ25hbC1pbml0aWFsaXplci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBS3JFLE1BQU0sVUFBVSxxQkFBcUIsQ0FDbkMsYUFBcUM7SUFFckMsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFBO0lBRWpDLElBQUksTUFBTSxHQUFxQixJQUFJLENBQUE7SUFFbkMsTUFBTSxZQUFZLEdBQUcsR0FBRyxFQUFFO1FBQ3hCLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNaLE1BQU0sR0FBRyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUE7UUFDbkQsQ0FBQztRQUNELE9BQU8sTUFBTSxFQUFFLENBQUE7SUFDakIsQ0FBQyxDQUFBO0lBRUQsY0FBYyxDQUFDLEdBQUcsRUFBRSxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUE7SUFFcEMsT0FBTyxRQUFRLENBQUMsWUFBWSxDQUFDLENBQUE7QUFDL0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdG9yLCBjb21wdXRlZCwgaW5qZWN0LCB1bnRyYWNrZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuaW1wb3J0IHR5cGUgeyBTaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuXG50eXBlIFNpZ25hbEluaXRpYWxpemVyRm48VD4gPSAoaW5qZWN0b3I6IEluamVjdG9yKSA9PiBTaWduYWw8VD5cblxuZXhwb3J0IGZ1bmN0aW9uIGxhenlTaWduYWxJbml0aWFsaXplcjxUPihcbiAgaW5pdGlhbGl6ZXJGbjogU2lnbmFsSW5pdGlhbGl6ZXJGbjxUPixcbikge1xuICBjb25zdCBpbmplY3RvciA9IGluamVjdChJbmplY3RvcilcblxuICBsZXQgc291cmNlOiBTaWduYWw8VD4gfCBudWxsID0gbnVsbFxuXG4gIGNvbnN0IHVud3JhcFNpZ25hbCA9ICgpID0+IHtcbiAgICBpZiAoIXNvdXJjZSkge1xuICAgICAgc291cmNlID0gdW50cmFja2VkKCgpID0+IGluaXRpYWxpemVyRm4oaW5qZWN0b3IpKVxuICAgIH1cbiAgICByZXR1cm4gc291cmNlKClcbiAgfVxuXG4gIHF1ZXVlTWljcm90YXNrKCgpID0+IHVud3JhcFNpZ25hbCgpKVxuXG4gIHJldHVybiBjb21wdXRlZCh1bndyYXBTaWduYWwpXG59XG4iXX0=
|
|
@@ -1,587 +0,0 @@
|
|
|
1
|
-
import { notifyManager, InfiniteQueryObserver, MutationObserver, replaceEqualDeep, QueriesObserver, QueryObserver } from '@tanstack/query-core';
|
|
2
|
-
export * from '@tanstack/query-core';
|
|
3
|
-
import { untracked, computed, assertInInjectionContext, inject, Injector, runInInjectionContext, InjectionToken, NgZone, DestroyRef, signal, effect, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
|
|
4
|
-
|
|
5
|
-
/* istanbul ignore file */
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Allows to share and re-use query options in a type-safe way.
|
|
9
|
-
*
|
|
10
|
-
* The `queryKey` will be tagged with the type from `queryFn`.
|
|
11
|
-
*
|
|
12
|
-
* **Example**
|
|
13
|
-
*
|
|
14
|
-
* ```ts
|
|
15
|
-
* const { queryKey } = queryOptions({
|
|
16
|
-
* queryKey: ['key'],
|
|
17
|
-
* queryFn: () => Promise.resolve(5),
|
|
18
|
-
* // ^? Promise<number>
|
|
19
|
-
* })
|
|
20
|
-
*
|
|
21
|
-
* const queryClient = new QueryClient()
|
|
22
|
-
* const data = queryClient.getQueryData(queryKey)
|
|
23
|
-
* // ^? number | undefined
|
|
24
|
-
* ```
|
|
25
|
-
* @param options - The query options to tag with the type from `queryFn`.
|
|
26
|
-
* @returns The tagged query options.
|
|
27
|
-
* @public
|
|
28
|
-
*/
|
|
29
|
-
function queryOptions(options) {
|
|
30
|
-
return options;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Allows to share and re-use infinite query options in a type-safe way.
|
|
35
|
-
*
|
|
36
|
-
* The `queryKey` will be tagged with the type from `queryFn`.
|
|
37
|
-
* @param options - The infinite query options to tag with the type from `queryFn`.
|
|
38
|
-
* @returns The tagged infinite query options.
|
|
39
|
-
* @public
|
|
40
|
-
*/
|
|
41
|
-
function infiniteQueryOptions(options) {
|
|
42
|
-
return options;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Exposes fields of an object passed via an Angular `Signal` as `Computed` signals.
|
|
47
|
-
* Functions on the object are passed through as-is.
|
|
48
|
-
* @param inputSignal - `Signal` that must return an object.
|
|
49
|
-
* @returns A proxy object with the same fields as the input object, but with each field wrapped in a `Computed` signal.
|
|
50
|
-
*/
|
|
51
|
-
function signalProxy(inputSignal) {
|
|
52
|
-
const internalState = {};
|
|
53
|
-
return new Proxy(internalState, {
|
|
54
|
-
get(target, prop) {
|
|
55
|
-
// first check if we have it in our internal state and return it
|
|
56
|
-
const computedField = target[prop];
|
|
57
|
-
if (computedField)
|
|
58
|
-
return computedField;
|
|
59
|
-
// then, check if it's a function on the resultState and return it
|
|
60
|
-
const targetField = untracked(inputSignal)[prop];
|
|
61
|
-
if (typeof targetField === 'function')
|
|
62
|
-
return targetField;
|
|
63
|
-
// finally, create a computed field, store it and return it
|
|
64
|
-
// @ts-expect-error
|
|
65
|
-
return (target[prop] = computed(() => inputSignal()[prop]));
|
|
66
|
-
},
|
|
67
|
-
has(_, prop) {
|
|
68
|
-
return !!untracked(inputSignal)[prop];
|
|
69
|
-
},
|
|
70
|
-
ownKeys() {
|
|
71
|
-
return Reflect.ownKeys(untracked(inputSignal));
|
|
72
|
-
},
|
|
73
|
-
getOwnPropertyDescriptor() {
|
|
74
|
-
return {
|
|
75
|
-
enumerable: true,
|
|
76
|
-
configurable: true,
|
|
77
|
-
};
|
|
78
|
-
},
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function shouldThrowError(throwError, params) {
|
|
83
|
-
// Allow throwError function to override throwing behavior on a per-error basis
|
|
84
|
-
if (typeof throwError === 'function') {
|
|
85
|
-
return throwError(...params);
|
|
86
|
-
}
|
|
87
|
-
return !!throwError;
|
|
88
|
-
}
|
|
89
|
-
function noop() { }
|
|
90
|
-
|
|
91
|
-
function lazyInit(initializer) {
|
|
92
|
-
let object = null;
|
|
93
|
-
const initializeObject = () => {
|
|
94
|
-
if (!object) {
|
|
95
|
-
object = untracked(() => initializer());
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
queueMicrotask(() => initializeObject());
|
|
99
|
-
return new Proxy({}, {
|
|
100
|
-
get(_, prop, receiver) {
|
|
101
|
-
initializeObject();
|
|
102
|
-
return Reflect.get(object, prop, receiver);
|
|
103
|
-
},
|
|
104
|
-
has(_, prop) {
|
|
105
|
-
initializeObject();
|
|
106
|
-
return Reflect.has(object, prop);
|
|
107
|
-
},
|
|
108
|
-
ownKeys() {
|
|
109
|
-
initializeObject();
|
|
110
|
-
return Reflect.ownKeys(object);
|
|
111
|
-
},
|
|
112
|
-
getOwnPropertyDescriptor() {
|
|
113
|
-
return {
|
|
114
|
-
enumerable: true,
|
|
115
|
-
configurable: true,
|
|
116
|
-
};
|
|
117
|
-
},
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
/* eslint-disable cspell/spellchecker */
|
|
122
|
-
/**
|
|
123
|
-
* The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.
|
|
124
|
-
*
|
|
125
|
-
* Original Author: Chau Tran
|
|
126
|
-
*
|
|
127
|
-
* NG Extension Platform is an open-source project licensed under the MIT license.
|
|
128
|
-
*
|
|
129
|
-
* For more information about the original code, see
|
|
130
|
-
* https://github.com/nartc/ngxtension-platform
|
|
131
|
-
*/
|
|
132
|
-
/* eslint-enable */
|
|
133
|
-
function assertInjector(fn, injector, runner) {
|
|
134
|
-
!injector && assertInInjectionContext(fn);
|
|
135
|
-
const assertedInjector = injector ?? inject(Injector);
|
|
136
|
-
if (!runner)
|
|
137
|
-
return assertedInjector;
|
|
138
|
-
return runInInjectionContext(assertedInjector, runner);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
/* eslint-disable cspell/spellchecker */
|
|
142
|
-
/**
|
|
143
|
-
* The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.
|
|
144
|
-
*
|
|
145
|
-
* Original Author: Chau Tran
|
|
146
|
-
*
|
|
147
|
-
* NG Extension Platform is an open-source project licensed under the MIT license.
|
|
148
|
-
*
|
|
149
|
-
* For more information about the original code, see
|
|
150
|
-
* https://github.com/nartc/ngxtension-platform
|
|
151
|
-
*/
|
|
152
|
-
/* eslint-enable */
|
|
153
|
-
function createInjectFn(token) {
|
|
154
|
-
return function ({ injector, ...injectOptions } = {}) {
|
|
155
|
-
injector = assertInjector(this, injector);
|
|
156
|
-
return runInInjectionContext(injector, () => inject(token, injectOptions));
|
|
157
|
-
};
|
|
158
|
-
}
|
|
159
|
-
function createProvideFn(token, factory, opts = {}) {
|
|
160
|
-
const { deps = [], multi = false, extraProviders = [] } = opts;
|
|
161
|
-
return (value, isFunctionValue = false) => {
|
|
162
|
-
let provider;
|
|
163
|
-
if (value !== undefined) {
|
|
164
|
-
// eslint-disable-next-line no-shadow
|
|
165
|
-
const factory = typeof value === 'function'
|
|
166
|
-
? isFunctionValue
|
|
167
|
-
? () => value
|
|
168
|
-
: value
|
|
169
|
-
: () => value;
|
|
170
|
-
provider = {
|
|
171
|
-
provide: token,
|
|
172
|
-
useFactory: factory,
|
|
173
|
-
multi,
|
|
174
|
-
};
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
provider = {
|
|
178
|
-
provide: token,
|
|
179
|
-
useFactory: factory,
|
|
180
|
-
deps: deps,
|
|
181
|
-
multi,
|
|
182
|
-
};
|
|
183
|
-
}
|
|
184
|
-
return [extraProviders, provider];
|
|
185
|
-
};
|
|
186
|
-
}
|
|
187
|
-
function createNoopInjectionToken(description, options) {
|
|
188
|
-
const token =
|
|
189
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
190
|
-
options?.token ||
|
|
191
|
-
new InjectionToken(description);
|
|
192
|
-
return [
|
|
193
|
-
createInjectFn(token),
|
|
194
|
-
createProvideFn(token, () => null, (options || {})),
|
|
195
|
-
token,
|
|
196
|
-
() => { },
|
|
197
|
-
];
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
const tokens = createNoopInjectionToken('QueryClientToken');
|
|
201
|
-
/**
|
|
202
|
-
* Injects the `QueryClient` instance into the component or service.
|
|
203
|
-
*
|
|
204
|
-
* **Example**
|
|
205
|
-
* ```ts
|
|
206
|
-
* const queryClient = injectQueryClient();
|
|
207
|
-
* ```
|
|
208
|
-
* @returns The `QueryClient` instance.
|
|
209
|
-
* @public
|
|
210
|
-
*/
|
|
211
|
-
const injectQueryClient = tokens[0];
|
|
212
|
-
/**
|
|
213
|
-
* Usually {@link provideAngularQuery} is used once to set up TanStack Query and the
|
|
214
|
-
* {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}
|
|
215
|
-
* for the entire application. You can use `provideQueryClient` to provide a
|
|
216
|
-
* different `QueryClient` instance for a part of the application.
|
|
217
|
-
* @public
|
|
218
|
-
*/
|
|
219
|
-
const provideQueryClient = tokens[1];
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Base implementation for `injectQuery` and `injectInfiniteQuery`.
|
|
223
|
-
*/
|
|
224
|
-
function createBaseQuery(optionsFn, Observer) {
|
|
225
|
-
const injector = inject(Injector);
|
|
226
|
-
return lazyInit(() => {
|
|
227
|
-
const ngZone = injector.get(NgZone);
|
|
228
|
-
const destroyRef = injector.get(DestroyRef);
|
|
229
|
-
const queryClient = injectQueryClient({ injector });
|
|
230
|
-
/**
|
|
231
|
-
* Signal that has the default options from query client applied
|
|
232
|
-
* computed() is used so signals can be inserted into the options
|
|
233
|
-
* making it reactive. Wrapping options in a function ensures embedded expressions
|
|
234
|
-
* are preserved and can keep being applied after signal changes
|
|
235
|
-
*/
|
|
236
|
-
const defaultedOptionsSignal = computed(() => {
|
|
237
|
-
const options = runInInjectionContext(injector, () => optionsFn(queryClient));
|
|
238
|
-
const defaultedOptions = queryClient.defaultQueryOptions(options);
|
|
239
|
-
defaultedOptions._optimisticResults = 'optimistic';
|
|
240
|
-
return defaultedOptions;
|
|
241
|
-
});
|
|
242
|
-
const observer = new Observer(queryClient, defaultedOptionsSignal());
|
|
243
|
-
const resultSignal = signal(observer.getOptimisticResult(defaultedOptionsSignal()));
|
|
244
|
-
effect(() => {
|
|
245
|
-
const defaultedOptions = defaultedOptionsSignal();
|
|
246
|
-
observer.setOptions(defaultedOptions, {
|
|
247
|
-
// Do not notify on updates because of changes in the options because
|
|
248
|
-
// these changes should already be reflected in the optimistic result.
|
|
249
|
-
listeners: false,
|
|
250
|
-
});
|
|
251
|
-
untracked(() => {
|
|
252
|
-
resultSignal.set(observer.getOptimisticResult(defaultedOptions));
|
|
253
|
-
});
|
|
254
|
-
}, {
|
|
255
|
-
injector,
|
|
256
|
-
});
|
|
257
|
-
// observer.trackResult is not used as this optimization is not needed for Angular
|
|
258
|
-
const unsubscribe = observer.subscribe(notifyManager.batchCalls((state) => {
|
|
259
|
-
ngZone.run(() => {
|
|
260
|
-
if (state.isError &&
|
|
261
|
-
!state.isFetching &&
|
|
262
|
-
// !isRestoring() && // todo: enable when client persistence is implemented
|
|
263
|
-
shouldThrowError(observer.options.throwOnError, [
|
|
264
|
-
state.error,
|
|
265
|
-
observer.getCurrentQuery(),
|
|
266
|
-
])) {
|
|
267
|
-
throw state.error;
|
|
268
|
-
}
|
|
269
|
-
resultSignal.set(state);
|
|
270
|
-
});
|
|
271
|
-
}));
|
|
272
|
-
destroyRef.onDestroy(unsubscribe);
|
|
273
|
-
return signalProxy(resultSignal);
|
|
274
|
-
});
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Injects an infinite query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
|
|
279
|
-
* Infinite queries can additively "load more" data onto an existing set of data or "infinite scroll"
|
|
280
|
-
* @param optionsFn - A function that returns infinite query options.
|
|
281
|
-
* @param injector - The Angular injector to use.
|
|
282
|
-
* @returns The infinite query result.
|
|
283
|
-
* @public
|
|
284
|
-
*/
|
|
285
|
-
function injectInfiniteQuery(optionsFn, injector) {
|
|
286
|
-
return assertInjector(injectInfiniteQuery, injector, () => createBaseQuery(optionsFn, InfiniteQueryObserver));
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* Injects a signal that tracks the number of queries that your application is loading or
|
|
291
|
-
* fetching in the background.
|
|
292
|
-
*
|
|
293
|
-
* Can be used for app-wide loading indicators
|
|
294
|
-
* @param filters - The filters to apply to the query.
|
|
295
|
-
* @param injector - The Angular injector to use.
|
|
296
|
-
* @returns signal with number of loading or fetching queries.
|
|
297
|
-
* @public
|
|
298
|
-
*/
|
|
299
|
-
function injectIsFetching(filters, injector) {
|
|
300
|
-
return assertInjector(injectIsFetching, injector, () => {
|
|
301
|
-
const queryClient = injectQueryClient();
|
|
302
|
-
const destroyRef = inject(DestroyRef);
|
|
303
|
-
const ngZone = inject(NgZone);
|
|
304
|
-
const cache = queryClient.getQueryCache();
|
|
305
|
-
// isFetching is the prev value initialized on mount *
|
|
306
|
-
let isFetching = queryClient.isFetching(filters);
|
|
307
|
-
const result = signal(isFetching);
|
|
308
|
-
const unsubscribe = cache.subscribe(notifyManager.batchCalls(() => {
|
|
309
|
-
const newIsFetching = queryClient.isFetching(filters);
|
|
310
|
-
if (isFetching !== newIsFetching) {
|
|
311
|
-
// * and update with each change
|
|
312
|
-
isFetching = newIsFetching;
|
|
313
|
-
ngZone.run(() => {
|
|
314
|
-
result.set(isFetching);
|
|
315
|
-
});
|
|
316
|
-
}
|
|
317
|
-
}));
|
|
318
|
-
destroyRef.onDestroy(unsubscribe);
|
|
319
|
-
return result;
|
|
320
|
-
});
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
/**
|
|
324
|
-
* Injects a signal that tracks the number of mutations that your application is fetching.
|
|
325
|
-
*
|
|
326
|
-
* Can be used for app-wide loading indicators
|
|
327
|
-
* @param filters - The filters to apply to the query.
|
|
328
|
-
* @param injector - The Angular injector to use.
|
|
329
|
-
* @returns signal with number of fetching mutations.
|
|
330
|
-
* @public
|
|
331
|
-
*/
|
|
332
|
-
function injectIsMutating(filters, injector) {
|
|
333
|
-
return assertInjector(injectIsMutating, injector, () => {
|
|
334
|
-
const queryClient = injectQueryClient();
|
|
335
|
-
const destroyRef = inject(DestroyRef);
|
|
336
|
-
const ngZone = inject(NgZone);
|
|
337
|
-
const cache = queryClient.getMutationCache();
|
|
338
|
-
// isMutating is the prev value initialized on mount *
|
|
339
|
-
let isMutating = queryClient.isMutating(filters);
|
|
340
|
-
const result = signal(isMutating);
|
|
341
|
-
const unsubscribe = cache.subscribe(notifyManager.batchCalls(() => {
|
|
342
|
-
const newIsMutating = queryClient.isMutating(filters);
|
|
343
|
-
if (isMutating !== newIsMutating) {
|
|
344
|
-
// * and update with each change
|
|
345
|
-
isMutating = newIsMutating;
|
|
346
|
-
ngZone.run(() => {
|
|
347
|
-
result.set(isMutating);
|
|
348
|
-
});
|
|
349
|
-
}
|
|
350
|
-
}));
|
|
351
|
-
destroyRef.onDestroy(unsubscribe);
|
|
352
|
-
return result;
|
|
353
|
-
});
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
/**
|
|
357
|
-
* Injects a mutation: an imperative function that can be invoked which typically performs server side effects.
|
|
358
|
-
*
|
|
359
|
-
* Unlike queries, mutations are not run automatically.
|
|
360
|
-
* @param optionsFn - A function that returns mutation options.
|
|
361
|
-
* @param injector - The Angular injector to use.
|
|
362
|
-
* @returns The mutation.
|
|
363
|
-
* @public
|
|
364
|
-
*/
|
|
365
|
-
function injectMutation(optionsFn, injector) {
|
|
366
|
-
return assertInjector(injectMutation, injector, () => {
|
|
367
|
-
const queryClient = injectQueryClient();
|
|
368
|
-
const currentInjector = inject(Injector);
|
|
369
|
-
const destroyRef = inject(DestroyRef);
|
|
370
|
-
const ngZone = inject(NgZone);
|
|
371
|
-
return lazyInit(() => runInInjectionContext(currentInjector, () => {
|
|
372
|
-
const observer = new MutationObserver(queryClient, optionsFn(queryClient));
|
|
373
|
-
const mutate = (variables, mutateOptions) => {
|
|
374
|
-
observer.mutate(variables, mutateOptions).catch(noop);
|
|
375
|
-
};
|
|
376
|
-
effect(() => {
|
|
377
|
-
observer.setOptions(runInInjectionContext(currentInjector, () => optionsFn(queryClient)));
|
|
378
|
-
});
|
|
379
|
-
const result = signal(observer.getCurrentResult());
|
|
380
|
-
const unsubscribe = observer.subscribe(notifyManager.batchCalls((state) => {
|
|
381
|
-
ngZone.run(() => {
|
|
382
|
-
if (state.isError &&
|
|
383
|
-
shouldThrowError(observer.options.throwOnError, [state.error])) {
|
|
384
|
-
throw state.error;
|
|
385
|
-
}
|
|
386
|
-
result.set(state);
|
|
387
|
-
});
|
|
388
|
-
}));
|
|
389
|
-
destroyRef.onDestroy(unsubscribe);
|
|
390
|
-
const resultSignal = computed(() => ({
|
|
391
|
-
...result(),
|
|
392
|
-
mutate,
|
|
393
|
-
mutateAsync: result().mutate,
|
|
394
|
-
}));
|
|
395
|
-
return signalProxy(resultSignal);
|
|
396
|
-
}));
|
|
397
|
-
});
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
function lazySignalInitializer(initializerFn) {
|
|
401
|
-
const injector = inject(Injector);
|
|
402
|
-
let source = null;
|
|
403
|
-
const unwrapSignal = () => {
|
|
404
|
-
if (!source) {
|
|
405
|
-
source = untracked(() => initializerFn(injector));
|
|
406
|
-
}
|
|
407
|
-
return source();
|
|
408
|
-
};
|
|
409
|
-
queueMicrotask(() => unwrapSignal());
|
|
410
|
-
return computed(unwrapSignal);
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
function getResult(mutationCache, options) {
|
|
414
|
-
return mutationCache
|
|
415
|
-
.findAll(options.filters)
|
|
416
|
-
.map((mutation) => (options.select ? options.select(mutation) : mutation.state));
|
|
417
|
-
}
|
|
418
|
-
/**
|
|
419
|
-
* Injects a signal that tracks the state of all mutations.
|
|
420
|
-
* @param mutationStateOptionsFn - A function that returns mutation state options.
|
|
421
|
-
* @param options - The Angular injector to use.
|
|
422
|
-
* @returns The signal that tracks the state of all mutations.
|
|
423
|
-
* @public
|
|
424
|
-
*/
|
|
425
|
-
function injectMutationState(mutationStateOptionsFn = () => ({}), options) {
|
|
426
|
-
return assertInjector(injectMutationState, options?.injector, () => {
|
|
427
|
-
const destroyRef = inject(DestroyRef);
|
|
428
|
-
const queryClient = injectQueryClient();
|
|
429
|
-
const ngZone = inject(NgZone);
|
|
430
|
-
const mutationCache = queryClient.getMutationCache();
|
|
431
|
-
return lazySignalInitializer((injector) => {
|
|
432
|
-
const result = signal(getResult(mutationCache, mutationStateOptionsFn()));
|
|
433
|
-
effect(() => {
|
|
434
|
-
const mutationStateOptions = mutationStateOptionsFn();
|
|
435
|
-
untracked(() => {
|
|
436
|
-
// Setting the signal from an effect because it's both 'computed' from options()
|
|
437
|
-
// and needs to be set imperatively in the mutationCache listener.
|
|
438
|
-
result.set(getResult(mutationCache, mutationStateOptions));
|
|
439
|
-
});
|
|
440
|
-
}, { injector });
|
|
441
|
-
const unsubscribe = mutationCache.subscribe(notifyManager.batchCalls(() => {
|
|
442
|
-
const nextResult = replaceEqualDeep(result(), getResult(mutationCache, mutationStateOptionsFn()));
|
|
443
|
-
if (result() !== nextResult) {
|
|
444
|
-
ngZone.run(() => {
|
|
445
|
-
result.set(nextResult);
|
|
446
|
-
});
|
|
447
|
-
}
|
|
448
|
-
}));
|
|
449
|
-
destroyRef.onDestroy(unsubscribe);
|
|
450
|
-
return result;
|
|
451
|
-
});
|
|
452
|
-
});
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
/**
|
|
456
|
-
* @public
|
|
457
|
-
*/
|
|
458
|
-
function injectQueries({ queries, ...options }, injector) {
|
|
459
|
-
return assertInjector(injectQueries, injector, () => {
|
|
460
|
-
const queryClient = injectQueryClient();
|
|
461
|
-
const destroyRef = inject(DestroyRef);
|
|
462
|
-
const defaultedQueries = computed(() => {
|
|
463
|
-
return queries().map((opts) => {
|
|
464
|
-
const defaultedOptions = queryClient.defaultQueryOptions(opts);
|
|
465
|
-
// Make sure the results are already in fetching state before subscribing or updating options
|
|
466
|
-
defaultedOptions._optimisticResults = 'optimistic';
|
|
467
|
-
return defaultedOptions;
|
|
468
|
-
});
|
|
469
|
-
});
|
|
470
|
-
const observer = new QueriesObserver(queryClient, defaultedQueries(), options);
|
|
471
|
-
// Do not notify on updates because of changes in the options because
|
|
472
|
-
// these changes should already be reflected in the optimistic result.
|
|
473
|
-
effect(() => {
|
|
474
|
-
observer.setQueries(defaultedQueries(), options, { listeners: false });
|
|
475
|
-
});
|
|
476
|
-
const [, getCombinedResult] = observer.getOptimisticResult(defaultedQueries(), options.combine);
|
|
477
|
-
const result = signal(getCombinedResult());
|
|
478
|
-
const unsubscribe = observer.subscribe(notifyManager.batchCalls(result.set));
|
|
479
|
-
destroyRef.onDestroy(unsubscribe);
|
|
480
|
-
return result;
|
|
481
|
-
});
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
/**
|
|
485
|
-
* Injects a query: a declarative dependency on an asynchronous source of data that is tied to a unique key.
|
|
486
|
-
*
|
|
487
|
-
* **Basic example**
|
|
488
|
-
* ```ts
|
|
489
|
-
* class ServiceOrComponent {
|
|
490
|
-
* query = injectQuery(() => ({
|
|
491
|
-
* queryKey: ['repoData'],
|
|
492
|
-
* queryFn: () =>
|
|
493
|
-
* this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
|
|
494
|
-
* }))
|
|
495
|
-
* }
|
|
496
|
-
* ```
|
|
497
|
-
*
|
|
498
|
-
* Similar to `computed` from Angular, the function passed to `injectQuery` will be run in the reactive context.
|
|
499
|
-
* In the example below, the query will be automatically enabled and executed when the filter signal changes
|
|
500
|
-
* to a truthy value. When the filter signal changes back to a falsy value, the query will be disabled.
|
|
501
|
-
*
|
|
502
|
-
* **Reactive example**
|
|
503
|
-
* ```ts
|
|
504
|
-
* class ServiceOrComponent {
|
|
505
|
-
* filter = signal('')
|
|
506
|
-
*
|
|
507
|
-
* todosQuery = injectQuery(() => ({
|
|
508
|
-
* queryKey: ['todos', this.filter()],
|
|
509
|
-
* queryFn: () => fetchTodos(this.filter()),
|
|
510
|
-
* // Signals can be combined with expressions
|
|
511
|
-
* enabled: !!this.filter(),
|
|
512
|
-
* }))
|
|
513
|
-
* }
|
|
514
|
-
* ```
|
|
515
|
-
* @param optionsFn - A function that returns query options.
|
|
516
|
-
* @param injector - The Angular injector to use.
|
|
517
|
-
* @returns The query result.
|
|
518
|
-
* @public
|
|
519
|
-
* @see https://tanstack.com/query/latest/docs/framework/angular/guides/queries
|
|
520
|
-
*/
|
|
521
|
-
function injectQuery(optionsFn, injector) {
|
|
522
|
-
return assertInjector(injectQuery, injector, () => createBaseQuery(optionsFn, QueryObserver));
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
/**
|
|
526
|
-
* Sets up providers necessary to enable TanStack Query functionality for Angular applications.
|
|
527
|
-
*
|
|
528
|
-
* Allows to configure a `QueryClient`.
|
|
529
|
-
*
|
|
530
|
-
* **Example - standalone**
|
|
531
|
-
*
|
|
532
|
-
* ```ts
|
|
533
|
-
* import {
|
|
534
|
-
* provideAngularQuery,
|
|
535
|
-
* QueryClient,
|
|
536
|
-
* } from '@tanstack/angular-query-experimental'
|
|
537
|
-
*
|
|
538
|
-
* bootstrapApplication(AppComponent, {
|
|
539
|
-
* providers: [provideAngularQuery(new QueryClient())],
|
|
540
|
-
* })
|
|
541
|
-
* ```
|
|
542
|
-
*
|
|
543
|
-
* **Example - NgModule-based**
|
|
544
|
-
*
|
|
545
|
-
* ```ts
|
|
546
|
-
* import {
|
|
547
|
-
* provideAngularQuery,
|
|
548
|
-
* QueryClient,
|
|
549
|
-
* } from '@tanstack/angular-query-experimental'
|
|
550
|
-
*
|
|
551
|
-
* @NgModule({
|
|
552
|
-
* declarations: [AppComponent],
|
|
553
|
-
* imports: [BrowserModule],
|
|
554
|
-
* providers: [provideAngularQuery(new QueryClient())],
|
|
555
|
-
* bootstrap: [AppComponent],
|
|
556
|
-
* })
|
|
557
|
-
* export class AppModule {}
|
|
558
|
-
* ```
|
|
559
|
-
* @param queryClient - A `QueryClient` instance.
|
|
560
|
-
* @returns A set of providers to set up TanStack Query.
|
|
561
|
-
* @public
|
|
562
|
-
* @see https://tanstack.com/query/v5/docs/framework/angular/quick-start
|
|
563
|
-
*/
|
|
564
|
-
function provideAngularQuery(queryClient) {
|
|
565
|
-
return makeEnvironmentProviders([
|
|
566
|
-
provideQueryClient(queryClient),
|
|
567
|
-
{
|
|
568
|
-
provide: ENVIRONMENT_INITIALIZER,
|
|
569
|
-
multi: true,
|
|
570
|
-
useValue: () => {
|
|
571
|
-
queryClient.mount();
|
|
572
|
-
// Unmount the query client on application destroy
|
|
573
|
-
inject(DestroyRef).onDestroy(() => queryClient.unmount());
|
|
574
|
-
},
|
|
575
|
-
},
|
|
576
|
-
]);
|
|
577
|
-
}
|
|
578
|
-
|
|
579
|
-
/* istanbul ignore file */
|
|
580
|
-
// Re-export core
|
|
581
|
-
|
|
582
|
-
/**
|
|
583
|
-
* Generated bundle index. Do not edit.
|
|
584
|
-
*/
|
|
585
|
-
|
|
586
|
-
export { infiniteQueryOptions, injectInfiniteQuery, injectIsFetching, injectIsMutating, injectMutation, injectMutationState, injectQueries, injectQuery, injectQueryClient, provideAngularQuery, provideQueryClient, queryOptions };
|
|
587
|
-
//# sourceMappingURL=tanstack-angular-query-experimental.mjs.map
|