@ethlete/query 5.22.0 → 5.24.0

package/fesm2022/ethlete-query.mjs

@@ -1,6 +1,6 @@
 import * as i1 from '@ethlete/core';
-import { createDestroy, computedTillTruthy, getCookie, setCookie, deleteCookie, DelayableDirective, nextFrame, RuntimeError, isObject, getDomain, syncSignal, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, map, shareReplay, ReplaySubject, combineLatest, interval, skip, withLatestFrom, debounceTime, Subscription, retry, throwError, catchError, merge } from 'rxjs';
+import { createDestroy, computedTillTruthy, syncSignal, getCookie, setCookie, deleteCookie, DelayableDirective, nextFrame, RuntimeError, isObject, getDomain, previousSignalValue, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, map, ReplaySubject, shareReplay, combineLatest, interval, skip, withLatestFrom, debounceTime, Subscription, retry, throwError, catchError, merge } from 'rxjs';
 import * as i0 from '@angular/core';
 import { assertInInjectionContext, inject, Injector, computed, signal, isDevMode, untracked, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, InjectionToken, ElementRef, Pipe, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, runInInjectionContext, EnvironmentInjector, createEnvironmentInjector, DestroyRef, NgZone } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -8,9 +8,12 @@ import { AsyncPipe, JsonPipe, NgClass } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { HttpErrorResponse, HttpStatusCode, HttpEventType, HttpClient, HttpHeaders } from '@angular/common/http';
+import { getActiveConsumer, setActiveConsumer } from '@angular/core/primitives/signals';
+import { io } from 'socket.io-client';
 import { Router, ActivatedRoute } from '@angular/router';
 
 class CustomHeaderAuthProvider {
+    _config;
     get header() {
         return { [this._config.name]: this._config.value };
     }
@@ -23,6 +26,7 @@ class CustomHeaderAuthProvider {
 }
 
 class BasicAuthProvider {
+    _config;
     get header() {
         return { Authorization: `Basic ${this._basicAuthString}` };
     }
@@ -39,6 +43,7 @@ class BasicAuthProvider {
 
 const buildErrorMessage = (code, message) => `[@ethlete\\query:${code}] ${message}`;
 class QueryError extends Error {
+    data;
     constructor(code, message, data) {
         super(buildErrorMessage(code, message));
         this.name = 'QueryError';
@@ -630,7 +635,7 @@ function toQuerySubject(source, options) {
 }
 function queryStateSignal(source, options) {
     const { cacheResponse } = options ?? {};
-    return toSignal(toObservable(source).pipe(switchMap((q) => extractQuery(q)?.state$ ?? of(null)), switchMap((state) => {
+    const roSignal = toSignal(toObservable(source).pipe(switchMap((q) => extractQuery(q)?.state$ ?? of(null)), switchMap((state) => {
         if (cacheResponse) {
             return of(state).pipe(filterQueryStates(["SUCCESS" /* QueryStateType.Success */, "FAILURE" /* QueryStateType.Failure */]));
         }
@@ -638,13 +643,20 @@ function queryStateSignal(source, options) {
     })), {
         initialValue: null,
     });
+    const rwSignal = signal(roSignal());
+    syncSignal(roSignal, rwSignal);
+    return rwSignal;
 }
 function queryStateResponseSignal(source, options) {
     const s = queryStateSignal(source, options);
-    return computed(() => {
+    const dataSignal = computed(() => {
         const state = s();
         return isQueryStateSuccess(state) ? state.response : null;
     });
+    dataSignal['reset'] = () => {
+        s.set(null);
+    };
+    return dataSignal;
 }
 function queryStateErrorSignal(source) {
     const s = queryStateSignal(source);
@@ -687,67 +699,71 @@ const deepFreeze = (object) => {
 const def = () => null;
 
 class QueryCreator {
+    _queryConfig;
+    _client;
+    _store;
     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 }),
-                queryParamConfig: this._client.config.request?.queryParams,
-            });
-            const cacheKey = (args?.config?.queryStoreCacheKey ?? '') + buildQueryCacheKey(route, args);
-            if (shouldCacheQuery(this._queryConfig.method) && !args?.config?.skipQueryStore) {
-                const existingQuery = this._store.get(cacheKey);
-                if (existingQuery) {
-                    return existingQuery;
-                }
-            }
-            const query = new Query(this._client, this._queryConfig, route, args ?? {}, cacheKey);
-            if (shouldCacheQuery(this._queryConfig.method) && !args?.config?.skipQueryStore) {
-                this._store.add(cacheKey, query);
-            }
-            this._store._dispatchQueryCreated(query);
-            return query;
-        };
-        this.createSubject = (initialValue, config) => {
-            assertInInjectionContext(this.createSubject);
-            const subject = new BehaviorSubject(initialValue ?? null);
-            addQueryContainerHandling(subject, () => subject.getValue(), config);
-            return subject;
-        };
-        this.createSignal = (initialValue, config) => {
-            assertInInjectionContext(this.createSignal);
-            const _signal = signal(initialValue ?? null);
-            addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
-            return _signal;
-        };
-        /**
-         * @deprecated Use `myQuery.createSubject()` or `myQuery.createSignal()` instead. Will be removed in v6.
-         */
-        this.behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
     }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    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 }),
+            queryParamConfig: this._client.config.request?.queryParams,
+        });
+        const cacheKey = (args?.config?.queryStoreCacheKey ?? '') + buildQueryCacheKey$1(route, args);
+        if (shouldCacheQuery$1(this._queryConfig.method) && !args?.config?.skipQueryStore) {
+            const existingQuery = this._store.get(cacheKey);
+            if (existingQuery) {
+                return existingQuery;
+            }
+        }
+        const query = new Query(this._client, this._queryConfig, route, args ?? {}, cacheKey);
+        if (shouldCacheQuery$1(this._queryConfig.method) && !args?.config?.skipQueryStore) {
+            this._store.add(cacheKey, query);
+        }
+        this._store._dispatchQueryCreated(query);
+        return query;
+    };
+    createSubject = (initialValue, config) => {
+        assertInInjectionContext(this.createSubject);
+        const subject = new BehaviorSubject(initialValue ?? null);
+        addQueryContainerHandling(subject, () => subject.getValue(), config);
+        return subject;
+    };
+    createSignal = (initialValue, config) => {
+        assertInInjectionContext(this.createSignal);
+        const _signal = signal(initialValue ?? null);
+        addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
+        return _signal;
+    };
+    /**
+     * @deprecated Use `myQuery.createSubject()` or `myQuery.createSignal()` instead. Will be removed in v6.
+     */
+    behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
 }
 
 class QueryStore {
+    _config;
+    /**
+     * @internal
+     */
+    _store = new Map();
+    _garbageCollector = null;
+    _isInLowResourceMode = false;
+    _lastBlurTimestamp = Date.now();
+    _storeChange$ = new Subject();
+    _queryCreated$ = new Subject();
+    storeChange$ = this._storeChange$.asObservable();
+    queryCreated$ = this._queryCreated$.asObservable();
     constructor(_config) {
         this._config = _config;
-        /**
-         * @internal
-         */
-        this._store = new Map();
-        this._garbageCollector = null;
-        this._isInLowResourceMode = false;
-        this._lastBlurTimestamp = Date.now();
-        this._storeChange$ = new Subject();
-        this._queryCreated$ = new Subject();
-        this.storeChange$ = this._storeChange$.asObservable();
-        this.queryCreated$ = this._queryCreated$.asObservable();
         this._initSmartQueryHandling();
     }
     add(id, query) {
@@ -878,6 +894,11 @@ class QueryStore {
 }
 
 class QueryClient {
+    _clientConfig;
+    /**
+     * @internal
+     */
+    _store;
     get config() {
         return this._clientConfig;
     }
@@ -887,64 +908,9 @@ class QueryClient {
     get authProvider$() {
         return this._authProvider$.asObservable() ?? this._clientConfig.parent?._authProvider$.asObservable() ?? null;
     }
+    _authProvider$ = new BehaviorSubject(null);
     constructor(_clientConfig) {
         this._clientConfig = _clientConfig;
-        this._authProvider$ = new BehaviorSubject(null);
-        this.get = (queryConfig) => this.fetch({
-            ...queryConfig,
-            method: 'GET',
-        });
-        this.post = (queryConfig) => this.fetch({
-            ...queryConfig,
-            method: 'POST',
-        });
-        this.put = (queryConfig) => this.fetch({
-            ...queryConfig,
-            method: 'PUT',
-        });
-        this.patch = (queryConfig) => this.fetch({
-            ...queryConfig,
-            method: 'PATCH',
-        });
-        this.delete = (queryConfig) => this.fetch({
-            ...queryConfig,
-            method: 'DELETE',
-        });
-        this.gqlQuery = (queryConfig) => this.fetch({
-            ...queryConfig,
-            method: 'GQL_QUERY',
-        });
-        this.gqlMutate = (queryConfig) => this.fetch({
-            ...queryConfig,
-            method: 'GQL_MUTATE',
-        });
-        this.fetch = (queryConfig) => new QueryCreator(queryConfig, this, this._store);
-        this.setAuthProvider = (authProvider) => {
-            if (this.authProvider) {
-                this.authProvider?.cleanUp();
-            }
-            this._authProvider$.next(authProvider);
-        };
-        this.setDefaultHeaders = (config) => {
-            if (!this._clientConfig.request) {
-                this._clientConfig.request = {
-                    headers: config.headers ?? undefined,
-                };
-            }
-            else {
-                this._clientConfig.request.headers = config.headers ?? undefined;
-            }
-            if (config.refreshQueriesInUse) {
-                this._store.refreshQueriesInUse({ purgeUnused: true, ignoreCacheValidity: true });
-            }
-        };
-        this.clearAuthProvider = () => {
-            this.authProvider?.cleanUp();
-            this._authProvider$.next(null);
-        };
-        this._updateBaseRoute = (route) => {
-            this._clientConfig.baseRoute = route;
-        };
         this._store = new QueryStore({
             enableChangeLogging: _clientConfig.logging?.queryStateChanges,
             enableGarbageCollectorLogging: _clientConfig.logging?.queryStateGarbageCollector,
@@ -952,12 +918,67 @@ class QueryClient {
             enableSmartPolling: _clientConfig.request?.enableSmartPolling ?? true,
         });
     }
+    get = (queryConfig) => this.fetch({
+        ...queryConfig,
+        method: 'GET',
+    });
+    post = (queryConfig) => this.fetch({
+        ...queryConfig,
+        method: 'POST',
+    });
+    put = (queryConfig) => this.fetch({
+        ...queryConfig,
+        method: 'PUT',
+    });
+    patch = (queryConfig) => this.fetch({
+        ...queryConfig,
+        method: 'PATCH',
+    });
+    delete = (queryConfig) => this.fetch({
+        ...queryConfig,
+        method: 'DELETE',
+    });
+    gqlQuery = (queryConfig) => this.fetch({
+        ...queryConfig,
+        method: 'GQL_QUERY',
+    });
+    gqlMutate = (queryConfig) => this.fetch({
+        ...queryConfig,
+        method: 'GQL_MUTATE',
+    });
+    fetch = (queryConfig) => new QueryCreator(queryConfig, this, this._store);
+    setAuthProvider = (authProvider) => {
+        if (this.authProvider) {
+            this.authProvider?.cleanUp();
+        }
+        this._authProvider$.next(authProvider);
+    };
+    setDefaultHeaders = (config) => {
+        if (!this._clientConfig.request) {
+            this._clientConfig.request = {
+                headers: config.headers ?? undefined,
+            };
+        }
+        else {
+            this._clientConfig.request.headers = config.headers ?? undefined;
+        }
+        if (config.refreshQueriesInUse) {
+            this._store.refreshQueriesInUse({ purgeUnused: true, ignoreCacheValidity: true });
+        }
+    };
+    clearAuthProvider = () => {
+        this.authProvider?.cleanUp();
+        this._authProvider$.next(null);
+    };
+    _updateBaseRoute = (route) => {
+        this._clientConfig.baseRoute = route;
+    };
 }
 
-const shouldCacheQuery = (method) => {
+const shouldCacheQuery$1 = (method) => {
     return method === 'GET' || method === 'OPTIONS' || method === 'HEAD' || method === 'GQL_QUERY';
 };
-const buildQueryCacheKey = (route, args) => {
+const buildQueryCacheKey$1 = (route, args) => {
     const variables = JSON.stringify(args?.variables || {})
         // replace all curly braces with empty string
         .replace(/{|}/g, '')
@@ -981,12 +1002,14 @@ const transformGql = (str) => {
     return function (variables) {
         const data = { query: str };
         if (variables)
-            data['variables'] = JSON.stringify(variables);
+            data['variables'] = variables;
         if (name && name.length) {
             const operationName = name[2];
             if (operationName)
                 data['operationName'] = name[2];
         }
+        // minify the query
+        data.query = data.query.replace(/\s+/g, ' ').trim();
         return data;
     };
 };
@@ -1241,6 +1264,36 @@ const paginatedEntityValueUpdater = (findFn) => ({ response, rawResponse, entity
 
 let _nextQueryId = 0;
 class Query {
+    _client;
+    _queryConfig;
+    _routeWithParams;
+    _arguments;
+    _queryStoreKey;
+    _id = _nextQueryId++;
+    _currentLocalId = 0;
+    _pollingSubscription = null;
+    _onAbort$ = new Subject();
+    _currentPollConfig = null;
+    /**
+     * @internal
+     * Used to track which components depend on this query.
+     * The key is the component's _tNode index.
+     * The value is the number of times the component has subscribed to this query.
+     * The value might increase since we cant distinguish between a component and a host directive applied to it.
+     */
+    _dependents = {};
+    /**
+     * @internal
+     */
+    _dependentsChanged$ = new ReplaySubject();
+    /**
+     * @internal
+     */
+    _isPollingPaused = false;
+    _state$ = new BehaviorSubject({
+        type: "PREPARED" /* QueryStateType.Prepared */,
+        meta: { id: this._currentLocalId, triggeredVia: 'program' },
+    });
     get _nextId() {
         return ++this._currentLocalId;
     }
@@ -1307,7 +1360,7 @@ class Query {
         return this._queryConfig.entity?.store ?? null;
     }
     get canBeCached() {
-        return shouldCacheQuery(this._queryConfig.method);
+        return shouldCacheQuery$1(this._queryConfig.method);
     }
     get _isInMockMode() {
         return !!this._arguments?.mock;
@@ -1334,31 +1387,6 @@ class Query {
         this._routeWithParams = _routeWithParams;
         this._arguments = _arguments;
         this._queryStoreKey = _queryStoreKey;
-        this._id = _nextQueryId++;
-        this._currentLocalId = 0;
-        this._pollingSubscription = null;
-        this._onAbort$ = new Subject();
-        this._currentPollConfig = null;
-        /**
-         * @internal
-         * Used to track which components depend on this query.
-         * The key is the component's _tNode index.
-         * The value is the number of times the component has subscribed to this query.
-         * The value might increase since we cant distinguish between a component and a host directive applied to it.
-         */
-        this._dependents = {};
-        /**
-         * @internal
-         */
-        this._dependentsChanged$ = new ReplaySubject();
-        /**
-         * @internal
-         */
-        this._isPollingPaused = false;
-        this._state$ = new BehaviorSubject({
-            type: "PREPARED" /* QueryStateType.Prepared */,
-            meta: { id: this._currentLocalId, triggeredVia: 'program' },
-        });
     }
     execute(options = {}) {
         const { skipCache = false, _triggeredVia: triggeredVia = 'program', cancelPrevious = false } = options;
@@ -1687,6 +1715,13 @@ const decryptBearer = (token) => {
 };
 
 class BearerAuthProvider {
+    _config;
+    _destroy$ = new Subject();
+    _currentRefreshQuery$ = new BehaviorSubject(null);
+    _tokens$ = new BehaviorSubject({
+        token: null,
+        refreshToken: null,
+    });
     get header() {
         return { Authorization: `Bearer ${this._tokens$.getValue().token}` };
     }
@@ -1709,12 +1744,6 @@ class BearerAuthProvider {
     }
     constructor(_config) {
         this._config = _config;
-        this._destroy$ = new Subject();
-        this._currentRefreshQuery$ = new BehaviorSubject(null);
-        this._tokens$ = new BehaviorSubject({
-            token: null,
-            refreshToken: null,
-        });
         const cookieEnabled = _config.refreshConfig?.cookieEnabled ?? true;
         const cookieToken = _config.refreshConfig?.cookieName && cookieEnabled ? (getCookie(_config.refreshConfig.cookieName) ?? null) : null;
         this._tokens$.next({
@@ -1855,25 +1884,22 @@ const isClassValidatorError = (error) => {
 };
 
 class QueryDirective {
-    constructor() {
-        this._mainTemplateRef = inject(TemplateRef);
-        this._viewContainerRef = inject(ViewContainerRef);
-        this._errorHandler = inject(ErrorHandler);
-        this._cdr = inject(ChangeDetectorRef);
-        this._isMainViewCreated = false;
-        this._subscription = null;
-        this._viewContext = {
-            $implicit: null,
-            etQuery: null,
-            loading: false,
-            refreshing: false,
-            error: null,
-            progress: null,
-            scope: null,
-            query: null,
-        };
-        this._cache = false;
-    }
+    _mainTemplateRef = inject(TemplateRef);
+    _viewContainerRef = inject(ViewContainerRef);
+    _errorHandler = inject(ErrorHandler);
+    _cdr = inject(ChangeDetectorRef);
+    _isMainViewCreated = false;
+    _subscription = null;
+    _viewContext = {
+        $implicit: null,
+        etQuery: null,
+        loading: false,
+        refreshing: false,
+        error: null,
+        progress: null,
+        scope: null,
+        query: null,
+    };
     get query() {
         return this._query;
     }
@@ -1881,12 +1907,14 @@ class QueryDirective {
         this._query = v;
         this._subscribeToQuery();
     }
+    _query;
     get cache() {
         return this._cache;
     }
     set cache(v) {
         this._cache = v;
     }
+    _cache = false;
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
@@ -1955,10 +1983,10 @@ class QueryDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etQuery]',
@@ -1973,6 +2001,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             }] } });
 
 class InfinityQuery {
+    _config;
+    _destroy$;
+    _queries$ = new BehaviorSubject([]);
+    _currentPage$ = new BehaviorSubject(null);
+    _currentCalculatedPage$ = new BehaviorSubject(null);
+    _totalPages$ = new BehaviorSubject(null);
+    _itemsPerPage$ = new BehaviorSubject(10);
+    _data$ = this._queries$.pipe(switchMap((queries) => {
+        if (!queries.length) {
+            return of([]);
+        }
+        return combineLatest(queries.map((query) => query.state$.pipe(filterSuccess(), map((state) => ({ state, query })))));
+    }), tap((stateMaps) => {
+        const lastState = stateMaps[stateMaps.length - 1]?.state;
+        const lastQuery = stateMaps[stateMaps.length - 1]?.query;
+        if (!lastState || !lastQuery) {
+            return;
+        }
+        const totalPages = this._config.response.totalPagesExtractor?.({
+            response: lastState.response,
+            itemsPerPage: this.itemsPerPage,
+            args: lastQuery._arguments,
+        }) ??
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            lastState.response?.totalPages ??
+            null;
+        this._totalPages$.next(totalPages);
+    }), map((stateMaps) => {
+        if (!stateMaps.length) {
+            return null;
+        }
+        const fullData = stateMaps.reduce((acc, stateMap) => {
+            const valExtractFn = this._config?.response?.valueExtractor;
+            let data = valExtractFn
+                ? valExtractFn?.(stateMap.state.response)
+                : stateMap.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 }));
+    _lastQuery$ = this._queries$.pipe(map((queries) => queries[queries.length - 1] ?? null), shareReplay({ bufferSize: 1, refCount: true }));
     get currentPage$() {
         return this._currentPage$.asObservable();
     }
@@ -2006,56 +2086,7 @@ class InfinityQuery {
     constructor(_config, _destroy$) {
         this._config = _config;
         this._destroy$ = _destroy$;
-        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._data$ = this._queries$.pipe(switchMap((queries) => {
-            if (!queries.length) {
-                return of([]);
-            }
-            return combineLatest(queries.map((query) => query.state$.pipe(filterSuccess(), map((state) => ({ state, query })))));
-        }), tap((stateMaps) => {
-            const lastState = stateMaps[stateMaps.length - 1]?.state;
-            const lastQuery = stateMaps[stateMaps.length - 1]?.query;
-            if (!lastState || !lastQuery) {
-                return;
-            }
-            const totalPages = this._config.response.totalPagesExtractor?.({
-                response: lastState.response,
-                itemsPerPage: this.itemsPerPage,
-                args: lastQuery._arguments,
-            }) ??
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                lastState.response?.totalPages ??
-                null;
-            this._totalPages$.next(totalPages);
-        }), map((stateMaps) => {
-            if (!stateMaps.length) {
-                return null;
-            }
-            const fullData = stateMaps.reduce((acc, stateMap) => {
-                const valExtractFn = this._config?.response?.valueExtractor;
-                let data = valExtractFn
-                    ? valExtractFn?.(stateMap.state.response)
-                    : stateMap.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 }));
+        this._itemsPerPage$.next(this._config.limitParam?.value ?? 10);
     }
     nextPage() {
         const newPage = (this._currentPage$.value ?? 0) + 1;
@@ -2147,6 +2178,28 @@ const skipPaginationPageParamCalculator = ({ page, itemsPerPage }) => itemsPerPa
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const INFINITY_QUERY_TOKEN = new InjectionToken('INFINITY_QUERY_TOKEN');
 class InfinityQueryDirective {
+    _queryConfigChanged$ = new Subject();
+    _viewContext = {
+        $implicit: null,
+        etInfinityQuery: null,
+        loading: false,
+        error: null,
+        isFirstLoad: false,
+        canLoadMore: false,
+        currentPage: null,
+        currentCalculatedPage: null,
+        totalPages: null,
+        itemsPerPage: null,
+        currentQuery: null,
+    };
+    _infinityQueryInstance = null;
+    _destroy$ = createDestroy();
+    _cdr = inject(ChangeDetectorRef);
+    _viewContainerRef = inject(ViewContainerRef);
+    _mainTemplateRef = inject((TemplateRef));
+    _errorHandler = inject(ErrorHandler);
+    _delayable = inject(DelayableDirective, { host: true });
+    _data$ = new BehaviorSubject([]);
     get infinityQuery() {
         return this._infinityQuery;
     }
@@ -2156,6 +2209,7 @@ class InfinityQueryDirective {
         this._infinityQueryInstance = this._setupInfinityQuery(v);
         this._infinityQueryInstance.nextPage();
     }
+    _infinityQuery;
     get context() {
         return this._viewContext;
     }
@@ -2165,33 +2219,11 @@ class InfinityQueryDirective {
     get data$() {
         return this._data$.asObservable();
     }
+    data = toSignal(this._data$, { requireSync: true });
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
     constructor() {
-        this._queryConfigChanged$ = new Subject();
-        this._viewContext = {
-            $implicit: null,
-            etInfinityQuery: null,
-            loading: false,
-            error: null,
-            isFirstLoad: false,
-            canLoadMore: false,
-            currentPage: null,
-            currentCalculatedPage: null,
-            totalPages: null,
-            itemsPerPage: null,
-            currentQuery: null,
-        };
-        this._infinityQueryInstance = null;
-        this._destroy$ = createDestroy();
-        this._cdr = inject(ChangeDetectorRef);
-        this._viewContainerRef = inject(ViewContainerRef);
-        this._mainTemplateRef = inject((TemplateRef));
-        this._errorHandler = inject(ErrorHandler);
-        this._delayable = inject(DelayableDirective, { host: true });
-        this._data$ = new BehaviorSubject([]);
-        this.data = toSignal(this._data$, { requireSync: true });
         this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
     }
     _setupInfinityQuery(config) {
@@ -2265,10 +2297,10 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etInfinityQuery]',
@@ -2283,14 +2315,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             }] } });
 
 class InfinityQueryTriggerDirective {
-    constructor() {
-        this._elementRef = inject((ElementRef));
-        this._infinityQuery = inject(INFINITY_QUERY_TOKEN);
-        this._destroy = new Subject();
-        this._observer = null;
-        this.click$ = fromEvent(this._elementRef.nativeElement, 'click');
-        this.scrollContainerSelector = null;
-    }
+    _elementRef = inject((ElementRef));
+    _infinityQuery = inject(INFINITY_QUERY_TOKEN);
+    _destroy = new Subject();
+    _observer = null;
+    click$ = fromEvent(this._elementRef.nativeElement, 'click');
+    scrollContainerSelector = null;
     ngOnInit() {
         const isInteractive = this._elementRef.nativeElement.tagName === 'BUTTON';
         if (isInteractive) {
@@ -2320,10 +2350,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etInfinityQueryTrigger], et-infinity-query-trigger',
@@ -2347,10 +2377,10 @@ class QueryShortNamePipe {
         }
         return route;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryShortNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'queryShortName', standalone: true }]
         }] });
@@ -2368,161 +2398,159 @@ const provideQueryClientForDevtools = (queryClient) => {
 };
 
 class QueryDevtoolsComponent {
-    constructor() {
-        this._cdr = inject(ChangeDetectorRef);
-        this._destroy$ = createDestroy();
-        this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
-        this.isOpen = signal(false);
-        this.isTranslucent = signal(false);
-        this.snapLayout = signal('full');
-        this.queryListMode = signal('live');
-        this.viewMode = signal('query');
-        this.showResponse = signal(false);
-        this.showRawResponse = signal(false);
-        this.showQueryConfig = signal(false);
-        this.showEntityStoreValue = signal(false);
-        this.showArguments = signal(false);
-        this.selectedClientIdCtrl = new FormControl(0);
-        this.selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
-        this.selectedQueryId = signal(null);
-        this.selectedClientConfig = computed(() => {
-            if (this.queryClientConfigs.length === 1) {
-                return this.queryClientConfigs[0];
-            }
-            const index = this.selectedClientId() ?? 0;
-            const cfg = this.queryClientConfigs[index];
-            if (!cfg) {
-                return this.queryClientConfigs[0];
-            }
-            return cfg;
-        });
-        this.queryStore = computed(() => {
-            const config = this.selectedClientConfig();
-            return config.client._store;
-        });
-        this.queryStore$ = toObservable(this.queryStore);
-        this._queries$ = new BehaviorSubject([]);
-        this.queries = toSignal(this._queries$);
-        this.selectedQuery = computed(() => {
-            const id = this.selectedQueryId();
-            const mode = this.queryListMode();
-            if (id === null || !mode) {
-                return null;
-            }
-            if (mode === 'live') {
-                return this.queries()?.find((q) => q._id === id) ?? null;
-            }
-            return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
-        });
-        this.selectedQuery$ = toObservable(this.selectedQuery);
-        this.selectedQueryEntityStore = computed(() => {
-            const query = this.selectedQuery();
-            if (!query)
-                return null;
-            return query.store;
-        });
-        this.selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
-        this.selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
-            if (!s._dictionary)
-                return null;
-            return Array.from(s._dictionary).reduce((obj, [key, value]) => {
-                obj[key] = value;
-                return obj;
-            }, {});
-        })) ?? of(null)));
-        this.queryHistory$ = new BehaviorSubject([]);
-        this.stringifiedQueryConfig = computed(() => {
-            const query = this.selectedQuery();
-            if (!query)
-                return null;
-            const cfg = query._queryConfig;
-            const route = typeof cfg.route === 'string' ? cfg.route : cfg.route ? cfg.route({}).replace(/undefined/g, ':param') : null;
-            const sharedCfg = {
-                method: cfg.method,
-                secure: cfg.secure,
-                route,
-                reportProgress: cfg.reportProgress,
-                responseType: cfg.responseType,
-                withCredentials: cfg.withCredentials,
-                autoRefreshOn: cfg.autoRefreshOn,
-                enableSmartPolling: cfg.enableSmartPolling,
-                hasEntityStore: !!cfg.entity,
-            };
-            if (isGqlQueryConfig(cfg)) {
-                return {
-                    ...sharedCfg,
-                    query: cfg.query,
-                    transferVia: cfg.transferVia,
-                };
-            }
+    _cdr = inject(ChangeDetectorRef);
+    _destroy$ = createDestroy();
+    queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
+    isOpen = signal(false);
+    isTranslucent = signal(false);
+    snapLayout = signal('full');
+    queryListMode = signal('live');
+    viewMode = signal('query');
+    showResponse = signal(false);
+    showRawResponse = signal(false);
+    showQueryConfig = signal(false);
+    showEntityStoreValue = signal(false);
+    showArguments = signal(false);
+    selectedClientIdCtrl = new FormControl(0);
+    selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
+    selectedQueryId = signal(null);
+    selectedClientConfig = computed(() => {
+        if (this.queryClientConfigs.length === 1) {
+            return this.queryClientConfigs[0];
+        }
+        const index = this.selectedClientId() ?? 0;
+        const cfg = this.queryClientConfigs[index];
+        if (!cfg) {
+            return this.queryClientConfigs[0];
+        }
+        return cfg;
+    });
+    queryStore = computed(() => {
+        const config = this.selectedClientConfig();
+        return config.client._store;
+    });
+    queryStore$ = toObservable(this.queryStore);
+    _queries$ = new BehaviorSubject([]);
+    queries = toSignal(this._queries$);
+    selectedQuery = computed(() => {
+        const id = this.selectedQueryId();
+        const mode = this.queryListMode();
+        if (id === null || !mode) {
+            return null;
+        }
+        if (mode === 'live') {
+            return this.queries()?.find((q) => q._id === id) ?? null;
+        }
+        return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
+    });
+    selectedQuery$ = toObservable(this.selectedQuery);
+    selectedQueryEntityStore = computed(() => {
+        const query = this.selectedQuery();
+        if (!query)
+            return null;
+        return query.store;
+    });
+    selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
+    selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
+        if (!s._dictionary)
+            return null;
+        return Array.from(s._dictionary).reduce((obj, [key, value]) => {
+            obj[key] = value;
+            return obj;
+        }, {});
+    })) ?? of(null)));
+    queryHistory$ = new BehaviorSubject([]);
+    stringifiedQueryConfig = computed(() => {
+        const query = this.selectedQuery();
+        if (!query)
+            return null;
+        const cfg = query._queryConfig;
+        const route = typeof cfg.route === 'string' ? cfg.route : cfg.route ? cfg.route({}).replace(/undefined/g, ':param') : null;
+        const sharedCfg = {
+            method: cfg.method,
+            secure: cfg.secure,
+            route,
+            reportProgress: cfg.reportProgress,
+            responseType: cfg.responseType,
+            withCredentials: cfg.withCredentials,
+            autoRefreshOn: cfg.autoRefreshOn,
+            enableSmartPolling: cfg.enableSmartPolling,
+            hasEntityStore: !!cfg.entity,
+        };
+        if (isGqlQueryConfig(cfg)) {
             return {
                 ...sharedCfg,
+                query: cfg.query,
+                transferVia: cfg.transferVia,
             };
-        });
-        this.authProvider = toSignal(toObservable(this.selectedClientConfig).pipe(switchMap((c) => c.client.authProvider$)));
-        this.authProviderDetails = computed(() => {
-            const provider = this.authProvider();
-            if (!provider)
-                return null;
-            if (provider instanceof CustomHeaderAuthProvider) {
-                return {
-                    type: 'CustomHeaderAuthProvider',
-                    header: () => provider.header,
-                    provider: provider,
-                    config: {
-                        name: provider._config.name,
-                        value: provider._config.value,
-                    },
-                };
-            }
-            else if (provider instanceof BasicAuthProvider) {
-                return {
-                    type: 'BasicAuthProvider',
-                    header: () => provider.header,
-                    provider: provider,
-                    config: {
-                        username: provider._config.username,
-                        password: provider._config.password,
-                    },
-                };
-            }
-            else if (isBearerAuthProvider(provider)) {
-                const refreshCfg = provider._config.refreshConfig;
-                return {
-                    type: 'BearerAuthProvider',
-                    header: () => provider.header,
-                    provider: provider,
-                    config: {
-                        token: provider._config.token,
-                        refreshConfig: {
-                            refreshOnUnauthorizedResponse: refreshCfg?.refreshOnUnauthorizedResponse ?? 'true (default)',
-                            token: refreshCfg?.token,
-                            cookieName: refreshCfg?.cookieName,
-                            cookieDomain: refreshCfg?.cookieDomain ?? 'current origin (default)',
-                            cookieExpiresInDays: refreshCfg?.cookieExpiresInDays ?? '30 (default)',
-                            cookiePath: refreshCfg?.cookiePath ?? '/ (default)',
-                            cookieEnabled: refreshCfg?.cookieEnabled ?? 'true (default)',
-                            cookieSameSite: refreshCfg?.cookieSameSite ?? 'lax (default)',
-                            refreshBuffer: refreshCfg?.refreshBuffer ?? '30000 (default)',
-                            expiresInPropertyName: refreshCfg?.expiresInPropertyName ?? 'exp (default)',
-                            strategy: refreshCfg?.strategy ?? 'AuthBearerRefreshStrategy.BeforeExpiration (default)',
-                            requestArgsAdapter: refreshCfg?.requestArgsAdapter ? 'custom' : 'default',
-                            responseAdapter: refreshCfg?.responseAdapter ? 'custom' : 'default',
-                        },
+        }
+        return {
+            ...sharedCfg,
+        };
+    });
+    authProvider = toSignal(toObservable(this.selectedClientConfig).pipe(switchMap((c) => c.client.authProvider$)));
+    authProviderDetails = computed(() => {
+        const provider = this.authProvider();
+        if (!provider)
+            return null;
+        if (provider instanceof CustomHeaderAuthProvider) {
+            return {
+                type: 'CustomHeaderAuthProvider',
+                header: () => provider.header,
+                provider: provider,
+                config: {
+                    name: provider._config.name,
+                    value: provider._config.value,
+                },
+            };
+        }
+        else if (provider instanceof BasicAuthProvider) {
+            return {
+                type: 'BasicAuthProvider',
+                header: () => provider.header,
+                provider: provider,
+                config: {
+                    username: provider._config.username,
+                    password: provider._config.password,
+                },
+            };
+        }
+        else if (isBearerAuthProvider(provider)) {
+            const refreshCfg = provider._config.refreshConfig;
+            return {
+                type: 'BearerAuthProvider',
+                header: () => provider.header,
+                provider: provider,
+                config: {
+                    token: provider._config.token,
+                    refreshConfig: {
+                        refreshOnUnauthorizedResponse: refreshCfg?.refreshOnUnauthorizedResponse ?? 'true (default)',
+                        token: refreshCfg?.token,
+                        cookieName: refreshCfg?.cookieName,
+                        cookieDomain: refreshCfg?.cookieDomain ?? 'current origin (default)',
+                        cookieExpiresInDays: refreshCfg?.cookieExpiresInDays ?? '30 (default)',
+                        cookiePath: refreshCfg?.cookiePath ?? '/ (default)',
+                        cookieEnabled: refreshCfg?.cookieEnabled ?? 'true (default)',
+                        cookieSameSite: refreshCfg?.cookieSameSite ?? 'lax (default)',
+                        refreshBuffer: refreshCfg?.refreshBuffer ?? '30000 (default)',
+                        expiresInPropertyName: refreshCfg?.expiresInPropertyName ?? 'exp (default)',
+                        strategy: refreshCfg?.strategy ?? 'AuthBearerRefreshStrategy.BeforeExpiration (default)',
+                        requestArgsAdapter: refreshCfg?.requestArgsAdapter ? 'custom' : 'default',
+                        responseAdapter: refreshCfg?.responseAdapter ? 'custom' : 'default',
                     },
-                };
-            }
-            else {
-                return {
-                    type: 'UnknownAuthProvider',
-                    header: () => provider.header,
-                    provider: provider,
-                    config: {},
-                };
-            }
-        });
-        this.trackByClient = (_, { client }) => client.config.baseRoute;
-        this.trackByQuery = (_, { _id }) => _id;
+                },
+            };
+        }
+        else {
+            return {
+                type: 'UnknownAuthProvider',
+                header: () => provider.header,
+                provider: provider,
+                config: {},
+            };
+        }
+    });
+    constructor() {
         this.selectedClientIdCtrl.valueChanges
             .pipe(tap(() => this.clearQueryHistory()), takeUntil(this._destroy$))
             .subscribe();
@@ -2602,6 +2630,8 @@ class QueryDevtoolsComponent {
             this.viewMode.set(parsed.viewMode ?? 'query');
         }
     }
+    trackByClient = (_, { client }) => client.config.baseRoute;
+    trackByQuery = (_, { _id }) => _id;
     toggleOpen() {
         this.isOpen.set(!this.isOpen());
     }
@@ -2641,10 +2671,10 @@ class QueryDevtoolsComponent {
     clearQueryHistory() {
         this.queryHistory$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Inspector</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live Queries ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history' && viewMode() === 'query') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n\n          <div class=\"et-qd-queries__divider\"></div>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n            (click)=\"selectViewMode('authProvider')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Auth Provider\n          </button>\n        </div>\n\n        @if (viewMode() === 'query') {\n          <div class=\"et-qd-queries__browser\">\n            @if (queryListMode() === 'live') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queries(); track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @if (queryListMode() === 'history') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            <div class=\"et-qd-queries__browser-detail\">\n              @if (selectedQuery(); as query) {\n                <p class=\"et-qd-queries__browser-detail__title\">\n                  {{ query._queryConfig.method }} {{ query._routeWithParams }}\n                </p>\n\n                <div class=\"et-qd-queries__actions\">\n                  <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                  <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                    Execute (ignore cache)\n                  </button>\n\n                  <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                  <div class=\"et-qd-queries__divider\"></div>\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                    (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Poll\n                  </button>\n\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                    (click)=\"query.stopPolling()\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Stop polling\n                  </button>\n                  @if (query.isPolling || query._isPollingPaused) {\n                    <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Pause polling\n                    </button>\n                    <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Resume polling\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-qd-list\">\n                  <div class=\"et-qd-list-item\">\n                    <p>State type</p>\n                    <pre>{{ query.rawState.type }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Dependents</p>\n                    <pre>{{ query._dependents | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is expired</p>\n                    <pre>{{ query.isExpired }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is in use</p>\n                    <pre>{{ query.isInUse }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Subscriber count</p>\n                    <pre>{{ query._subscriberCount }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling</p>\n                    <pre>{{ query.isPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling paused</p>\n                    <pre>{{ query._isPollingPaused }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Enable smart polling</p>\n                    <pre>{{ query._enableSmartPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query store key</p>\n                    <pre>{{ query._queryStoreKey }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Arguments</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                        (click)=\"toggleShowArguments()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showArguments()) {\n                      <pre>{{ query._arguments | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>State</p>\n                    <p><i> Warning, this will cause a subscription if shown!</i></p>\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                        (click)=\"toggleShowResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showResponse()) {\n                      <pre>{{ query.state$ | async | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Raw state</p>\n                    <p><i> The query state unaffected by entity stores</i></p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                        (click)=\"toggleShowRawResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showRawResponse()) {\n                      <pre>{{ query.rawState | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query config</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                        (click)=\"toggleShowQueryConfig()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showQueryConfig()) {\n                      <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                    }\n                  </div>\n\n                  @if (!!query._queryConfig.entity) {\n                    <div class=\"et-qd-list-item\">\n                      <p>Entity store value</p>\n\n                      <div>\n                        <button\n                          [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                          (click)=\"toggleShowEntityStoreValue()\"\n                          class=\"et-qd-chip et-qd-chip-bordered\"\n                        >\n                          Toggle\n                        </button>\n                      </div>\n                      @if (showEntityStoreValue()) {\n                        <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else if (viewMode() === 'authProvider') {\n          <div class=\"et-qd-auth-provider__viewer\">\n            @if (authProviderDetails(); as details) {\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>Type</p>\n                  <pre>{{ details.type }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Header value</p>\n                  <pre>{{ details.header() | json }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Config</p>\n                  <pre>{{ details.config | json }}</pre>\n                </div>\n\n                @if (details.type === 'BearerAuthProvider') {\n                  <div class=\"et-qd-list-item\">\n                    <p>Tokens</p>\n                    <pre>{{ details.provider.tokens$ | async | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Should refresh on unauthorized response</p>\n                    <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n                  </div>\n\n                  <ng-container\n                    *etQuery=\"\n                      details.provider.currentRefreshQuery$ | async as response;\n                      loading as loading;\n                      error as error;\n                      query as query\n                    \"\n                  >\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query response</p>\n\n                      <div>\n                        <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n                          Refresh\n                        </button>\n                      </div>\n                      <pre>{{ response | json }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query loading</p>\n                      <pre>{{ loading }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query error</p>\n                      <pre>{{ error ?? 'null' }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>State</p>\n                      <pre>{{ query?.state$ | async | json }}</pre>\n                    </div>\n                  </ng-container>\n                }\n              </div>\n            } @else {\n              <p>No auth provider set</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid rgb(59.734939759,66.1927710843,74.265060241);list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Inspector</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live Queries ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history' && viewMode() === 'query') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n\n          <div class=\"et-qd-queries__divider\"></div>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n            (click)=\"selectViewMode('authProvider')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Auth Provider\n          </button>\n        </div>\n\n        @if (viewMode() === 'query') {\n          <div class=\"et-qd-queries__browser\">\n            @if (queryListMode() === 'live') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queries(); track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @if (queryListMode() === 'history') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            <div class=\"et-qd-queries__browser-detail\">\n              @if (selectedQuery(); as query) {\n                <p class=\"et-qd-queries__browser-detail__title\">\n                  {{ query._queryConfig.method }} {{ query._routeWithParams }}\n                </p>\n\n                <div class=\"et-qd-queries__actions\">\n                  <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                  <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                    Execute (ignore cache)\n                  </button>\n\n                  <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                  <div class=\"et-qd-queries__divider\"></div>\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                    (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Poll\n                  </button>\n\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                    (click)=\"query.stopPolling()\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Stop polling\n                  </button>\n                  @if (query.isPolling || query._isPollingPaused) {\n                    <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Pause polling\n                    </button>\n                    <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Resume polling\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-qd-list\">\n                  <div class=\"et-qd-list-item\">\n                    <p>State type</p>\n                    <pre>{{ query.rawState.type }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Dependents</p>\n                    <pre>{{ query._dependents | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is expired</p>\n                    <pre>{{ query.isExpired }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is in use</p>\n                    <pre>{{ query.isInUse }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Subscriber count</p>\n                    <pre>{{ query._subscriberCount }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling</p>\n                    <pre>{{ query.isPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling paused</p>\n                    <pre>{{ query._isPollingPaused }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Enable smart polling</p>\n                    <pre>{{ query._enableSmartPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query store key</p>\n                    <pre>{{ query._queryStoreKey }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Arguments</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                        (click)=\"toggleShowArguments()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showArguments()) {\n                      <pre>{{ query._arguments | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>State</p>\n                    <p><i> Warning, this will cause a subscription if shown!</i></p>\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                        (click)=\"toggleShowResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showResponse()) {\n                      <pre>{{ query.state$ | async | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Raw state</p>\n                    <p><i> The query state unaffected by entity stores</i></p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                        (click)=\"toggleShowRawResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showRawResponse()) {\n                      <pre>{{ query.rawState | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query config</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                        (click)=\"toggleShowQueryConfig()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showQueryConfig()) {\n                      <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                    }\n                  </div>\n\n                  @if (!!query._queryConfig.entity) {\n                    <div class=\"et-qd-list-item\">\n                      <p>Entity store value</p>\n\n                      <div>\n                        <button\n                          [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                          (click)=\"toggleShowEntityStoreValue()\"\n                          class=\"et-qd-chip et-qd-chip-bordered\"\n                        >\n                          Toggle\n                        </button>\n                      </div>\n                      @if (showEntityStoreValue()) {\n                        <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else if (viewMode() === 'authProvider') {\n          <div class=\"et-qd-auth-provider__viewer\">\n            @if (authProviderDetails(); as details) {\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>Type</p>\n                  <pre>{{ details.type }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Header value</p>\n                  <pre>{{ details.header() | json }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Config</p>\n                  <pre>{{ details.config | json }}</pre>\n                </div>\n\n                @if (details.type === 'BearerAuthProvider') {\n                  <div class=\"et-qd-list-item\">\n                    <p>Tokens</p>\n                    <pre>{{ details.provider.tokens$ | async | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Should refresh on unauthorized response</p>\n                    <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n                  </div>\n\n                  <ng-container\n                    *etQuery=\"\n                      details.provider.currentRefreshQuery$ | async as response;\n                      loading as loading;\n                      error as error;\n                      query as query\n                    \"\n                  >\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query response</p>\n\n                      <div>\n                        <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n                          Refresh\n                        </button>\n                      </div>\n                      <pre>{{ response | json }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query loading</p>\n                      <pre>{{ loading }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query error</p>\n                      <pre>{{ error ?? 'null' }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>State</p>\n                      <pre>{{ query?.state$ | async | json }}</pre>\n                    </div>\n                  </ng-container>\n                }\n              </div>\n            } @else {\n              <p>No auth provider set</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid rgb(59.734939759,66.1927710843,74.265060241);list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         class: 'et-query-devtools',
@@ -2652,6 +2682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }], ctorParameters: () => [] });
 
 class EntityStoreError extends Error {
+    detail;
     constructor(message, detail) {
         super(message);
         this.detail = detail;
@@ -2662,16 +2693,17 @@ function flatten(arr) {
     return arr.reduce((acc, val) => acc.concat(val), []);
 }
 class EntityStore {
+    _config;
+    /**
+     * @internal
+     */
+    _dictionary = new Map();
+    /**
+     * @internal
+     */
+    _change$ = new Subject();
     constructor(_config) {
         this._config = _config;
-        /**
-         * @internal
-         */
-        this._dictionary = new Map();
-        /**
-         * @internal
-         */
-        this._change$ = new Subject();
     }
     select(keyOrKeys) {
         if (Array.isArray(keyOrKeys)) {
@@ -2806,71 +2838,74 @@ const removeFrom = (store, { where, id }) => {
 };
 
 const queryFeatureUsedMultipleTimes = (type) => {
-    return new RuntimeError(0 /* RuntimeErrorCode.QUERY_FEATURE_USED_MULTIPLE_TIMES */, `The query feature "${type}()" was used multiple times.`);
+    return new RuntimeError(0 /* QueryRuntimeErrorCode.QUERY_FEATURE_USED_MULTIPLE_TIMES */, `The query feature "${type}()" was used multiple times.`);
 };
 const withArgsQueryFeatureMissingButRouteIsFunction = () => {
-    return new RuntimeError(100 /* RuntimeErrorCode.WITH_ARGS_QUERY_FEATURE_MISSING_BUT_ROUTE_IS_FUNCTION */, `This queries route is a function, but a "withArgs()" feature is missing.`);
+    return new RuntimeError(100 /* QueryRuntimeErrorCode.WITH_ARGS_QUERY_FEATURE_MISSING_BUT_ROUTE_IS_FUNCTION */, `This queries route is a function, but a "withArgs()" feature is missing.`);
 };
 const withPollingUsedOnUnsupportedHttpMethod = (method) => {
-    return new RuntimeError(101 /* RuntimeErrorCode.WITH_POLLING_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withPolling()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
+    return new RuntimeError(101 /* QueryRuntimeErrorCode.WITH_POLLING_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withPolling()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
 };
 const withAutoRefreshUsedOnUnsupportedHttpMethod = (method) => {
-    return new RuntimeError(102 /* RuntimeErrorCode.WITH_AUTO_REFRESH_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withAutoRefresh()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
+    return new RuntimeError(102 /* QueryRuntimeErrorCode.WITH_AUTO_REFRESH_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withAutoRefresh()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
 };
 const withAutoRefreshUsedInManualQuery = () => {
-    return new RuntimeError(103 /* RuntimeErrorCode.WITH_AUTO_REFRESH_USED_IN_MANUAL_QUERY */, `"withAutoRefresh()" has been used inside a query that has "onlyManualExecution" set to true.` +
+    return new RuntimeError(103 /* QueryRuntimeErrorCode.WITH_AUTO_REFRESH_USED_IN_MANUAL_QUERY */, `"withAutoRefresh()" has been used inside a query that has "onlyManualExecution" set to true.` +
         ` If this is intentional, set "ignoreOnlyManualExecution" to true inside the auto refresh config.`);
 };
 const cookieLoginTriedButCookieDisabled = () => {
-    return new RuntimeError(200 /* RuntimeErrorCode.COOKIE_LOGIN_TRIED_BUT_COOKIE_DISABLED */, `Cookie login has been tried, but the cookie is disabled.`);
+    return new RuntimeError(200 /* QueryRuntimeErrorCode.COOKIE_LOGIN_TRIED_BUT_COOKIE_DISABLED */, `Cookie login has been tried, but the cookie is disabled.`);
 };
 const enableCookieCalledWithoutCookieConfig = () => {
-    return new RuntimeError(201 /* RuntimeErrorCode.ENABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `enableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
+    return new RuntimeError(201 /* QueryRuntimeErrorCode.ENABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `enableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
 };
 const disableCookieCalledWithoutCookieConfig = () => {
-    return new RuntimeError(202 /* RuntimeErrorCode.DISABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `disableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
+    return new RuntimeError(202 /* QueryRuntimeErrorCode.DISABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `disableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
 };
 const loginCalledWithoutConfig = () => {
-    return new RuntimeError(203 /* RuntimeErrorCode.LOGIN_CALLED_WITHOUT_CONFIG */, `login() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(203 /* QueryRuntimeErrorCode.LOGIN_CALLED_WITHOUT_CONFIG */, `login() has been called without a config. Please set it during the auth provider creation.`);
 };
 const loginWithTokenCalledWithoutConfig = () => {
-    return new RuntimeError(204 /* RuntimeErrorCode.LOGIN_WITH_TOKEN_CALLED_WITHOUT_CONFIG */, `loginWithToken() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(204 /* QueryRuntimeErrorCode.LOGIN_WITH_TOKEN_CALLED_WITHOUT_CONFIG */, `loginWithToken() has been called without a config. Please set it during the auth provider creation.`);
 };
 const refreshTokenCalledWithoutConfig = () => {
-    return new RuntimeError(205 /* RuntimeErrorCode.REFRESH_TOKEN_CALLED_WITHOUT_CONFIG */, `refreshToken() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(205 /* QueryRuntimeErrorCode.REFRESH_TOKEN_CALLED_WITHOUT_CONFIG */, `refreshToken() has been called without a config. Please set it during the auth provider creation.`);
 };
 const selectRoleCalledWithoutConfig = () => {
-    return new RuntimeError(206 /* RuntimeErrorCode.SELECT_ROLE_CALLED_WITHOUT_CONFIG */, `selectRole() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(206 /* QueryRuntimeErrorCode.SELECT_ROLE_CALLED_WITHOUT_CONFIG */, `selectRole() has been called without a config. Please set it during the auth provider creation.`);
 };
 const defaultResponseTransformerResponseNotObject = (currentType) => {
-    return new RuntimeError(207 /* RuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_OBJECT */, `The default response transformer expects the response to be an object, but it is a "${currentType}".`);
+    return new RuntimeError(207 /* QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_OBJECT */, `The default response transformer expects the response to be an object, but it is a "${currentType}".`);
 };
 const defaultResponseTransformerResponseNotContainingAccessToken = () => {
-    return new RuntimeError(208 /* RuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_ACCESS_TOKEN */, `The default response transformer expects the response to contain an "accessToken" property.`);
+    return new RuntimeError(208 /* QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_ACCESS_TOKEN */, `The default response transformer expects the response to contain an "accessToken" property.`);
 };
 const defaultResponseTransformerResponseNotContainingRefreshToken = () => {
-    return new RuntimeError(209 /* RuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_REFRESH_TOKEN */, `The default response transformer expects the response to contain a "refreshToken" property.`);
+    return new RuntimeError(209 /* QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_REFRESH_TOKEN */, `The default response transformer expects the response to contain a "refreshToken" property.`);
 };
 const unableToDecryptBearerToken = (token) => {
-    return new RuntimeError(210 /* RuntimeErrorCode.UNABLE_TO_DECRYPT_BEARER_TOKEN */, `The bearer token could not be decrypted: ${token}`);
+    return new RuntimeError(210 /* QueryRuntimeErrorCode.UNABLE_TO_DECRYPT_BEARER_TOKEN */, `The bearer token could not be decrypted: ${token}`);
 };
 const bearerExpiresInPropertyNotNumber = (expiresIn) => {
-    return new RuntimeError(211 /* RuntimeErrorCode.BEARER_EXPIRES_IN_PROPERTY_NOT_NUMBER */, `The expires in property is not a number: ${expiresIn}`);
+    return new RuntimeError(211 /* QueryRuntimeErrorCode.BEARER_EXPIRES_IN_PROPERTY_NOT_NUMBER */, `The expires in property is not a number: ${expiresIn}`);
 };
 const uncacheableRequestHasCacheKeyParam = (key) => {
-    return new RuntimeError(300 /* RuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_CACHE_KEY_PARAM */, `This request is uncacheable, but a cache key was provided: ${key}. Please remove it.`);
+    return new RuntimeError(300 /* QueryRuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_CACHE_KEY_PARAM */, `This request is uncacheable, but a cache key was provided: ${key}. Please remove it.`);
 };
-const uncacheableRequestHasSkipCacheParam = () => {
-    return new RuntimeError(301 /* RuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_SKIP_CACHE_PARAM */, `This request is uncacheable, but skipCache is set to true. Please remove it.`);
+const uncacheableRequestHasAllowCacheParam = () => {
+    return new RuntimeError(301 /* QueryRuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_ALLOW_CACHE_PARAM */, `This request is uncacheable, but allowCache is set to true. Please remove it.`);
 };
-const pagedQueryPageBiggerThanTotalPages = (page, totalPages) => {
-    return new RuntimeError(400 /* RuntimeErrorCode.PAGED_QUERY_PAGE_BIGGER_THAN_TOTAL_PAGES */, `The page "${page}" is bigger than the total pages "${totalPages}".`);
+const pagedQueryStackPageBiggerThanTotalPages = (page, totalPages) => {
+    return new RuntimeError(400 /* QueryRuntimeErrorCode.PAGED_QUERY_STACK_PAGE_BIGGER_THAN_TOTAL_PAGES */, `The page "${page}" is bigger than the total pages "${totalPages}".`);
 };
-const pagedQueryNextPageCalledWithoutPreviousPage = () => {
-    return new RuntimeError(401 /* RuntimeErrorCode.PAGED_QUERY_NEXT_PAGE_CALLED_WITHOUT_PREVIOUS_PAGE */, `fetchNextPage() has been called but the current page is not yet loaded. Please call it after the previous page has been loaded.`);
+const pagedQueryStackNextPageCalledWithoutPreviousPage = () => {
+    return new RuntimeError(401 /* QueryRuntimeErrorCode.PAGED_QUERY_STACK_NEXT_PAGE_CALLED_WITHOUT_PREVIOUS_PAGE */, `fetchNextPage() has been called but the current page is not yet loaded. Please call it after the previous page has been loaded.`);
 };
-const pagedQueryPreviousPageCalledButAlreadyAtFirstPage = () => {
-    return new RuntimeError(402 /* RuntimeErrorCode.PAGED_QUERY_PREVIOUS_PAGE_CALLED_BUT_ALREADY_AT_FIRST_PAGE */, `fetchPreviousPage() has been called but the current page is already the first page.`);
+const pagedQueryStackPreviousPageCalledButAlreadyAtFirstPage = () => {
+    return new RuntimeError(402 /* QueryRuntimeErrorCode.PAGED_QUERY_STACK_PREVIOUS_PAGE_CALLED_BUT_ALREADY_AT_FIRST_PAGE */, `fetchPreviousPage() has been called but the current page is already the first page.`);
+};
+const queryStackWithArgsUsed = () => {
+    return new RuntimeError(500 /* QueryRuntimeErrorCode.QUERY_STACK_WITH_ARGS_USED */, `withArgs() has been used in a query stack or a paged query stack. This is not supported.`);
 };
 
 const defaultResponseTransformer = (response) => {
@@ -3034,10 +3069,10 @@ const createBearerAuthProvider = (options) => {
     };
     const logout = () => {
         deleteCookie$1();
-        loginQuery?.query.execute.reset();
-        tokenLoginQuery?.query.execute.reset();
-        tokenRefreshQuery?.query.execute.reset();
-        selectRoleQuery?.query.execute.reset();
+        loginQuery?.query.reset();
+        tokenLoginQuery?.query.reset();
+        tokenRefreshQuery?.query.reset();
+        selectRoleQuery?.query.reset();
         latestNonInternalQuery.set(null);
     };
     const enableCookie = () => {
@@ -3129,29 +3164,81 @@ const createBearerAuthProviderConfig = (options) => {
     return bearerAuthProviderConfig;
 };
 
+const setupQueryState = (options) => {
+    const response = signal(null);
+    const args = signal(null);
+    const latestHttpEvent = signal(null);
+    const error = signal(null);
+    const loading = signal(null);
+    const lastTimeExecutedAt = signal(null);
+    const state = {
+        response,
+        args,
+        latestHttpEvent,
+        loading,
+        error,
+        lastTimeExecutedAt,
+    };
+    return state;
+};
+
+const createQuerySnapshotFn = (options) => {
+    const { state, deps } = options;
+    const snapshotFn = () => {
+        const snapshotState = setupQueryState({});
+        const isAlive = signal(true);
+        const killEffectRef = effect(() => {
+            const currentLoading = state.loading();
+            const currentError = state.error();
+            const currentResponse = state.response();
+            const currentArgs = state.args();
+            const currentLatestHttpEvent = state.latestHttpEvent();
+            const currentLastTimeExecutedAt = state.lastTimeExecutedAt();
+            untracked(() => {
+                snapshotState.args.set(currentArgs);
+                snapshotState.error.set(currentError);
+                snapshotState.lastTimeExecutedAt.set(currentLastTimeExecutedAt);
+                snapshotState.latestHttpEvent.set(currentLatestHttpEvent);
+                snapshotState.loading.set(currentLoading);
+                snapshotState.response.set(currentResponse);
+                if (currentLoading)
+                    return;
+                if (!currentResponse && !currentError)
+                    return;
+                // kill the effect once loading is done and we either have a response or an error
+                killEffectRef.destroy();
+                isAlive.set(false);
+            });
+        }, { injector: deps.injector });
+        const snapshot = {
+            args: snapshotState.args.asReadonly(),
+            response: snapshotState.response.asReadonly(),
+            latestHttpEvent: snapshotState.latestHttpEvent.asReadonly(),
+            loading: snapshotState.loading.asReadonly(),
+            error: snapshotState.error.asReadonly(),
+            lastTimeExecutedAt: snapshotState.lastTimeExecutedAt.asReadonly(),
+            isAlive: isAlive.asReadonly(),
+            id: normalizeQueryRepositoryKey(options.execute.currentRepositoryKey),
+        };
+        return snapshot;
+    };
+    return snapshotFn;
+};
+
 /**
- * Returning this inside e.g. a withComputedArgs feature will reset the query args to null.
+ * Returning this inside a withArgs feature will reset the query args to null.
  * This will also pause polling and auto refresh until new args are set.
  */
-const QUERY_ARGS_RESET = Symbol('QUERY_ARGS_RESET');
+const CLEAR_QUERY_ARGS = Symbol('CLEAR_QUERY_ARGS');
 const QUERY_EFFECT_ERROR_MESSAGE = 'Effect triggered too often. This is probably due to a circular dependency inside the query.';
 /** A angular effect that will throw an error in dev mode if it is called too often. This indicates a circular dependency inside the effect. */
 const queryEffect = (fn, errorMessage, options) => {
     let lastTriggerTs = 0;
     let illegalWrites = 0;
-    // The first run should be synchronous anf not depend on the angular scheduler
-    if (options?.injector) {
-        runInInjectionContext(options.injector, () => fn());
-    }
-    else {
-        fn();
-    }
     let isFirstRun = true;
-    return untracked(() => effect(() => {
-        if (isFirstRun) {
-            isFirstRun = false;
-            return;
-        }
+    const activeConsumer = getActiveConsumer();
+    setActiveConsumer(null);
+    const eff = effect(() => {
         if (isDevMode()) {
             const now = performance.now();
             if (now - lastTriggerTs < 100) {
@@ -3162,12 +3249,20 @@ const queryEffect = (fn, errorMessage, options) => {
             }
             lastTriggerTs = now;
         }
-        fn();
-    }, options));
+        fn(isFirstRun);
+        if (isFirstRun) {
+            isFirstRun = false;
+        }
+    }, options);
+    setActiveConsumer(activeConsumer);
+    return eff;
 };
 const shouldAutoExecuteQuery = (method) => {
     return method === 'GET' || method === 'HEAD' || method === 'OPTIONS';
 };
+const shouldAutoExecuteGqlQuery = (method) => {
+    return method === 'QUERY';
+};
 const extractExpiresInSeconds = (headers) => {
     const cacheControl = headers.get('cache-control');
     const age = headers.get('age');
@@ -3214,7 +3309,8 @@ const extractExpiresInSeconds = (headers) => {
     return expiresIn;
 };
 const shouldRetryRequest = (options) => {
-    const { retryCount, error } = options;
+    const normalizedOptions = options instanceof HttpErrorResponse ? { retryCount: 0, error: options } : options;
+    const { retryCount, error } = normalizedOptions;
     const defaultRetryDelay = 1000 + 1000 * retryCount;
     if (retryCount > 3) {
         return { retry: false };
@@ -3223,8 +3319,8 @@ const shouldRetryRequest = (options) => {
         return { retry: false };
     }
     const { status, error: detail, headers } = error;
-    // Retry on 5xx errors
-    if (status >= 500) {
+    // Retry on 5xx errors (except 500 internal server error since those are usually not recoverable)
+    if (status >= 501) {
         // Don't retry if a requested page is out of range
         if (isSymfonyPagerfantaOutOfRangeError(detail)) {
             return { retry: false };
@@ -3252,9 +3348,11 @@ const shouldRetryRequest = (options) => {
     return { retry: false };
 };
 const getQueryFeatureUsage = (options) => {
-    const { creator, creatorInternals, features, queryConfig } = options;
+    const { creator, features, queryConfig } = options;
     const hasWithArgsFeature = features.some((f) => f.type == "withArgs" /* QueryFeatureType.WithArgs */);
-    const shouldAutoExecuteMethod = shouldAutoExecuteQuery(creatorInternals.method);
+    const shouldAutoExecuteMethod = isCreateGqlQueryOptions(options)
+        ? shouldAutoExecuteGqlQuery(options.creatorInternals.method)
+        : shouldAutoExecuteQuery(options.creatorInternals.method);
     const shouldAutoExecute = shouldAutoExecuteMethod && !queryConfig.onlyManualExecution;
     const hasRouteFunction = typeof creator.route === 'function';
     if (hasRouteFunction && !hasWithArgsFeature) {
@@ -3265,12 +3363,16 @@ const getQueryFeatureUsage = (options) => {
         shouldAutoExecuteMethod,
         shouldAutoExecute,
         hasRouteFunction,
+        onlyManualExecution: queryConfig.onlyManualExecution,
+        method: isCreateGqlQueryOptions(options)
+            ? `GQL ${options.creatorInternals.method}`
+            : options.creatorInternals.method,
     };
     return featureFnContext;
 };
-const applyQueryFeatures = (options, context) => {
+const applyQueryFeatures = (features, context) => {
     const featureTypes = new Set();
-    for (const feature of options.features) {
+    for (const feature of features) {
         if (featureTypes.has(feature.type)) {
             throw queryFeatureUsedMultipleTimes(feature.type);
         }
@@ -3278,13 +3380,16 @@ const applyQueryFeatures = (options, context) => {
         feature.fn(context);
     }
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const maybeExecute = (options) => {
     if (options.flags.shouldAutoExecute && !options.flags.hasRouteFunction && !options.flags.hasWithArgsFeature) {
         options.execute();
     }
 };
 const createQueryObject = (options) => {
-    const { state, execute, createSnapshot, destroy } = options;
+    const { state, execute, deps } = options;
+    const destroy = () => deps.injector.destroy();
+    const createSnapshot = createQuerySnapshotFn({ state, deps, execute });
     const query = {
         execute,
         args: state.args.asReadonly(),
@@ -3293,12 +3398,44 @@ const createQueryObject = (options) => {
         loading: state.loading.asReadonly(),
         error: state.error.asReadonly(),
         lastTimeExecutedAt: state.lastTimeExecutedAt.asReadonly(),
-        id: execute.currentRepositoryKey,
+        id: normalizeQueryRepositoryKey(execute.currentRepositoryKey),
         createSnapshot,
-        destroy,
+        reset: execute.reset,
+        subtle: {
+            destroy,
+        },
     };
     return query;
 };
+const normalizeQueryRepositoryKey = (key) => computed(() => {
+    const k = key();
+    if (k === false) {
+        // false means the query cannot be cached and thus it is not stored in the repository
+        // We generate a random id in this case to avoid confusion
+        return crypto.randomUUID();
+    }
+    return k;
+});
+const shouldCacheQuery = (method) => {
+    return method === 'GET' || method === 'OPTIONS' || method === 'HEAD';
+};
+const buildQueryCacheKey = (route, args) => {
+    // We need to hash the body in case it's a gql query and the query get's transported in the body
+    const body = JSON.stringify(args?.body || {})
+        // replace all curly braces with empty string
+        .replace(/{|}/g, '')
+        // replace new lines and whitespaces with empty string
+        .replace(/\s/g, '');
+    const seed = `${route}_${body}`;
+    let hash = 0;
+    for (const char of seed) {
+        hash = (Math.imul(31, hash) + char.charCodeAt(0)) << 0;
+    }
+    // Force positive number hash.
+    // 2147483647 = equivalent of Integer.MAX_VALUE.
+    hash += 2147483647 + 1;
+    return hash.toString();
+};
 
 const SPEED_BUFFER_TIME_IN_MS = 2000;
 const createHttpRequest = (options) => {
@@ -3341,8 +3478,8 @@ const createHttpRequest = (options) => {
         return throwError(() => e);
     }));
     const execute = (options) => {
-        if (loading() || (!isStale() && !options?.skipCache)) {
-            // Do not execute if there is already a request in progress or the request is not stale
+        if (loading() || (!isStale() && options?.allowCache)) {
+            // Do not execute if there is already a request in progress or caching is allowed
             return false;
         }
         currentStreamSubscription.unsubscribe();
@@ -3451,6 +3588,15 @@ const createHttpRequest = (options) => {
 const createQueryFeature = (config) => {
     return config;
 };
+/**
+ * A query feature that allows you to set the arguments of the query.
+ * The arguments are read within a computed function, so you can use reactive values.
+ *
+ * To set the arguments to `null`, return the symbol `CLEAR_QUERY_ARGS`.
+ * If you instead return `null`, the arguments won't change.
+ *
+ * Changing arguments will automatically trigger a new execution of the query if it is eligible for auto execution (e.g. a GET request).
+ */
 const withArgs = (args) => {
     return createQueryFeature({
         type: "withArgs" /* QueryFeatureType.WithArgs */,
@@ -3461,7 +3607,7 @@ const withArgs = (args) => {
                 if (currArgsNow === null)
                     return;
                 untracked(() => {
-                    if (currArgsNow === QUERY_ARGS_RESET) {
+                    if (currArgsNow === CLEAR_QUERY_ARGS) {
                         context.state.args.set(null);
                         return;
                     }
@@ -3473,12 +3619,19 @@ const withArgs = (args) => {
         },
     });
 };
+/**
+ * A query feature that will automatically execute the query at a given interval.
+ * The interval will be cleared when the query is destroyed.
+ * The interval will be reset when the arguments of the query change.
+ *
+ * @throws If the query is not eligible for auto execution (e.g. a POST request)
+ */
 const withPolling = (options) => {
     return createQueryFeature({
         type: "withPolling" /* QueryFeatureType.WithPolling */,
         fn: (context) => {
             if (!context.flags.shouldAutoExecuteMethod) {
-                throw withPollingUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
+                throw withPollingUsedOnUnsupportedHttpMethod(context.flags.method);
             }
             let intervalId = null;
             queryEffect(() => {
@@ -3486,7 +3639,9 @@ const withPolling = (options) => {
                 untracked(() => {
                     if (intervalId !== null)
                         clearInterval(intervalId);
-                    if (args === null)
+                    // Don't start polling if the query doesn't have args.
+                    // It should have args because a withArgs feature is present.
+                    if (args === null && context.flags.hasWithArgsFeature)
                         return;
                     if (options.executeInitially) {
                         context.execute({ args });
@@ -3500,68 +3655,78 @@ const withPolling = (options) => {
         },
     });
 };
+/** A query feature that can be used to log the latest http event */
 const withLogging = (options) => {
     return createQueryFeature({
         type: "withLogging" /* QueryFeatureType.WithLogging */,
         fn: (context) => {
-            effect(() => {
+            queryEffect(() => {
                 const event = context.state.latestHttpEvent();
                 if (event === null)
                     return;
                 untracked(() => {
                     options.logFn(event);
                 });
-            }, { injector: context.deps.injector });
+            }, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
         },
     });
 };
+/** A query feature that can be used to handle errors */
 const withErrorHandling = (options) => {
     return createQueryFeature({
         type: "withErrorHandling" /* QueryFeatureType.WithErrorHandling */,
         fn: (context) => {
-            effect(() => {
+            queryEffect(() => {
                 const error = context.state.error();
                 if (error === null)
                     return;
                 untracked(() => {
                     options.handler(error);
                 });
-            }, { injector: context.deps.injector });
+            }, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
         },
     });
 };
+/** A query feature that can be used to handle successful responses */
 const withSuccessHandling = (options) => {
     return createQueryFeature({
         type: "withSuccessHandling" /* QueryFeatureType.WithSuccessHandling */,
         fn: (context) => {
-            effect(() => {
+            queryEffect(() => {
                 const response = context.state.response();
                 if (response === null)
                     return;
                 untracked(() => {
                     options.handler(response);
                 });
-            }, { injector: context.deps.injector });
+            }, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
         },
     });
 };
+/**
+ * A query feature that will automatically execute the query when any of the provided signals change
+ * @throws If the query is not eligible for auto execution (e.g. a POST request)
+ * @throws If the query has the `onlyManualExecution` query config flag set and `ignoreOnlyManualExecution` is not set
+ */
 const withAutoRefresh = (options) => {
     return createQueryFeature({
         type: "withAutoRefresh" /* QueryFeatureType.WithAutoRefresh */,
         fn: (context) => {
             if (!context.flags.shouldAutoExecuteMethod) {
-                throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
+                throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.flags.method);
             }
-            if (context.queryConfig.onlyManualExecution && !options.ignoreOnlyManualExecution) {
-                throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
+            if (context.flags.onlyManualExecution && !options.ignoreOnlyManualExecution) {
+                throw withAutoRefreshUsedInManualQuery();
             }
             queryEffect(() => {
-                for (const signal of options.signalChanges) {
+                for (const signal of options.onSignalChanges) {
                     signal();
                 }
                 untracked(() => {
                     const args = context.state.args();
-                    if (args === null)
+                    // Don't start polling if the query doesn't have args.
+                    // It should have args because a withArgs feature is present.
+                    if (args === null && context.flags.hasWithArgsFeature)
                         return;
                     context.execute({ args });
                 });
@@ -3570,10 +3735,12 @@ const withAutoRefresh = (options) => {
     });
 };
 
+/** Transforms an array of arrays into a single array and filters out `null` values. */
 const transformArrayResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r);
+/** Transforms an array of paginated responses into a single array and filters out `null` values. */
 const transformPaginatedResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r.items);
-const createQueryStack = (computation, options) => {
-    const { append = false, appendFn = (oldQueries, newQueries) => {
+const createQueryStack = (options) => {
+    const { args, queryCreator, dependencies, append, features = [], appendFn = (oldQueries, newQueries) => {
         const queries = [...oldQueries, ...newQueries];
         const lastQuery = newQueries[newQueries.length - 1] ?? oldQueries[oldQueries.length - 1] ?? null;
         return { queries, lastQuery };
@@ -3581,9 +3748,21 @@ const createQueryStack = (computation, options) => {
     const injector = inject(Injector);
     const queries = signal([]);
     const lastQuery = signal(null);
+    const hasWithArgsFeature = features.some((f) => f.type == "withArgs" /* QueryFeatureType.WithArgs */);
+    if (hasWithArgsFeature) {
+        throw queryStackWithArgsUsed();
+    }
+    effect(() => {
+        // Clear the stack if dependencies change
+        dependencies?.();
+        untracked(() => clear());
+    });
     effect(() => {
-        const newQueryOrQueries = runInInjectionContext(injector, () => computation());
-        const newQueries = Array.isArray(newQueryOrQueries) ? newQueryOrQueries : [newQueryOrQueries].filter((q) => !!q);
+        const newArgs = args(dependencies?.());
+        if (newArgs === null)
+            return;
+        const newArgsArray = Array.isArray(newArgs) ? newArgs : [newArgs];
+        const newQueries = runInInjectionContext(injector, () => newArgsArray.map((newArgsEntry) => queryCreator(withArgs(() => newArgsEntry), ...features)));
         untracked(() => {
             const oldQueries = queries();
             if (append) {
@@ -3594,7 +3773,7 @@ const createQueryStack = (computation, options) => {
             else {
                 for (const oldQuery of oldQueries) {
                     if (!newQueries.some((q) => q.id() === oldQuery.id())) {
-                        oldQuery.destroy();
+                        oldQuery.subtle.destroy();
                     }
                 }
                 queries.set(newQueries);
@@ -3612,12 +3791,12 @@ const createQueryStack = (computation, options) => {
     });
     const execute = (options) => {
         for (const query of queries()) {
-            query.execute({ options: { skipCache: options?.skipCache } });
+            query.execute({ options: { allowCache: options?.allowCache } });
         }
     };
     const clear = () => {
         for (const query of queries()) {
-            query.destroy();
+            query.subtle.destroy();
         }
         queries.set([]);
         lastQuery.set(null);
@@ -3676,23 +3855,31 @@ const contentfulGqlLikePaginationAdapter = (response) => {
     };
     return pagination;
 };
-const createPagedQuery = (options) => {
-    const { responseNormalizer, queryCreator } = options;
+const fakePaginationAdapter = (totalHits = 10) => {
+    return (response) => {
+        const pagination = {
+            items: [response],
+            totalPages: totalHits,
+            currentPage: 1,
+            itemsPerPage: 1,
+            totalHits,
+        };
+        return pagination;
+    };
+};
+const createPagedQueryStack = (options) => {
+    const { responseNormalizer, queryCreator, features } = options;
     const currentPageArgs = signal(null);
     const initialPage = signal(options.initialPage ?? 1);
     const loadedMinPage = signal(initialPage());
     const loadedMaxPage = signal(initialPage());
     const lastResetTimestamp = signal(Date.now());
     const pageDirection = signal('next');
-    const stack = createQueryStack(() => {
-        const args = currentPageArgs();
-        if (!args)
-            return null;
-        return queryCreator(withArgs(() => {
-            return args;
-        }));
-    }, {
+    const stack = createQueryStack({
+        args: () => currentPageArgs(),
+        queryCreator,
         append: true,
+        features,
         appendFn: (oldQueries, newQueries) => {
             const newQuery = newQueries[0];
             const dir = pageDirection();
@@ -3729,7 +3916,7 @@ const createPagedQuery = (options) => {
         const page = loadedMinPage() - 1;
         if (page < 1) {
             if (isDevMode()) {
-                throw pagedQueryPreviousPageCalledButAlreadyAtFirstPage();
+                throw pagedQueryStackPreviousPageCalledButAlreadyAtFirstPage();
             }
             return;
         }
@@ -3742,13 +3929,13 @@ const createPagedQuery = (options) => {
         const currentPagination = pagination();
         if (!currentPagination) {
             if (isDevMode()) {
-                throw pagedQueryNextPageCalledWithoutPreviousPage();
+                throw pagedQueryStackNextPageCalledWithoutPreviousPage();
             }
             return;
         }
         if (page > currentPagination.totalPages) {
             if (isDevMode()) {
-                throw pagedQueryPageBiggerThanTotalPages(page, currentPagination.totalPages);
+                throw pagedQueryStackPageBiggerThanTotalPages(page, currentPagination.totalPages);
             }
             return;
         }
@@ -3762,7 +3949,12 @@ const createPagedQuery = (options) => {
         pageDirection.set('next');
         lastResetTimestamp.set(Date.now());
     };
-    const canFetchPreviousPage = computed(() => loadedMinPage() > 1);
+    const canFetchPreviousPage = computed(() => {
+        const currentPagination = pagination();
+        if (!currentPagination)
+            return false;
+        return loadedMinPage() > 1;
+    });
     const canFetchNextPage = computed(() => {
         const currentPagination = pagination();
         return currentPagination ? loadedMaxPage() < currentPagination.totalPages : false;
@@ -3777,32 +3969,41 @@ const createPagedQuery = (options) => {
         return stack.queries().length === 1 && !!stack.lastQuery()?.loading();
     });
     const execute = (options) => {
-        if (options?.where) {
-            const queriesToExecute = [];
+        const whereFn = options?.where;
+        if (whereFn) {
+            const queriesToExecute = new Set();
             for (const [index, query] of stack.queries().entries()) {
-                // TODO: Use the where condition here.
-                if (query.response()) {
-                    queriesToExecute.push(query);
-                    if (index !== 0) {
-                        const prevQuery = stack.queries()[index - 1];
-                        if (prevQuery) {
-                            queriesToExecute.push(prevQuery);
+                const res = query.response();
+                const err = query.error();
+                const isErroredAndCanBeRetried = err && shouldRetryRequest(err);
+                if (isErroredAndCanBeRetried) {
+                    queriesToExecute.add(query);
+                }
+                else if (res) {
+                    if (responseNormalizer(res).items.some((item, i, a) => whereFn(item, i, a))) {
+                        queriesToExecute.add(query);
+                        // Also execute the previous and next query to the one that matched the condition.
+                        if (index !== 0) {
+                            const prevQuery = stack.queries()[index - 1];
+                            if (prevQuery) {
+                                queriesToExecute.add(prevQuery);
+                            }
                         }
-                    }
-                    if (index !== stack.queries().length - 1) {
-                        const nextQuery = stack.queries()[index + 1];
-                        if (nextQuery) {
-                            queriesToExecute.push(nextQuery);
+                        if (index !== stack.queries().length - 1) {
+                            const nextQuery = stack.queries()[index + 1];
+                            if (nextQuery) {
+                                queriesToExecute.add(nextQuery);
+                            }
                         }
                     }
                 }
             }
             for (const query of queriesToExecute) {
-                query.execute({ options: { skipCache: options.skipCache } });
+                query.execute({ options: { allowCache: options.allowCache } });
             }
         }
         else {
-            stack.execute({ skipCache: options?.skipCache });
+            stack.execute({ allowCache: options?.allowCache });
         }
     };
     const pagedQuery = {
@@ -3817,7 +4018,7 @@ const createPagedQuery = (options) => {
         error: stack.error,
         lastQuery: stack.lastQuery,
         isFirstLoad,
-        queries: stack.queries(),
+        queries: stack.queries,
         reset,
         execute,
     };
@@ -3828,12 +4029,32 @@ const setupQueryDependencies = (options) => {
     const environmentInjector = inject(EnvironmentInjector);
     const queryEnvironmentInjector = createEnvironmentInjector([], environmentInjector);
     const destroyRef = queryEnvironmentInjector.get(DestroyRef);
+    const scopeDestroyRef = inject(DestroyRef);
     const client = inject(options.clientConfig.token);
     const dependencies = {
         destroyRef,
+        scopeDestroyRef,
         client,
         injector: queryEnvironmentInjector,
     };
+    // cleanup the environment injector when the scope (e.g. the component the query is in) is destroyed
+    const scopeDestroyListener = scopeDestroyRef.onDestroy(() => {
+        try {
+            queryEnvironmentInjector.destroy();
+        }
+        catch {
+            // ignore
+        }
+    });
+    destroyRef.onDestroy(() => {
+        // cleanup the scope destroy listener
+        try {
+            scopeDestroyListener();
+        }
+        catch {
+            // ignore
+        }
+    });
     return dependencies;
 };
 
@@ -3856,7 +4077,7 @@ const setupQueryExecuteState = () => {
     };
 };
 const queryExecute = (options) => {
-    const { executeOptions, args, executeState, options: runQueryOptions } = options;
+    const { executeOptions, args, executeState, options: runQueryOptions, internalOptions: internalRunQueryOptions, transformResponse, } = options;
     const { deps, state, creator, creatorInternals, queryConfig } = executeOptions;
     const { key, request } = deps.client.repository.request({
         route: creator.route,
@@ -3871,11 +4092,13 @@ const queryExecute = (options) => {
         destroyRef: deps.destroyRef,
         key: queryConfig.key,
         previousKey: executeState.previousKey(),
+        internalRunQueryOptions,
         runQueryOptions,
     });
     executeState.previousKey.set(key);
+    const responseSignal = transformResponse ? computed(() => transformResponse(request.response())) : request.response;
     runInInjectionContext(deps.injector, () => {
-        const responseRef = syncSignal(request.response, state.response);
+        const responseRef = syncSignal(responseSignal, state.response);
         const loadingRef = syncSignal(request.loading, state.loading);
         const errorRef = syncSignal(request.error, state.error);
         const latestHttpEventRef = syncSignal(request.currentEvent, state.latestHttpEvent);
@@ -3902,88 +4125,22 @@ const createExecuteFn = (executeOptions) => {
     return exec;
 };
 
-const setupQueryState = (options) => {
-    const response = signal(null);
-    const args = signal(null);
-    const latestHttpEvent = signal(null);
-    const error = signal(null);
-    const loading = signal(null);
-    const lastTimeExecutedAt = signal(null);
-    const state = {
-        response,
-        args,
-        latestHttpEvent,
-        loading,
-        error,
-        lastTimeExecutedAt,
-    };
-    return state;
-};
-
-const createQuerySnapshotFn = (options) => {
-    const { state, deps } = options;
-    const snapshotFn = () => {
-        const snapshotState = setupQueryState({});
-        const isAlive = signal(true);
-        const killEffectRef = effect(() => {
-            const currentLoading = state.loading();
-            const currentError = state.error();
-            const currentResponse = state.response();
-            const currentArgs = state.args();
-            const currentLatestHttpEvent = state.latestHttpEvent();
-            const currentLastTimeExecutedAt = state.lastTimeExecutedAt();
-            untracked(() => {
-                snapshotState.args.set(currentArgs);
-                snapshotState.error.set(currentError);
-                snapshotState.lastTimeExecutedAt.set(currentLastTimeExecutedAt);
-                snapshotState.latestHttpEvent.set(currentLatestHttpEvent);
-                snapshotState.loading.set(currentLoading);
-                snapshotState.response.set(currentResponse);
-                if (currentLoading)
-                    return;
-                if (!currentResponse && !currentError)
-                    return;
-                // kill the effect once loading is done and we either have a response or an error
-                killEffectRef.destroy();
-                isAlive.set(false);
-            });
-        }, { injector: deps.injector });
-        const snapshot = {
-            args: snapshotState.args.asReadonly(),
-            response: snapshotState.response.asReadonly(),
-            latestHttpEvent: snapshotState.latestHttpEvent.asReadonly(),
-            loading: snapshotState.loading.asReadonly(),
-            error: snapshotState.error.asReadonly(),
-            lastTimeExecutedAt: snapshotState.lastTimeExecutedAt.asReadonly(),
-            isAlive: isAlive.asReadonly(),
-            id: options.execute.currentRepositoryKey,
-        };
-        return snapshot;
-    };
-    return snapshotFn;
-};
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const createQuery = (options) => {
     const deps = setupQueryDependencies({ clientConfig: options.creatorInternals.client });
     const state = setupQueryState({});
     const { creator, creatorInternals, queryConfig } = options;
     const flags = getQueryFeatureUsage(options);
-    const execute = createExecuteFn({ deps, state, creator, creatorInternals, queryConfig: options.queryConfig });
-    const createSnapshot = createQuerySnapshotFn({ state, deps, execute });
-    const destroy = () => deps.injector.destroy();
+    const execute = createExecuteFn({ deps, state, creator, creatorInternals, queryConfig });
     const featureFnContext = {
         state,
-        queryConfig,
-        creatorConfig: creator,
-        creatorInternals,
         execute,
         flags,
         deps,
     };
-    applyQueryFeatures(options, featureFnContext);
+    applyQueryFeatures(options.features, featureFnContext);
     maybeExecute({ execute, flags });
-    return createQueryObject({ state, execute, createSnapshot, destroy });
+    return createQueryObject({ state, execute, deps });
 };
 
 const createQueryRepository = (config) => {
@@ -3991,11 +4148,13 @@ const createQueryRepository = (config) => {
     const cache = new Map();
     const request = (options) => {
         const { args, clientOptions, runQueryOptions } = options;
-        const shouldCache = shouldCacheQuery(options.method);
+        const shouldCache = options.internalRunQueryOptions?.useQueryRepositoryCache === false
+            ? false
+            : shouldCacheQuery(options.method) || options.internalRunQueryOptions?.useQueryRepositoryCache === true;
         if (!shouldCache && options.key)
             throw uncacheableRequestHasCacheKeyParam(options.key);
-        if (!shouldCache && runQueryOptions?.skipCache)
-            throw uncacheableRequestHasSkipCacheParam();
+        if (!shouldCache && runQueryOptions?.allowCache)
+            throw uncacheableRequestHasAllowCacheParam();
         const route = buildRoute({
             base: config.baseUrl,
             route: options.route,
@@ -4008,8 +4167,7 @@ const createQueryRepository = (config) => {
                 body: args?.body,
                 queryParams: args?.queryParams,
                 pathParams: args?.pathParams,
-                // TODO: remaining props
-                // headers: args?.headers,
+                headers: args?.headers,
             });
         const previousKey = options.previousKey;
         if (key !== previousKey && previousKey) {
@@ -4019,8 +4177,8 @@ const createQueryRepository = (config) => {
             const cacheEntry = cache.get(key);
             if (cacheEntry) {
                 bind(key, options.destroyRef, cacheEntry.request);
-                if (runQueryOptions?.skipCache || cacheEntry.request.isStale()) {
-                    cacheEntry.request.execute({ skipCache: runQueryOptions?.skipCache });
+                if (!runQueryOptions?.allowCache || cacheEntry.request.isStale()) {
+                    cacheEntry.request.execute({ allowCache: runQueryOptions?.allowCache });
                 }
                 return { key, request: cacheEntry.request };
             }
@@ -4091,6 +4249,10 @@ const provideQueryClient = (config) => {
     };
 };
 
+/**
+ * This function creates a query client config.
+ * The config is used to create a query client using the `provideQueryClient(myConfig)` function.
+ */
 const createQueryClientConfig = (options) => {
     const token = new InjectionToken(`QueryClient_${options.name}`);
     const clientConfig = {
@@ -4098,6 +4260,9 @@ const createQueryClientConfig = (options) => {
         token,
         name: options.name,
         queryString: options.queryString,
+        // createHttpRequest will use fallbacks if these are not provided
+        cacheAdapter: options.cacheAdapter,
+        retryFn: options.retryFn,
     };
     return clientConfig;
 };
@@ -4214,22 +4379,17 @@ const createSecureQuery = (options) => {
         state,
         creator,
         creatorInternals,
-        queryConfig: options.queryConfig,
+        queryConfig,
     });
-    const createSnapshot = createQuerySnapshotFn({ state, deps, execute });
-    const destroy = () => deps.injector.destroy();
     const featureFnContext = {
+        deps,
         state,
-        queryConfig,
-        creatorConfig: creator,
-        creatorInternals,
         execute,
         flags,
-        deps,
     };
-    applyQueryFeatures(options, featureFnContext);
+    applyQueryFeatures(options.features, featureFnContext);
     maybeExecute({ execute, flags });
-    return createQueryObject({ state, execute, createSnapshot, destroy });
+    return createQueryObject({ state, execute, deps });
 };
 
 const createSecureQueryCreator = (options, internals) => {
@@ -4245,44 +4405,275 @@ const createSecureQueryCreator = (options, internals) => {
     return queryCreator;
 };
 
+/** A query creator that creates a GET query */
 const createGetQuery = (client) => {
     return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'GET', client });
 };
+/** A query creator that creates a secure GET query (requires authentication) */
 const createSecureGetQuery = (client, authProvider) => {
     return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'GET', client, authProvider });
 };
+/** A query creator that creates a POST query */
 const createPostQuery = (client) => {
     return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'POST', client });
 };
+/** A query creator that creates a secure POST query (requires authentication) */
 const createSecurePostQuery = (client, authProvider) => {
     return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'POST', client, authProvider });
 };
+/** A query creator that creates a PUT query */
 const createPutQuery = (client) => {
     return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'PUT', client });
 };
+/** A query creator that creates a secure PUT query (requires authentication) */
 const createSecurePutQuery = (client, authProvider) => {
     return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'PUT', client, authProvider });
 };
+/** A query creator that creates a DELETE query */
 const createDeleteQuery = (client) => {
     return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'DELETE', client });
 };
+/** A query creator that creates a secure DELETE query (requires authentication) */
 const createSecureDeleteQuery = (client, authProvider) => {
     return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'DELETE', client, authProvider });
 };
+/** A query creator that creates a PATCH query */
 const createPatchQuery = (client) => {
     return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'PATCH', client });
 };
+/** A query creator that creates a secure PATCH query (requires authentication) */
 const createSecurePatchQuery = (client, authProvider) => {
     return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'PATCH', client, authProvider });
 };
 
+const createGqlExecuteFn = (executeOptions) => {
+    const executeState = setupQueryExecuteState();
+    const reset = () => resetExecuteState({ executeState, executeOptions });
+    const exec = (executeArgs) => {
+        const { args = executeOptions.state.args(), options } = executeArgs ?? {};
+        cleanupPreviousExecute({ executeOptions, executeState });
+        // TODO: This should get cleaned up
+        const tpl = executeOptions.creator.query;
+        const query = transformGql(tpl);
+        let gqlParams = query(args?.variables);
+        if (args?.queryParams && executeOptions.creatorInternals.transport === 'GET') {
+            gqlParams = { ...gqlParams, ...args.queryParams };
+        }
+        const computedArgs = args ?? {};
+        if (executeOptions.creatorInternals.transport === 'GET') {
+            computedArgs.queryParams = gqlParams;
+        }
+        else {
+            computedArgs.body = gqlParams;
+        }
+        const normalizedOpts = {
+            creator: {
+                route: (executeOptions.creator.route ?? ''),
+            },
+            creatorInternals: {
+                client: executeOptions.creatorInternals.client,
+                method: executeOptions.creatorInternals.transport,
+            },
+            deps: executeOptions.deps,
+            queryConfig: executeOptions.queryConfig,
+            state: executeOptions.state,
+        };
+        queryExecute({
+            executeOptions: normalizedOpts,
+            executeState,
+            args: computedArgs,
+            options,
+            internalOptions: {
+                useQueryRepositoryCache: executeOptions.creatorInternals.method === 'QUERY',
+            },
+            transformResponse: (originalResponse) => {
+                if (originalResponse && 'data' in originalResponse) {
+                    return originalResponse.data;
+                }
+                return originalResponse;
+            },
+        });
+    };
+    exec['reset'] = reset;
+    exec['currentRepositoryKey'] = executeState.previousKey.asReadonly();
+    return exec;
+};
+
+const isCreateGqlQueryOptions = (options) => {
+    return 'transport' in options.creatorInternals;
+};
+const createGqlQuery = (options) => {
+    const deps = setupQueryDependencies({ clientConfig: options.creatorInternals.client });
+    const state = setupQueryState({});
+    const { creator, creatorInternals, queryConfig } = options;
+    const flags = getQueryFeatureUsage(options);
+    const execute = createGqlExecuteFn({
+        deps,
+        state,
+        creator,
+        creatorInternals,
+        queryConfig,
+    });
+    const featureFnContext = {
+        state,
+        execute,
+        flags,
+        deps,
+    };
+    applyQueryFeatures(options.features, featureFnContext);
+    maybeExecute({ execute, flags });
+    return createQueryObject({ state, execute, deps });
+};
+
+const createGqlQueryCreator = (options, internals) => {
+    function queryCreator(...args) {
+        const { features, queryConfig } = splitQueryConfig(args);
+        return createGqlQuery({
+            creator: options,
+            creatorInternals: internals,
+            features,
+            queryConfig,
+        });
+    }
+    return queryCreator;
+};
+
+/** A query creator that creates a GQL query where the payload is sent via GET (query params) */
+const createGqlQueryViaGet = (client) => {
+    return (creatorOptions) => createGqlQueryCreator(creatorOptions, { method: 'QUERY', client, transport: 'GET' });
+};
+/** A query creator that creates a GQL query where the payload is sent via POST (body) */
+const createGqlQueryViaPost = (client) => {
+    return (creatorOptions) => createGqlQueryCreator(creatorOptions, { method: 'QUERY', client, transport: 'POST' });
+};
+/** A query creator that creates a GQL mutation where the payload is sent via GET (query params) */
+const createGqlMutationViaGet = (client) => {
+    return (creatorOptions) => createGqlQueryCreator(creatorOptions, { method: 'MUTATE', client, transport: 'GET' });
+};
+/** A query creator that creates a GQL mutation where the payload is sent via POST (body) */
+const createGqlMutationViaPost = (client) => {
+    return (creatorOptions) => createGqlQueryCreator(creatorOptions, { method: 'MUTATE', client, transport: 'POST' });
+};
+
+const roomAlreadyJoined = (room) => {
+    return new RuntimeError(1000 /* QueryRuntimeErrorCode.ROOM_ALREADY_JOINED */, `Tried joining the room "${room}" but it has already been joined.`);
+};
+const roomNotJoined = (room) => {
+    return new RuntimeError(1001 /* QueryRuntimeErrorCode.ROOM_NOT_JOINED */, `Tried leaving the room "${room}" but it has not been joined.`);
+};
+const messageMalformed = () => {
+    return new RuntimeError(1002 /* QueryRuntimeErrorCode.MESSAGE_MALFORMED */, 'A message has been received but it is malformed (cannot be parsed as JSON).');
+};
+
+const createWebSocketClient = (config) => {
+    const joinedRooms = new Set();
+    const socket = io(config.url, {
+        withCredentials: true,
+        autoConnect: false,
+    });
+    const currentEvent = signal(null);
+    const isConnected = signal(false);
+    const joinRoom = (room) => {
+        if (joinedRooms.has(room)) {
+            if (isDevMode())
+                throw roomAlreadyJoined(room);
+            return;
+        }
+        socket.emit('join-room', room);
+        joinedRooms.add(room);
+    };
+    const joinComputedRoom = (room) => {
+        const pre = previousSignalValue(computed(() => room()));
+        effect(() => {
+            const current = room();
+            untracked(() => {
+                const previous = pre();
+                if (previous === current)
+                    return;
+                if (previous)
+                    leaveRoom(previous);
+                if (current)
+                    joinRoom(current);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            const current = room();
+            if (current)
+                leaveRoom(current);
+        });
+    };
+    const leaveRoom = (room) => {
+        if (!joinedRooms.has(room)) {
+            if (isDevMode())
+                throw roomNotJoined(room);
+            return;
+        }
+        socket.emit('leave-room', room);
+        joinedRooms.delete(room);
+    };
+    const leaveAllRooms = () => {
+        joinedRooms.forEach((room) => leaveRoom(room));
+        joinedRooms.clear();
+    };
+    const setupWebSocketConnectionListener = () => {
+        socket.on('connect', () => {
+            isConnected.set(true);
+            joinedRooms.forEach((room) => joinRoom(room));
+        });
+        socket.on('disconnect', () => isConnected.set(false));
+    };
+    const setupWebSocketListener = () => {
+        socket.onAny((data) => {
+            try {
+                const json = JSON.parse(data);
+                currentEvent.set(json);
+            }
+            catch (error) {
+                console.error(error);
+                if (isDevMode())
+                    throw messageMalformed();
+            }
+        });
+    };
+    inject(DestroyRef).onDestroy(() => socket.disconnect());
+    setupWebSocketConnectionListener();
+    setupWebSocketListener();
+    socket.connect();
+    const client = {
+        joinRoom,
+        joinComputedRoom,
+        leaveRoom,
+        leaveAllRooms,
+        currentEvent: currentEvent.asReadonly(),
+        isConnected: isConnected.asReadonly(),
+    };
+    return client;
+};
+const provideWebSocketClient = (config) => {
+    return {
+        provide: config.token,
+        useFactory: () => createWebSocketClient(config),
+    };
+};
+
+const createWebSocketClientConfig = (options) => {
+    const token = new InjectionToken(`WebSocketClient_${options.name}`);
+    const clientConfig = {
+        token,
+        name: options.name,
+        url: options.url,
+    };
+    return clientConfig;
+};
+
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    QUERY_ARGS_RESET: QUERY_ARGS_RESET,
+    CLEAR_QUERY_ARGS: CLEAR_QUERY_ARGS,
     QUERY_EFFECT_ERROR_MESSAGE: QUERY_EFFECT_ERROR_MESSAGE,
     SPEED_BUFFER_TIME_IN_MS: SPEED_BUFFER_TIME_IN_MS,
     applyQueryFeatures: applyQueryFeatures,
     bearerExpiresInPropertyNotNumber: bearerExpiresInPropertyNotNumber,
+    buildQueryCacheKey: buildQueryCacheKey,
     cleanupPreviousExecute: cleanupPreviousExecute,
     contentfulGqlLikePaginationAdapter: contentfulGqlLikePaginationAdapter,
     cookieLoginTriedButCookieDisabled: cookieLoginTriedButCookieDisabled,
@@ -4291,8 +4682,15 @@ var index = /*#__PURE__*/Object.freeze({
     createDeleteQuery: createDeleteQuery,
     createExecuteFn: createExecuteFn,
     createGetQuery: createGetQuery,
+    createGqlExecuteFn: createGqlExecuteFn,
+    createGqlMutationViaGet: createGqlMutationViaGet,
+    createGqlMutationViaPost: createGqlMutationViaPost,
+    createGqlQuery: createGqlQuery,
+    createGqlQueryCreator: createGqlQueryCreator,
+    createGqlQueryViaGet: createGqlQueryViaGet,
+    createGqlQueryViaPost: createGqlQueryViaPost,
     createHttpRequest: createHttpRequest,
-    createPagedQuery: createPagedQuery,
+    createPagedQueryStack: createPagedQueryStack,
     createPatchQuery: createPatchQuery,
     createPostQuery: createPostQuery,
     createPutQuery: createPutQuery,
@@ -4312,6 +4710,8 @@ var index = /*#__PURE__*/Object.freeze({
     createSecurePutQuery: createSecurePutQuery,
     createSecureQuery: createSecureQuery,
     createSecureQueryCreator: createSecureQueryCreator,
+    createWebSocketClient: createWebSocketClient,
+    createWebSocketClientConfig: createWebSocketClientConfig,
     defaultResponseTransformerResponseNotContainingAccessToken: defaultResponseTransformerResponseNotContainingAccessToken,
     defaultResponseTransformerResponseNotContainingRefreshToken: defaultResponseTransformerResponseNotContainingRefreshToken,
     defaultResponseTransformerResponseNotObject: defaultResponseTransformerResponseNotObject,
@@ -4320,33 +4720,40 @@ var index = /*#__PURE__*/Object.freeze({
     enableCookieCalledWithoutCookieConfig: enableCookieCalledWithoutCookieConfig,
     ethletePaginationAdapter: ethletePaginationAdapter,
     extractExpiresInSeconds: extractExpiresInSeconds,
+    fakePaginationAdapter: fakePaginationAdapter,
     getQueryFeatureUsage: getQueryFeatureUsage,
     ggLikePaginationAdapter: ggLikePaginationAdapter,
+    isCreateGqlQueryOptions: isCreateGqlQueryOptions,
     loginCalledWithoutConfig: loginCalledWithoutConfig,
     loginWithTokenCalledWithoutConfig: loginWithTokenCalledWithoutConfig,
     maybeExecute: maybeExecute,
-    pagedQueryNextPageCalledWithoutPreviousPage: pagedQueryNextPageCalledWithoutPreviousPage,
-    pagedQueryPageBiggerThanTotalPages: pagedQueryPageBiggerThanTotalPages,
-    pagedQueryPreviousPageCalledButAlreadyAtFirstPage: pagedQueryPreviousPageCalledButAlreadyAtFirstPage,
+    normalizeQueryRepositoryKey: normalizeQueryRepositoryKey,
+    pagedQueryStackNextPageCalledWithoutPreviousPage: pagedQueryStackNextPageCalledWithoutPreviousPage,
+    pagedQueryStackPageBiggerThanTotalPages: pagedQueryStackPageBiggerThanTotalPages,
+    pagedQueryStackPreviousPageCalledButAlreadyAtFirstPage: pagedQueryStackPreviousPageCalledButAlreadyAtFirstPage,
     provideBearerAuthProvider: provideBearerAuthProvider,
     provideQueryClient: provideQueryClient,
+    provideWebSocketClient: provideWebSocketClient,
     queryEffect: queryEffect,
     queryExecute: queryExecute,
     queryFeatureUsedMultipleTimes: queryFeatureUsedMultipleTimes,
+    queryStackWithArgsUsed: queryStackWithArgsUsed,
     refreshTokenCalledWithoutConfig: refreshTokenCalledWithoutConfig,
     resetExecuteState: resetExecuteState,
     selectRoleCalledWithoutConfig: selectRoleCalledWithoutConfig,
     setupQueryDependencies: setupQueryDependencies,
     setupQueryExecuteState: setupQueryExecuteState,
     setupQueryState: setupQueryState,
+    shouldAutoExecuteGqlQuery: shouldAutoExecuteGqlQuery,
     shouldAutoExecuteQuery: shouldAutoExecuteQuery,
+    shouldCacheQuery: shouldCacheQuery,
     shouldRetryRequest: shouldRetryRequest,
     splitQueryConfig: splitQueryConfig,
     transformArrayResponse: transformArrayResponse,
     transformPaginatedResponse: transformPaginatedResponse,
     unableToDecryptBearerToken: unableToDecryptBearerToken,
+    uncacheableRequestHasAllowCacheParam: uncacheableRequestHasAllowCacheParam,
     uncacheableRequestHasCacheKeyParam: uncacheableRequestHasCacheKeyParam,
-    uncacheableRequestHasSkipCacheParam: uncacheableRequestHasSkipCacheParam,
     withArgs: withArgs,
     withArgsQueryFeatureMissingButRouteIsFunction: withArgsQueryFeatureMissingButRouteIsFunction,
     withAutoRefresh: withAutoRefresh,
@@ -4458,6 +4865,7 @@ const transformToSortQueryParam = (value) => {
 
 const ET_ARR_PREFIX = 'ET_ARR__';
 class QueryField {
+    data;
     get control() {
         return this.data.control;
     }
@@ -4468,12 +4876,70 @@ class QueryField {
 const IGNORED_FILTER_COUNT_FIELDS = ['page', 'skip', 'take', 'limit', 'sort', 'sortBy', 'sortOrder', 'query', 'search'];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 class QueryForm {
+    _fields;
+    _options;
+    _destroy$ = createDestroy();
+    _unobserveTrigger$ = new Subject();
+    _router = inject(Router);
+    _activatedRoute = inject(ActivatedRoute);
+    _defaultValues = this._extractDefaultValues();
+    _zone = inject(NgZone);
+    _didValueChanges$ = new Subject();
+    _isObserving = false;
+    _skipNextResets = false;
+    _queryParamChanges$ = toObservable(injectQueryParamChanges());
+    _queryParams = injectQueryParams();
+    /**
+     * The angular form group that contains all the fields.
+     *
+     * **Do not** use any of the following methods on this form group:
+     * - `setValue`: Use `QueryForm.setValue` instead.
+     * - `patchValue`: Use `QueryForm.patchValue` instead.
+     * - `valueChanges`: Use `QueryForm.changes$` instead.
+     * - `value`: Use `QueryForm.value` instead.
+     * - `controls`: Use `QueryForm.controls` instead.
+     */
+    form = this._setupFormGroup();
+    _lastFormValue$ = new BehaviorSubject(null);
+    _currentFormValue$ = new BehaviorSubject(this._formValue);
     get _formValue() {
         return this.form.getRawValue();
     }
     get _form() {
         return this.form;
     }
+    _changes$ = new BehaviorSubject({
+        previousValue: null,
+        currentValue: this.form.getRawValue(),
+    });
+    changes$ = this._changes$.asObservable();
+    currentValue$ = this._changes$.pipe(map(({ currentValue }) => currentValue));
+    previousValue$ = this._changes$.pipe(map(({ previousValue }) => previousValue));
+    changes = toSignal(this.changes$);
+    currentValue = toSignal(this.currentValue$);
+    previousValue = toSignal(this.previousValue$);
+    /**
+     * The number of active filters.
+     *
+     * Excludes the following fields by default:
+     * - `page`
+     * - `skip`
+     * - `take`
+     * - `limit`
+     * - `sort`
+     * - `sortBy`
+     * - `sortOrder`
+     * - `query`
+     * - `search`
+     */
+    activeFilterCount$ = this.changes$.pipe(map(({ currentValue }) => Object.entries(currentValue)
+        .map(([key, value]) => {
+        if (IGNORED_FILTER_COUNT_FIELDS.includes(key) || this._fields[key]?.data.skipInFilterCount) {
+            return true;
+        }
+        return this._isDefaultValue(key, value);
+    })
+        .filter((v) => v === false).length));
     get controls() {
         return this.form.controls;
     }
@@ -4490,62 +4956,6 @@ class QueryForm {
     constructor(_fields, _options) {
         this._fields = _fields;
         this._options = _options;
-        this._destroy$ = createDestroy();
-        this._unobserveTrigger$ = new Subject();
-        this._router = inject(Router);
-        this._activatedRoute = inject(ActivatedRoute);
-        this._defaultValues = this._extractDefaultValues();
-        this._zone = inject(NgZone);
-        this._didValueChanges$ = new Subject();
-        this._isObserving = false;
-        this._skipNextResets = false;
-        this._queryParamChanges$ = toObservable(injectQueryParamChanges());
-        this._queryParams = injectQueryParams();
-        /**
-         * The angular form group that contains all the fields.
-         *
-         * **Do not** use any of the following methods on this form group:
-         * - `setValue`: Use `QueryForm.setValue` instead.
-         * - `patchValue`: Use `QueryForm.patchValue` instead.
-         * - `valueChanges`: Use `QueryForm.changes$` instead.
-         * - `value`: Use `QueryForm.value` instead.
-         * - `controls`: Use `QueryForm.controls` instead.
-         */
-        this.form = this._setupFormGroup();
-        this._lastFormValue$ = new BehaviorSubject(null);
-        this._currentFormValue$ = new BehaviorSubject(this._formValue);
-        this._changes$ = new BehaviorSubject({
-            previousValue: null,
-            currentValue: this.form.getRawValue(),
-        });
-        this.changes$ = this._changes$.asObservable();
-        this.currentValue$ = this._changes$.pipe(map(({ currentValue }) => currentValue));
-        this.previousValue$ = this._changes$.pipe(map(({ previousValue }) => previousValue));
-        this.changes = toSignal(this.changes$);
-        this.currentValue = toSignal(this.currentValue$);
-        this.previousValue = toSignal(this.previousValue$);
-        /**
-         * The number of active filters.
-         *
-         * Excludes the following fields by default:
-         * - `page`
-         * - `skip`
-         * - `take`
-         * - `limit`
-         * - `sort`
-         * - `sortBy`
-         * - `sortOrder`
-         * - `query`
-         * - `search`
-         */
-        this.activeFilterCount$ = this.changes$.pipe(map(({ currentValue }) => Object.entries(currentValue)
-            .map(([key, value]) => {
-            if (IGNORED_FILTER_COUNT_FIELDS.includes(key) || this._fields[key]?.data.skipInFilterCount) {
-                return true;
-            }
-            return this._isDefaultValue(key, value);
-        })
-            .filter((v) => v === false).length));
         assertInInjectionContext(QueryForm);
         inject(DestroyRef).onDestroy(() => this._cleanup());
     }
@@ -4867,5 +5277,5 @@ class QueryForm {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, index as ExperimentalQuery, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryShortNamePipe, QueryStore, addQueryContainerHandling, buildErrorMessage, buildQueryCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, createQueryCollectionSignal, createQueryCollectionSubject, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds$1 as extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryArrayComputed, queryComputed, queryComputedTillTruthy, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, queryStateErrorSignal, queryStateLoadingSignal, queryStateResponseSignal, queryStateSignal, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest$1 as shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, toQuerySignal, toQuerySubject, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, index as ExperimentalQuery, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryShortNamePipe, QueryStore, addQueryContainerHandling, buildErrorMessage, buildQueryCacheKey$1 as buildQueryCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, createQueryCollectionSignal, createQueryCollectionSubject, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds$1 as extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryArrayComputed, queryComputed, queryComputedTillTruthy, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, queryStateErrorSignal, queryStateLoadingSignal, queryStateResponseSignal, queryStateSignal, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery$1 as shouldCacheQuery, shouldRetryRequest$1 as shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, toQuerySignal, toQuerySubject, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map