@ethlete/query 2.9.1 → 3.0.0

package/fesm2020/ethlete-query.mjs

@@ -1,6 +1,6 @@
 import * as i1 from '@ethlete/core';
 import { BehaviorSubjectWithSubscriberCount, getCookie, setCookie, deleteCookie, DestroyService, DelayableDirective, equal, clone } from '@ethlete/core';
-import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, tap, interval, startWith, finalize, timer, map, combineLatest, fromEvent, debounceTime, take, concat, distinctUntilChanged } from 'rxjs';
+import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, shareReplay, Subject, takeUntil, tap, interval, skip, map, timer, combineLatest, withLatestFrom, fromEvent, startWith, take, concat, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i0 from '@angular/core';
 import { Directive, Input, InjectionToken, inject, ChangeDetectorRef, ViewContainerRef, TemplateRef, ErrorHandler, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
@@ -113,12 +113,6 @@ const buildQueryObjectString = (key, object) => {
     })
         .join('&');
 };
-const isFetchResponse = (response) => typeof response === 'object' &&
-    response !== null &&
-    'status' in response &&
-    'statusText' in response &&
-    'json' in response &&
-    typeof response['json'] === 'function';
 const filterInvalidParams = (params) => {
     const filteredParams = Object.entries(params)
         .map(([key, value]) => {
@@ -706,16 +700,22 @@ class Query {
         return ++this._currentId;
     }
     get state$() {
-        return this._state$.asObservable();
+        return this._state$.pipe(switchMap((s) => this._transformState(s)), shareReplay({ bufferSize: 1, refCount: true }));
     }
-    get state() {
+    /**
+     * The current state of the query.
+     *
+     * **Warning!** This differs from the `state$` observable in that it does not use the query store. Thus, the response data might be outdated.
+     * Use `state$` (or `firstValueFrom(state$)`) the most up-to-date data.
+     */
+    get rawState() {
         return this._state$.value;
     }
     get isExpired() {
-        if (!isQueryStateSuccess(this.state)) {
+        if (!isQueryStateSuccess(this._state$.value)) {
             return false;
         }
-        const ts = this.state.meta.expiresAt;
+        const ts = this._state$.value.meta.expiresAt;
         if (!ts) {
             return true;
         }
@@ -751,7 +751,7 @@ class Query {
         this._args = _args;
         this._currentId = 0;
         this._pollingSubscription = null;
-        this._entitySubscription = null;
+        this._requestSubscription = null;
         this._onAbort$ = new Subject();
         this._currentPollConfig = null;
         /**
@@ -762,193 +762,39 @@ class Query {
             type: "PREPARED" /* QueryStateType.Prepared */,
             meta: { id: this._currentId, triggeredVia: 'program' },
         });
-        if (this._queryConfig.entity?.store) {
-            this._entitySubscription = this._queryConfig.entity.store.events$.subscribe((event) => {
-                if (event.type !== 'update' && event.type !== 'set') {
-                    return;
-                }
-                if (!isQueryStateSuccess(this.state)) {
-                    return;
-                }
-                const response = this.state.response;
-                const rawResponse = this.state.rawResponse;
-                const key = this._queryConfig.entity?.store.config.idKey;
-                if (!key) {
-                    return;
-                }
-                const newData = this._queryConfig.entity?.store.getOne(event.key);
-                if (!newData) {
-                    return;
-                }
-                const newResponse = this._queryConfig.entity?.valueUpdater
-                    ? this._queryConfig.entity?.valueUpdater({
-                        args: this._args,
-                        entity: newData,
-                        rawResponse,
-                        response,
-                    })
-                    : response[key] === newData[key]
-                        ? {
-                            response: newData,
-                            rawResponse: newData,
-                        }
-                        : null;
-                if (!newResponse) {
-                    return;
-                }
-                this._state$.next({
-                    ...this.state,
-                    response: newResponse.response,
-                    rawResponse: newResponse.rawResponse,
-                    meta: {
-                        ...this.state.meta,
-                        triggeredVia: 'auto',
-                    },
-                });
-            });
-        }
-    }
-    clone() {
-        return this._client.fetch(this._queryConfig);
     }
-    execute(options) {
-        const triggeredVia = options?._triggeredVia ?? 'program';
-        if (!this.isExpired && !options?.skipCache && isQueryStateSuccess(this.state)) {
+    execute(options = {}) {
+        const { skipCache = false, _triggeredVia: triggeredVia = 'program' } = options;
+        const { authProvider } = this._client;
+        const queryConfig = this._queryConfig;
+        if (!this.isExpired && !skipCache && isQueryStateSuccess(this.rawState)) {
             return this;
         }
-        if (this._queryConfig.secure && !this._client.authProvider) {
+        if (queryConfig.secure && !authProvider) {
             throw new Error('Cannot execute secure query without auth provider');
         }
         const id = this._nextId;
-        if (isQueryStateLoading(this._state$.value)) {
+        const meta = { id, triggeredVia };
+        if (isQueryStateLoading(this.rawState)) {
             this.abort();
         }
-        const meta = { id, triggeredVia };
-        this._state$.next({
-            type: "LOADING" /* QueryStateType.Loading */,
-            meta,
-        });
-        this._updateUseResultInDependencies();
-        const method = computeQueryMethod({ config: this._queryConfig, client: this._client });
-        const body = computeQueryBody({
-            config: this._queryConfig,
-            client: this._client,
-            args: this._args,
-            method,
-        });
-        const headers = computeQueryHeaders({ client: this._client, config: this._queryConfig, args: this._args });
-        request({
+        this._state$.next({ type: "LOADING" /* QueryStateType.Loading */, meta });
+        const method = computeQueryMethod({ config: queryConfig, client: this._client });
+        const body = computeQueryBody({ config: queryConfig, client: this._client, args: this._args, method });
+        const headers = computeQueryHeaders({ client: this._client, config: queryConfig, args: this._args });
+        this._requestSubscription = request({
             urlWithParams: this._routeWithParams,
             method,
             body,
             headers,
-            reportProgress: this._queryConfig.reportProgress,
-            responseType: this._queryConfig.responseType,
-            withCredentials: this._queryConfig.withCredentials,
+            reportProgress: queryConfig.reportProgress,
+            responseType: queryConfig.responseType,
+            withCredentials: queryConfig.withCredentials,
             cacheAdapter: this._client.config.request?.cacheAdapter,
             retryFn: this._client.config.request?.retryFn,
         })
-            .pipe(takeUntil(this._onAbort$))
-            .subscribe({
-            next: (state) => {
-                if (state.type === 'start' || state.type === 'delay-retry') {
-                    const newMeta = {
-                        ...meta,
-                        isWaitingForRetry: state.type === 'delay-retry',
-                        retryDelay: state.retryDelay,
-                        retryNumber: state.retryNumber,
-                    };
-                    this._state$.next({
-                        type: "LOADING" /* QueryStateType.Loading */,
-                        meta: newMeta,
-                    });
-                }
-                else if (state.type === 'download-progress') {
-                    this._state$.next({
-                        type: "LOADING" /* QueryStateType.Loading */,
-                        progress: state.progress,
-                        partialText: state.partialText,
-                        meta,
-                    });
-                }
-                else if (state.type === 'upload-progress') {
-                    this._state$.next({
-                        type: "LOADING" /* QueryStateType.Loading */,
-                        progress: state.progress,
-                        meta,
-                    });
-                }
-                else if (state.type === 'success') {
-                    const isResponseObject = typeof state.response === 'object';
-                    const isGql = isGqlQueryConfig(this._queryConfig);
-                    let responseData = null;
-                    if (isGql &&
-                        isResponseObject &&
-                        !!state.response &&
-                        typeof state.response === 'object' &&
-                        'data' in state.response) {
-                        responseData = state.response['data'];
-                    }
-                    else {
-                        responseData = state.response;
-                    }
-                    const transformedResponse = this._queryConfig.responseTransformer
-                        ? this._queryConfig.responseTransformer(responseData)
-                        : responseData;
-                    this._queryConfig.entity?.successAction?.({
-                        args: this._args,
-                        rawResponse: state.response,
-                        response: transformedResponse,
-                        store: this._queryConfig.entity.store,
-                    });
-                    this._state$.next({
-                        type: "SUCCESS" /* QueryStateType.Success */,
-                        rawResponse: state.response,
-                        response: transformedResponse,
-                        meta: { ...meta, expiresAt: state.expiresInTimestamp },
-                    });
-                }
-                else if (state.type === 'failure') {
-                    const failure = () => {
-                        this._state$.next({
-                            type: "FAILURE" /* QueryStateType.Failure */,
-                            error: state.error,
-                            meta,
-                        });
-                    };
-                    const bearerAuthProvider = this._getBearerAuthProvider();
-                    if (!bearerAuthProvider || options?._isUnauthorizedRetry) {
-                        return failure();
-                    }
-                    else if (state.error.status === 401 /* HttpStatusCode.Unauthorized */ &&
-                        bearerAuthProvider.shouldRefreshOnUnauthorizedResponse) {
-                        const query = bearerAuthProvider._refreshQuery();
-                        if (!query) {
-                            return failure();
-                        }
-                        query.state$
-                            .pipe(takeUntilResponse(), takeUntil(this._onAbort$), tap((state) => {
-                            if (isQueryStateSuccess(state)) {
-                                this.execute({ ...options, _isUnauthorizedRetry: true });
-                            }
-                            else if (isQueryStateFailure(state)) {
-                                failure();
-                            }
-                        }))
-                            .subscribe();
-                    }
-                    else {
-                        failure();
-                    }
-                }
-                else if (state.type === 'cancel') {
-                    this._state$.next({
-                        type: "CANCELLED" /* QueryStateType.Cancelled */,
-                        meta,
-                    });
-                }
-            },
-        });
+            .pipe(takeUntil(this._onAbort$), tap((state) => this._updateEntityState(state, meta, options)))
+            .subscribe();
         return this;
     }
     abort() {
@@ -960,16 +806,11 @@ class Query {
             return this;
         }
         this._currentPollConfig = config;
-        const _interval = config.triggerImmediately
-            ? interval(config.interval).pipe(startWith(-1))
-            : interval(config.interval);
-        this._pollingSubscription = _interval
-            .pipe(takeUntil(config.takeUntil), finalize(() => this.stopPolling()))
-            .subscribe(() => {
-            if (this.state.type === "LOADING" /* QueryStateType.Loading */) {
-                return;
-            }
-            this.execute({ skipCache: true, _triggeredVia: 'poll' });
+        const interval$ = interval(config.interval);
+        const poll$ = interval$.pipe(skip(config.triggerImmediately ? 0 : 1), takeUntil(config.takeUntil), takeWhile(() => !this._isPollingPaused), filter(() => !isQueryStateLoading(this._state$.value)));
+        this._pollingSubscription = poll$.subscribe({
+            next: () => this.execute({ skipCache: true, _triggeredVia: 'poll' }),
+            complete: () => this.stopPolling(),
         });
         return this;
     }
@@ -992,26 +833,6 @@ class Query {
         this._isPollingPaused = false;
         return this.poll({ ...this._currentPollConfig, triggerImmediately: true });
     }
-    _updateUseResultInDependencies() {
-        if (!this._args?.useResultIn?.length) {
-            return;
-        }
-        this.state$
-            .pipe(filterSuccess(), takeUntil(this._onAbort$), takeUntilResponse(), tap((state) => {
-            if (!this._args?.useResultIn) {
-                return;
-            }
-            for (const query of this._args.useResultIn) {
-                query._state$.next({
-                    type: "SUCCESS" /* QueryStateType.Success */,
-                    meta: { ...state.meta, id: query._nextId },
-                    rawResponse: state.rawResponse,
-                    response: state.response,
-                });
-            }
-        }))
-            .subscribe();
-    }
     /**
      * @internal
      */
@@ -1019,7 +840,7 @@ class Query {
         this._state$.complete();
         this._onAbort$.complete();
         this._pollingSubscription?.unsubscribe();
-        this._entitySubscription?.unsubscribe();
+        this._requestSubscription?.unsubscribe();
     }
     _getBearerAuthProvider() {
         const authProvider = this._client.authProvider;
@@ -1028,6 +849,86 @@ class Query {
         }
         return null;
     }
+    _updateEntityState(requestEvent, meta, options) {
+        switch (requestEvent.type) {
+            case 'start':
+            case 'delay-retry': {
+                const { type, retryDelay, retryNumber } = requestEvent;
+                const newMeta = { ...meta, isWaitingForRetry: type === 'delay-retry', retryDelay, retryNumber };
+                this._state$.next({
+                    type: "LOADING" /* QueryStateType.Loading */,
+                    meta: newMeta,
+                });
+                break;
+            }
+            case 'upload-progress':
+            case 'download-progress': {
+                this._state$.next({
+                    type: "LOADING" /* QueryStateType.Loading */,
+                    progress: requestEvent.progress,
+                    partialText: 'partialText' in requestEvent ? requestEvent.partialText : undefined,
+                    meta,
+                });
+                break;
+            }
+            case 'success': {
+                const { response, expiresInTimestamp } = requestEvent;
+                const isGql = isGqlQueryConfig(this._queryConfig);
+                const responseData = isGql && typeof response === 'object' && !!response && 'data' in response
+                    ? response['data']
+                    : response;
+                this._state$.next({
+                    type: "SUCCESS" /* QueryStateType.Success */,
+                    response: responseData,
+                    meta: { ...meta, expiresAt: expiresInTimestamp },
+                });
+                if (this._queryConfig.entity && this._queryConfig.entity.set) {
+                    const id = this._queryConfig.entity?.id({ args: this._args, response: responseData });
+                    this._queryConfig.entity?.set({
+                        args: this._args,
+                        response: responseData,
+                        id,
+                        store: this._queryConfig.entity.store,
+                    });
+                }
+                break;
+            }
+            case 'failure': {
+                const { error } = requestEvent;
+                const failure = () => this._state$.next({ type: "FAILURE" /* QueryStateType.Failure */, error, meta });
+                const bearerAuthProvider = this._getBearerAuthProvider();
+                if (!bearerAuthProvider ||
+                    options?._isUnauthorizedRetry ||
+                    error.status !== 401 /* HttpStatusCode.Unauthorized */ ||
+                    !bearerAuthProvider.shouldRefreshOnUnauthorizedResponse) {
+                    return failure();
+                }
+                const query = bearerAuthProvider._refreshQuery();
+                if (!query)
+                    return failure();
+                query.state$
+                    .pipe(takeUntilResponse(), takeUntil(this._onAbort$), tap((state) => isQueryStateSuccess(state) ? this.execute({ ...options, _isUnauthorizedRetry: true }) : failure()))
+                    .subscribe();
+                break;
+            }
+            case 'cancel': {
+                this._state$.next({
+                    type: "CANCELLED" /* QueryStateType.Cancelled */,
+                    meta,
+                });
+                break;
+            }
+        }
+    }
+    _transformState(s) {
+        if (!isQueryStateSuccess(s) || !this._queryConfig.entity?.get) {
+            return of(s);
+        }
+        const id = this._queryConfig.entity.id({ args: this._args, response: s.response });
+        return this._queryConfig.entity
+            .get({ args: this._args, id, response: s.response, store: this._queryConfig.entity.store })
+            .pipe(map((v) => ({ ...s, response: v })));
+    }
 }
 
 const isBasicAuthProvider = (authProvider) => authProvider instanceof BasicAuthProvider;
@@ -1154,7 +1055,7 @@ class BearerAuthProvider {
      * @internal
      */
     _refreshQuery() {
-        if (isQueryStateLoading(this._currentRefreshQuery$.getValue()?.state)) {
+        if (isQueryStateLoading(this._currentRefreshQuery$.getValue()?.rawState)) {
             return;
         }
         const currentRefreshToken = this.tokens.refreshToken;
@@ -1223,8 +1124,7 @@ class QueryDirective {
         this._subscription = null;
         this._viewContext = {
             $implicit: null,
-            query: null,
-            raw: null,
+            etQuery: null,
             loading: false,
             error: null,
             progress: null,
@@ -1260,14 +1160,12 @@ class QueryDirective {
             this._viewContext.progress = null;
         }
         if (isQueryStateSuccess(state)) {
-            this._viewContext.query = state.response;
+            this._viewContext.etQuery = state.response;
             this._viewContext.$implicit = state.response;
-            this._viewContext.raw = state.rawResponse;
         }
         else if (!this.cache) {
-            this._viewContext.query = null;
+            this._viewContext.etQuery = null;
             this._viewContext.$implicit = null;
-            this._viewContext.raw = null;
         }
         if (isQueryStateFailure(state)) {
             this._viewContext.error = state.error;
@@ -1286,22 +1184,22 @@ class QueryDirective {
     }
 }
 QueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: QueryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ErrorHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-QueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: QueryDirective, isStandalone: true, selector: "[query]", inputs: { query: "query", cache: ["queryCache", "cache"] }, ngImport: i0 });
+QueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[query]',
+                    selector: '[etQuery]',
                     standalone: true,
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.ErrorHandler }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { query: [{
-                type: Input
+                type: Input,
+                args: ['etQuery']
             }], cache: [{
                 type: Input,
-                args: ['queryCache']
+                args: ['etQueryCache']
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 class InfinityQuery {
     get currentPage$() {
         return this._currentPage$.asObservable();
@@ -1327,28 +1225,57 @@ class InfinityQuery {
     get itemsPerPage() {
         return this._itemsPerPage$.getValue();
     }
-    get currentQuery$() {
-        return this._currentQuery$.asObservable();
-    }
-    get currentQuery() {
-        return this._currentQuery$.getValue();
-    }
     get data$() {
-        return this._data$.asObservable();
+        return this._data$;
     }
-    get data() {
-        return this._data$.getValue();
+    get currentQuery$() {
+        return this._lastQuery$;
     }
     constructor(_config) {
         this._config = _config;
+        this._queries$ = new BehaviorSubject([]);
         this._currentPage$ = new BehaviorSubject(null);
         this._currentCalculatedPage$ = new BehaviorSubject(null);
         this._totalPages$ = new BehaviorSubject(null);
         this._itemsPerPage$ = new BehaviorSubject(this._config.limitParam?.value ?? 10);
-        this._currentQuery$ = new BehaviorSubject(null);
-        this._data$ = new BehaviorSubject([]);
-        this._subscriptions = [];
-        this._responsiveDataSubscription = null;
+        this._data$ = this._queries$.pipe(switchMap((queries) => {
+            if (!queries.length) {
+                return of([]);
+            }
+            return combineLatest(queries.map((query) => query.state$));
+        }), tap((states) => {
+            const lastState = states[states.length - 1];
+            if (!isQueryStateSuccess(lastState)) {
+                return;
+            }
+            const totalPages = this._config.response.totalPagesExtractor?.({
+                response: lastState.response,
+                itemsPerPage: this.itemsPerPage,
+            }) ??
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                lastState.response?.totalPages ??
+                null;
+            this._totalPages$.next(totalPages);
+        }), map((states) => {
+            const fullData = states.reduce((acc, state) => {
+                if (isQueryStateSuccess(state)) {
+                    let data = this._config?.response.valueExtractor(state.response);
+                    if (this._config.response.reverse) {
+                        data = [...data].reverse();
+                    }
+                    if (this._config.response.appendItemsTo === 'start') {
+                        acc.unshift(...data);
+                    }
+                    else {
+                        acc.push(...data);
+                    }
+                }
+                return acc;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }, []);
+            return fullData;
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+        this._lastQuery$ = this._queries$.pipe(map((queries) => queries[queries.length - 1] ?? null), shareReplay({ bufferSize: 1, refCount: true }));
     }
     nextPage() {
         const newPage = (this._currentPage$.value ?? 0) + 1;
@@ -1361,73 +1288,21 @@ class InfinityQuery {
             console.error('Cannot load more pages, already at the end. Make sure to not render the infinity query trigger using *ngIf canLoadMore');
             return;
         }
-        this._clearSubscriptions();
         const args = this._prepareArgs(this._config, calculatedPage);
         const query = this._config.queryCreator.prepare(args).execute();
-        this._handleNewQuery(query);
+        this._queries$.next([...this._queries$.value, query]);
         this._currentPage$.next(newPage);
         this._currentCalculatedPage$.next(calculatedPage);
-        this._currentQuery$.next(query);
     }
     reset(newConfig) {
-        this._clearSubscriptions();
         this._config = { ...this._config, ...(newConfig ?? {}) };
         this._currentPage$.next(null);
         this._currentCalculatedPage$.next(null);
         this._totalPages$.next(null);
         this._itemsPerPage$.next(this._config.limitParam?.value ?? 10);
-        this._currentQuery$.next(null);
-        this._data$.next([]);
+        this._queries$.next([]);
         this.nextPage();
     }
-    /**
-     * @internal
-     */
-    _clearSubscriptions() {
-        this._subscriptions.forEach((sub) => sub.unsubscribe());
-        this._subscriptions = [];
-        this._responsiveDataSubscription?.unsubscribe();
-    }
-    _handleNewQuery(query) {
-        const stateChangesSub = query.state$.pipe(takeUntilResponse(), filterSuccess()).subscribe({
-            next: (state) => {
-                let newData = this._config?.response.valueExtractor(state.response);
-                if (this._config.response.reverse) {
-                    newData = [...newData].reverse();
-                }
-                if (this._config.response.appendItemsTo === 'start') {
-                    newData = [...newData, ...this.data];
-                }
-                else {
-                    newData = [...this.data, ...newData];
-                }
-                if (query.store) {
-                    this._responsiveDataSubscription?.unsubscribe();
-                    const key = query.store.idKey;
-                    const responsiveData = query.store.entities$.pipe(map((entities) => newData.map((item) => {
-                        // TODO(TRB): This is kind of unsafe. The entity array keys might not be the same as the response keys
-                        const index = entities.values.findIndex((entity) => entity[key] === item[key]);
-                        return index > -1 ? entities.values[index] : item;
-                    })));
-                    this._responsiveDataSubscription = responsiveData.subscribe((data) => this._data$.next(data));
-                }
-                else {
-                    this._data$.next(newData);
-                }
-                const totalPages = this._config.response.totalPagesExtractor?.({
-                    response: state.response,
-                    itemsPerPage: this.itemsPerPage,
-                }) ??
-                    state.response?.totalPages ??
-                    null;
-                this._totalPages$.next(totalPages);
-            },
-            complete: () => {
-                this._subscriptions = this._subscriptions.filter((sub) => sub !== stateChangesSub);
-            },
-        });
-        this._subscriptions.push(stateChangesSub);
-    }
     _prepareArgs(config, page) {
         const pageParamLocation = this._getPageParamLocation(config?.pageParam?.location);
         const pageArgs = {
@@ -1502,6 +1377,7 @@ class InfinityQueryDirective {
             currentCalculatedPage: null,
             totalPages: null,
             itemsPerPage: null,
+            currentQuery: null,
         };
         this._infinityQueryInstance = null;
         this._destroy$ = inject(DestroyService, { host: true }).destroy$;
@@ -1511,6 +1387,7 @@ class InfinityQueryDirective {
         this._errorHandler = inject(ErrorHandler);
         this._delayable = inject(DelayableDirective, { host: true });
         this._data$ = new BehaviorSubject([]);
+        this._didReceiveFirstData$ = new BehaviorSubject(false);
         this._isMainViewCreated = false;
     }
     get infinityQuery() {
@@ -1540,20 +1417,22 @@ class InfinityQueryDirective {
     ngOnInit() {
         this._renderMainView();
     }
-    ngOnDestroy() {
-        this.instance?._clearSubscriptions();
-    }
     _setupInfinityQuery(config) {
         const instance = new InfinityQuery(config);
-        combineLatest([instance.currentQuery$.pipe(switchQueryState()), this._delayable.isDelayed$])
-            .pipe(tap(([state, isDelayed]) => {
+        combineLatest([
+            instance.currentQuery$.pipe(switchQueryState(), withLatestFrom(instance.currentQuery$)),
+            this._delayable.isDelayed$,
+            this._didReceiveFirstData$,
+        ])
+            .pipe(tap(([[state, currentQuery], isDelayed, didReceiveFirstData]) => {
             this._viewContext.currentPage = instance.currentPage;
             this._viewContext.totalPages = instance.totalPages;
             this._viewContext.itemsPerPage = instance.itemsPerPage;
             this._viewContext.canLoadMore =
                 (instance.totalPages && instance.currentPage && instance.totalPages > instance.currentPage) || false;
             this._viewContext.currentCalculatedPage = instance.currentCalculatedPage;
-            if (isQueryStateLoading(state) || isDelayed) {
+            this._viewContext.currentQuery = currentQuery;
+            if (isQueryStateLoading(state) || isDelayed || (!didReceiveFirstData && isQueryStateSuccess(state))) {
                 this._viewContext.loading = true;
                 this._viewContext.error = null;
                 this._viewContext.isFirstLoad = this.context.infinityQuery === null;
@@ -1579,27 +1458,24 @@ class InfinityQueryDirective {
                 this._viewContext.currentPage = null;
                 this._viewContext.itemsPerPage = null;
                 this._viewContext.totalPages = null;
+                this._viewContext.currentQuery = null;
                 this._data$.next([]);
             }
             this._cdr.markForCheck();
         }), takeUntil(this._destroy$), takeUntil(this._queryConfigChanged$))
             .subscribe();
         instance.data$
-            .pipe(tap((data) => {
+            .pipe(skip(1), tap((data) => {
             this._viewContext.infinityQuery = this._viewContext.$implicit = data;
             this._data$.next(data);
+            if (!this._didReceiveFirstData$.getValue()) {
+                this._didReceiveFirstData$.next(true);
+            }
             this._cdr.markForCheck();
         }), takeUntil(this._destroy$), takeUntil(this._queryConfigChanged$))
             .subscribe();
         return instance;
     }
-    /**
-     * @deprecated Use `loadNextPage` instead
-     * @breaking 3.0.0
-     */
-    _loadNextPage() {
-        this.loadNextPage();
-    }
     loadNextPage() {
         if (!this._infinityQueryInstance) {
             return;
@@ -1623,7 +1499,6 @@ class InfinityQueryDirective {
     }
     _cleanup() {
         this._queryConfigChanged$.next(true);
-        this.instance?._clearSubscriptions();
         this._viewContext.loading = false;
         this._viewContext.error = null;
         this._viewContext.infinityQuery = null;
@@ -1633,17 +1508,18 @@ class InfinityQueryDirective {
         this._viewContext.currentPage = null;
         this._viewContext.itemsPerPage = null;
         this._viewContext.totalPages = null;
+        this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
 }
 InfinityQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: InfinityQueryDirective, isStandalone: true, selector: "[infinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["infinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 });
+InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[infinityQuery]',
-                    exportAs: 'infinityQuery',
+                    selector: '[etInfinityQuery]',
+                    exportAs: 'etInfinityQuery',
                     standalone: true,
                     providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService],
                     hostDirectives: [DelayableDirective],
@@ -1662,7 +1538,7 @@ class InfinityQueryTriggerDirective {
         this.scrollContainerSelector = null;
     }
     ngOnInit() {
-        const isInteractive = this._elementRef.nativeElement.hasAttribute('infinityQueryTrigger');
+        const isInteractive = this._elementRef.nativeElement.hasAttribute('etInfinityQueryTrigger');
         if (isInteractive) {
             this.click$.pipe(takeUntil(this._destroy)).subscribe(() => this._infinityQuery.loadNextPage());
         }
@@ -1690,155 +1566,144 @@ class InfinityQueryTriggerDirective {
     }
 }
 InfinityQueryTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[infinityQueryTrigger], infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
+InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[infinityQueryTrigger], infinity-query-trigger',
+                    selector: '[etInfinityQueryTrigger], et-infinity-query-trigger',
                     standalone: true,
                 }]
         }], propDecorators: { scrollContainerSelector: [{
                 type: Input
             }] } });
 
-class EntityStore {
-    get events$() {
-        return this._events$.asObservable();
-    }
-    get keys() {
-        return [...this._keys];
-    }
-    get values() {
-        return [...this._dictionary.values()];
-    }
-    get size() {
-        return this._keys.size;
-    }
-    get isEmpty() {
-        return this.size === 0;
-    }
-    get config() {
-        return this._config;
-    }
-    get idKey() {
-        return this._config.idKey || 'id';
+class EntityStoreError extends Error {
+    constructor(message, detail) {
+        super(message);
+        this.detail = detail;
+        this.name = 'EntityStoreError';
     }
+}
+class EntityStore {
     constructor(_config) {
         this._config = _config;
         this._dictionary = new Map();
-        this._keys = new Set();
-        this._events$ = new Subject();
-        this.entities$ = this.events$.pipe(startWith(null), debounceTime(0), map(() => ({
-            keys: this.keys,
-            values: this.values,
-        })));
-    }
-    getOne(key) {
-        const value = this._dictionary.get(key);
-        if (!value) {
-            console.error(`EntityStore: ${this._config.name || 'unknown'}: missing key "${key}" for get`);
-            return null;
-        }
-        if (this._config.logActions) {
-            console.log(`EntityStore: ${this._config.name || 'unknown'}: get "${key}"`);
-        }
-        return value;
+        this._change$ = new Subject();
     }
-    getMany(keys) {
-        return keys.map((key) => this.getOne(key));
+    select(keyOrKeys) {
+        if (Array.isArray(keyOrKeys)) {
+            return this._selectMany(keyOrKeys);
+        }
+        return this._select(keyOrKeys);
     }
-    addOne(value) {
-        const key = this.getKey(value);
-        if (this._dictionary.has(key)) {
-            console.error(`EntityStore: ${this._config.name || 'unknown'}: duplicate key "${key}" for add`);
-            return null;
+    set(keyOrKeys, valueOrValues) {
+        if (Array.isArray(keyOrKeys)) {
+            if (!Array.isArray(valueOrValues)) {
+                throw new EntityStoreError('When setting multiple keys, values must be an array', {
+                    keyOrValues: keyOrKeys,
+                    valueOrValues,
+                });
+            }
+            for (let i = 0; i < keyOrKeys.length; i++) {
+                this._set(keyOrKeys[i], valueOrValues[i]);
+            }
         }
-        this._dictionary.set(key, value);
-        this._keys.add(key);
-        const event = { type: 'add', key };
-        this._events$.next(event);
-        if (this._config.logActions) {
-            console.log(`EntityStore: ${this._config.name || 'unknown'}: add "${key}"`);
+        else {
+            this._set(keyOrKeys, valueOrValues);
         }
-        return event;
+        this._change$.next(keyOrKeys);
     }
-    addMany(values) {
-        const events = values.map((value) => this.addOne(value));
-        return events;
-    }
-    updateOne(value) {
-        const key = this.getKey(value);
-        const existing = this._dictionary.get(key);
-        if (!existing) {
-            console.error(`EntityStore: ${this._config.name || 'unknown'}: missing key "${key}" for update`);
-            return null;
+    remove(keyOrKeys) {
+        if (Array.isArray(keyOrKeys)) {
+            for (const key of keyOrKeys) {
+                this._remove(key);
+            }
         }
-        this._dictionary.set(key, value);
-        const event = { type: 'update', key };
-        this._events$.next(event);
-        if (this._config.logActions) {
-            console.log(`EntityStore: ${this._config.name || 'unknown'}: update "${key}"`);
+        else {
+            this._remove(keyOrKeys);
         }
-        return event;
+        this._change$.next(keyOrKeys);
     }
-    updateMany(values) {
-        const events = values.map((value) => this.updateOne(value));
-        return events;
+    logState() {
+        console.log('EntityStore:', this._config.name, {
+            dictionary: this._dictionary,
+        });
     }
-    setOne(value) {
-        const key = this.getKey(value);
-        this._dictionary.set(key, value);
-        this._keys.add(key);
-        const event = { type: 'set', key };
-        this._events$.next(event);
+    _select(key) {
         if (this._config.logActions) {
-            console.log(`EntityStore: ${this._config.name || 'unknown'}: set "${key}"`);
+            console.log('EntityStore: select', this._config.name, key);
         }
-        return event;
-    }
-    setMany(values) {
-        const events = values.map((value) => this.setOne(value));
-        return events;
+        return this._change$.pipe(startWith(null), filter((v) => {
+            if (v === null) {
+                return true;
+            }
+            if (Array.isArray(v)) {
+                return v.includes(key);
+            }
+            return v === key;
+        }), map(() => this._dictionary.get(key) ?? null));
     }
-    removeOne(key) {
-        if (!this._dictionary.has(key)) {
-            console.error(`EntityStore: ${this._config.name || 'unknown'}: missing key "${key}" for remove`);
-            return null;
-        }
-        this._dictionary.delete(key);
-        this._keys.delete(key);
-        const event = { type: 'remove', key };
-        this._events$.next(event);
+    _selectMany(keys) {
         if (this._config.logActions) {
-            console.log(`EntityStore: ${this._config.name || 'unknown'}: remove "${key}"`);
+            console.log('EntityStore: selectMany', this._config.name, keys);
         }
-        return event;
-    }
-    removeMany(keys) {
-        const events = keys.map((key) => this.removeOne(key));
-        return events;
-    }
-    has(key) {
-        return this._dictionary.has(key);
+        return this._change$.pipe(startWith(null), filter((v) => {
+            if (v === null) {
+                return true;
+            }
+            if (Array.isArray(v)) {
+                return keys.some((key) => v.includes(key));
+            }
+            return keys.includes(v);
+        }), map(() => keys.map((key) => this._dictionary.get(key)).filter((value) => value !== undefined)));
     }
-    clear() {
-        this._dictionary.clear();
-        this._keys.clear();
+    _set(key, value) {
+        if (this._config.logActions) {
+            console.log('EntityStore: set', this._config.name, key, value);
+        }
+        this._dictionary.set(key, value);
     }
-    getKey(value) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const key = value[this._config.idKey || 'id'];
-        if (key === undefined) {
-            throw new Error(`EntityStore: ${this._config.name || 'unknown'}: missing key`);
+    _remove(key) {
+        if (this._config.logActions) {
+            console.log('EntityStore: remove', this._config.name, key);
         }
-        return key;
+        this._dictionary.delete(key);
     }
-    logState() {
-        console.log('EntityStore:', this._config.name, {
-            dictionary: this._dictionary,
-            keys: this._keys,
-        });
+}
+
+function mapToPaginated(response) {
+    return map((items) => ({ ...response, items }));
+}
+
+class QueryCreator {
+    constructor(_queryConfig, _client, _store) {
+        this._queryConfig = _queryConfig;
+        this._client = _client;
+        this._store = _store;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.prepare = (args) => {
+            const route = buildRoute({
+                base: this._client.config.baseRoute,
+                route: this._queryConfig.route,
+                pathParams: args?.pathParams,
+                queryParams: computeQueryQueryParams({ config: this._queryConfig, client: this._client, args }),
+            });
+            const cacheKey = isGqlQueryConfig(this._queryConfig) ? buildGqlCacheKey(this._queryConfig, args) : route;
+            if (shouldCacheQuery(this._queryConfig.method)) {
+                const existingQuery = this._store.get(cacheKey);
+                if (existingQuery) {
+                    return existingQuery;
+                }
+            }
+            const query = new Query(this._client, this._queryConfig, route, args ?? {});
+            if (shouldCacheQuery(this._queryConfig.method)) {
+                this._store.add(cacheKey, query);
+            }
+            return query;
+        };
+        this.behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
     }
 }
 
@@ -1971,20 +1836,6 @@ class QueryStore {
     }
 }
 
-const shouldCacheQuery = (method) => {
-    return method === 'GET' || method === 'OPTIONS' || method === 'HEAD' || method === 'GQL_QUERY';
-};
-const buildGqlCacheKey = (config, args) => {
-    const { query } = config;
-    const variables = args?.variables || {};
-    const queryWithoutNewLinesAndWhitespace = query.replace(/\s/g, '');
-    const queryFirst50Chars = queryWithoutNewLinesAndWhitespace.slice(0, 50);
-    const queryMiddle25Chars = queryWithoutNewLinesAndWhitespace.slice(queryWithoutNewLinesAndWhitespace.length / 2 - 25, queryWithoutNewLinesAndWhitespace.length / 2 + 25);
-    const queryLast50Chars = queryWithoutNewLinesAndWhitespace.slice(-50);
-    const vars = JSON.stringify(variables);
-    return `${queryFirst50Chars}...${queryMiddle25Chars}...${queryLast50Chars}...${vars}`;
-};
-
 class QueryClient {
     get config() {
         return this._clientConfig;
@@ -2026,33 +1877,7 @@ class QueryClient {
             ...queryConfig,
             method: 'GQL_MUTATE',
         });
-        this.fetch = (queryConfig) => {
-            const prepare = (args) => {
-                const route = buildRoute({
-                    base: this._clientConfig.baseRoute,
-                    route: queryConfig.route,
-                    pathParams: args?.pathParams,
-                    queryParams: computeQueryQueryParams({ config: queryConfig, client: this, args }),
-                });
-                const cacheKey = isGqlQueryConfig(queryConfig) ? buildGqlCacheKey(queryConfig, args) : route;
-                if (shouldCacheQuery(queryConfig.method)) {
-                    const existingQuery = this._store.get(cacheKey);
-                    if (existingQuery) {
-                        return existingQuery;
-                    }
-                }
-                const query = new Query(this, queryConfig, route, args ?? {});
-                if (shouldCacheQuery(queryConfig.method)) {
-                    this._store.add(cacheKey, query);
-                }
-                return query;
-            };
-            const behaviorSubject = (initialValue = null) => new BehaviorSubject(initialValue);
-            return {
-                prepare,
-                behaviorSubject,
-            };
-        };
+        this.fetch = (queryConfig) => new QueryCreator(queryConfig, this, this._store);
         this.setAuthProvider = (authProvider) => {
             if (this.authProvider) {
                 throw new Error('The auth provider is already set. Please call clearAuthProvider() first.');
@@ -2085,6 +1910,20 @@ class QueryClient {
     }
 }
 
+const shouldCacheQuery = (method) => {
+    return method === 'GET' || method === 'OPTIONS' || method === 'HEAD' || method === 'GQL_QUERY';
+};
+const buildGqlCacheKey = (config, args) => {
+    const { query } = config;
+    const variables = args?.variables || {};
+    const queryWithoutNewLinesAndWhitespace = query.replace(/\s/g, '');
+    const queryFirst50Chars = queryWithoutNewLinesAndWhitespace.slice(0, 50);
+    const queryMiddle25Chars = queryWithoutNewLinesAndWhitespace.slice(queryWithoutNewLinesAndWhitespace.length / 2 - 25, queryWithoutNewLinesAndWhitespace.length / 2 + 25);
+    const queryLast50Chars = queryWithoutNewLinesAndWhitespace.slice(-50);
+    const vars = JSON.stringify(variables);
+    return `${queryFirst50Chars}...${queryMiddle25Chars}...${queryLast50Chars}...${vars}`;
+};
+
 class QueryField {
     get control() {
         return this.data.control;
@@ -2328,5 +2167,5 @@ const def = () => null;
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryDirective, QueryError, QueryField, QueryForm, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryObjectString, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isFetchResponse, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, request, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryCreator, QueryDirective, QueryError, QueryField, QueryForm, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryObjectString, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, request, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map