@ethlete/query 1.0.1 → 2.1.0

package/fesm2020/ethlete-query.mjs

@@ -1,5 +1,5 @@
-import { getCookie, setCookie, deleteCookie, DestroyService, equal, clone } from '@ethlete/core';
-import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, interval, tap, timer, fromEvent, startWith, concat, take, debounceTime, combineLatest, map, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubjectWithSubscriberCount, getCookie, setCookie, deleteCookie, DestroyService, equal, clone } from '@ethlete/core';
+import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, interval, startWith, tap, timer, fromEvent, concat, take, debounceTime, combineLatest, map, 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';
@@ -545,6 +545,26 @@ class Query {
         }
         return ts < Date.now();
     }
+    get isInUse() {
+        return this._state$.subscriberCount > 0;
+    }
+    get isPolling() {
+        return !!this._pollingSubscription;
+    }
+    get autoRefreshOnConfig() {
+        const base = this._queryConfig.autoRefreshOn ?? {};
+        const transformed = {
+            queryClientDefaultHeadersChange: base.queryClientDefaultHeadersChange ?? true,
+            windowFocus: base.windowFocus ?? true,
+        };
+        return transformed;
+    }
+    /**
+     * @internal
+     */
+    get _enableSmartPolling() {
+        return this._queryConfig.enableSmartPolling ?? true;
+    }
     constructor(_client, _queryConfig, _routeWithParams, _args) {
         this._client = _client;
         this._queryConfig = _queryConfig;
@@ -553,15 +573,21 @@ class Query {
         this._currentId = 0;
         this._pollingSubscription = null;
         this._onAbort$ = new Subject();
-        this._state$ = new BehaviorSubject({
+        this._currentPollConfig = null;
+        /**
+         * @internal
+         */
+        this._isPollingPaused = false;
+        this._state$ = new BehaviorSubjectWithSubscriberCount({
             type: "PREPARED" /* QueryStateType.Prepared */,
-            meta: { id: this._currentId },
+            meta: { id: this._currentId, triggeredVia: 'program' },
         });
     }
     clone() {
         return this._client.fetch(this._queryConfig);
     }
     execute(options) {
+        const triggeredVia = options?._triggeredVia ?? 'program';
         if (!this.isExpired && !options?.skipCache && isQueryStateSuccess(this.state)) {
             return this;
         }
@@ -572,7 +598,7 @@ class Query {
         if (isQueryStateLoading(this._state$.value)) {
             this.abort();
         }
-        const meta = { id };
+        const meta = { id, triggeredVia };
         this._state$.next({
             type: "LOADING" /* QueryStateType.Loading */,
             meta,
@@ -682,16 +708,34 @@ class Query {
         if (this._pollingSubscription) {
             return this;
         }
-        this._pollingSubscription = interval(config.interval)
+        this._currentPollConfig = config;
+        const _interval = config.triggerImmediately
+            ? interval(config.interval).pipe(startWith(-1))
+            : interval(config.interval);
+        this._pollingSubscription = _interval
             .pipe(takeUntil(config.takeUntil))
-            .subscribe(() => this.execute({ skipCache: true }));
+            .subscribe(() => this.execute({ skipCache: true, _triggeredVia: 'poll' }));
         return this;
     }
     stopPolling() {
         this._pollingSubscription?.unsubscribe();
         this._pollingSubscription = null;
+        this._currentPollConfig = null;
+        return this;
+    }
+    pausePolling() {
+        this._pollingSubscription?.unsubscribe();
+        this._pollingSubscription = null;
+        this._isPollingPaused = true;
         return this;
     }
+    resumePolling() {
+        if (!this._isPollingPaused || !this._currentPollConfig) {
+            return this;
+        }
+        this._isPollingPaused = false;
+        return this.poll({ ...this._currentPollConfig, triggerImmediately: true });
+    }
     _updateUseResultInDependencies() {
         if (!this._args?.useResultIn?.length) {
             return;
@@ -957,9 +1001,9 @@ class QueryDirective {
         }
     }
 }
-QueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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.1.4", type: QueryDirective, isStandalone: true, selector: "[query]", inputs: { query: "query", cache: ["queryCache", "cache"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: QueryDirective, decorators: [{
+QueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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.1", type: QueryDirective, isStandalone: true, selector: "[query]", inputs: { query: "query", cache: ["queryCache", "cache"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1032,6 +1076,7 @@ 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);
@@ -1040,7 +1085,7 @@ class InfinityQuery {
         this._currentQuery$.next(query);
     }
     reset(newConfig) {
-        this._destroy();
+        this._clearSubscriptions();
         this._config = { ...this._config, ...(newConfig ?? {}) };
         this._currentPage$.next(null);
         this._currentCalculatedPage$.next(null);
@@ -1048,8 +1093,9 @@ class InfinityQuery {
         this._itemsPerPage$.next(this._config.limitParam?.value ?? 10);
         this._currentQuery$.next(null);
         this._data$.next([]);
+        this.nextPage();
     }
-    _destroy() {
+    _clearSubscriptions() {
         this._subscriptions.forEach((sub) => sub.unsubscribe());
         this._subscriptions = [];
     }
@@ -1079,7 +1125,14 @@ class InfinityQuery {
                 this._subscriptions = this._subscriptions.filter((sub) => sub !== stateChangesSub);
             },
         });
-        this._subscriptions.push(stateChangesSub);
+        const queryAutoRefreshSub = query.state$.subscribe({
+            next: (state) => {
+                if (state.meta.triggeredVia === 'auto') {
+                    this.reset();
+                }
+            },
+        });
+        this._subscriptions.push(stateChangesSub, queryAutoRefreshSub);
     }
     _prepareArgs(config, page) {
         const pageParamLocation = this._getPageParamLocation(config?.pageParam?.location);
@@ -1193,7 +1246,7 @@ class InfinityQueryDirective {
         this._renderMainView();
     }
     ngOnDestroy() {
-        this.instance?._destroy();
+        this.instance?._clearSubscriptions();
     }
     _setupInfinityQuery(config) {
         const instance = new InfinityQuery(config);
@@ -1259,7 +1312,7 @@ class InfinityQueryDirective {
     }
     _cleanup() {
         this._queryConfigChanged$.next(true);
-        this.instance?._destroy();
+        this.instance?._clearSubscriptions();
         this._viewContext.loading = false;
         this._viewContext.error = null;
         this._viewContext.infinityQuery = null;
@@ -1272,9 +1325,9 @@ class InfinityQueryDirective {
         this._data$.next([]);
     }
 }
-InfinityQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: InfinityQueryDirective, isStandalone: true, selector: "[infinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["infinityQuery"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+InfinityQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: InfinityQueryDirective, isStandalone: true, selector: "[infinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["infinityQuery"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1324,9 +1377,9 @@ class InfinityQueryTriggerDirective {
         this._observer.observe(this._elementRef.nativeElement);
     }
 }
-InfinityQueryTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[infinityQueryTrigger], infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+InfinityQueryTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[infinityQueryTrigger], infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1342,6 +1395,7 @@ class QueryStore {
         this._config = _config;
         this._store = new Map();
         this._garbageCollector = null;
+        this._initSmartQueryHandling();
     }
     add(id, query) {
         this._store.set(id, query);
@@ -1355,6 +1409,55 @@ class QueryStore {
         this._store.delete(id);
         this._logState(id, null, 'REMOVE');
     }
+    forEach(callback) {
+        for (const [key, query] of this._store) {
+            callback(query, key);
+        }
+    }
+    refreshQueriesInUse(config) {
+        const { ignoreCacheValidity, purgeUnused } = config ?? {};
+        for (const [key, query] of this._store) {
+            if (query.isInUse &&
+                (query.isExpired || ignoreCacheValidity) &&
+                query.autoRefreshOnConfig.queryClientDefaultHeadersChange) {
+                query.execute({ skipCache: true, _triggeredVia: 'auto' });
+            }
+            else if (purgeUnused && !query.isInUse) {
+                this.remove(key);
+            }
+        }
+    }
+    _initSmartQueryHandling() {
+        const windowBlur$ = fromEvent(window, 'blur');
+        const windowFocus$ = fromEvent(window, 'focus');
+        windowBlur$.subscribe(() => {
+            this._stopGarbageCollector();
+            if (this._config?.enableSmartPolling) {
+                this.forEach((query) => {
+                    if (!query.isPolling || !query._enableSmartPolling) {
+                        return;
+                    }
+                    query.pausePolling();
+                });
+            }
+        });
+        windowFocus$.subscribe(() => {
+            if (this._config?.enableSmartPolling || this._config?.autoRefreshQueriesOnWindowFocus) {
+                this.forEach((query) => {
+                    if (this._config?.enableSmartPolling && query._isPollingPaused) {
+                        query.resumePolling();
+                    }
+                    if (this._config?.autoRefreshQueriesOnWindowFocus &&
+                        query.isExpired &&
+                        query.isInUse &&
+                        query.autoRefreshOnConfig.windowFocus) {
+                        query.execute({ skipCache: true, _triggeredVia: 'auto' });
+                    }
+                });
+            }
+            this._initGarbageCollector();
+        });
+    }
     _logState(key, item, operation) {
         if (!this._config?.enableChangeLogging)
             return;
@@ -1384,7 +1487,7 @@ class QueryStore {
     _runGarbageCollector() {
         this._logGarbageCollector('Collecting...');
         this._store.forEach((item, key) => {
-            if (item.isExpired) {
+            if (item.isExpired && !item.isInUse) {
                 this.remove(key);
             }
         });
@@ -1470,6 +1573,9 @@ class QueryClient {
                 if (shouldCacheQuery(queryConfig.method)) {
                     const existingQuery = this._store.get(cacheKey);
                     if (existingQuery) {
+                        if (existingQuery.isExpired) {
+                            existingQuery.execute();
+                        }
                         return existingQuery;
                     }
                 }
@@ -1491,14 +1597,17 @@ class QueryClient {
             }
             this._authProvider$.next(authProvider);
         };
-        this.setDefaultHeaders = (headers) => {
+        this.setDefaultHeaders = (config) => {
             if (!this._clientConfig.request) {
                 this._clientConfig.request = {
-                    headers: headers ?? undefined,
+                    headers: config.headers ?? undefined,
                 };
             }
             else {
-                this._clientConfig.request.headers = headers ?? undefined;
+                this._clientConfig.request.headers = config.headers ?? undefined;
+            }
+            if (config.refreshQueriesInUse) {
+                this._store.refreshQueriesInUse({ purgeUnused: true, ignoreCacheValidity: true });
             }
         };
         this.clearAuthProvider = () => {
@@ -1508,6 +1617,8 @@ class QueryClient {
         this._store = new QueryStore({
             enableChangeLogging: _clientConfig.logging?.queryStateChanges,
             enableGarbageCollectorLogging: _clientConfig.logging?.queryStateGarbageCollector,
+            autoRefreshQueriesOnWindowFocus: _clientConfig.request?.autoRefreshQueriesOnWindowFocus ?? true,
+            enableSmartPolling: _clientConfig.request?.enableSmartPolling ?? true,
         });
     }
 }