feat: added lazy option for query and mutation; refactor: useless reactions

Author: js2me

.changeset/blue-pans-make.md

@@ -0,0 +1,5 @@
+---
+"mobx-tanstack-query": patch
+---
+
+remove a lot of useless reactions (replaced it by more simple callbacks)

.changeset/every-parks-march.md

@@ -0,0 +1,5 @@
+---
+"mobx-tanstack-query": minor
+---
+
+added `lazy` option for queries and mutations which work on lazy observables from mobx

src/inifinite-query.ts

@@ -19,10 +19,14 @@ import {
   makeObservable,
   observable,
   runInAction,
+  onBecomeUnobserved,
+  onBecomeObserved,
 } from 'mobx';
 
 import {
   InfiniteQueryConfig,
+  InfiniteQueryDoneListener,
+  InfiniteQueryErrorListener,
   InfiniteQueryFlattenConfig,
   InfiniteQueryInvalidateParams,
   InfiniteQueryOptions,
@@ -32,6 +36,8 @@ import {
 } from './inifinite-query.types';
 import { AnyQueryClient, QueryClientHooks } from './query-client.types';
 
+const enableHolder = () => false;
+
 export class InfiniteQuery<
   TQueryFnData = unknown,
   TError = DefaultError,
@@ -40,7 +46,7 @@ export class InfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
 > implements Disposable
 {
-  protected abortController: AbortController;
+  protected abortController: LinkedAbortController;
   protected queryClient: AnyQueryClient;
 
   protected _result: InfiniteQueryObserverResult<TData, TError>;
@@ -68,9 +74,9 @@ export class InfiniteQuery<
     TPageParam
   >;
 
-  isResultRequsted: boolean;
-
   private isEnabledOnResultDemand: boolean;
+  private isResultRequsted: boolean;
+  private isLazy?: boolean;
 
   /**
    * This parameter is responsible for holding the enabled value,
@@ -85,6 +91,8 @@ export class InfiniteQuery<
   >['enabled'];
   private _observerSubscription?: VoidFunction;
   private hooks?: QueryClientHooks;
+  private errorListeners: InfiniteQueryErrorListener<TError>[];
+  private doneListeners: InfiniteQueryDoneListener<TData>[];
 
   constructor(
     config: InfiniteQueryConfig<
@@ -147,12 +155,20 @@ export class InfiniteQuery<
     this._result = undefined as any;
     this.isResultRequsted = false;
     this.isEnabledOnResultDemand = config.enableOnDemand ?? false;
+    this.errorListeners = [];
+    this.doneListeners = [];
     this.hooks =
       'hooks' in this.queryClient ? this.queryClient.hooks : undefined;
+    this.isLazy = this.config.lazy;
 
-    if ('queryFeatures' in queryClient && config.enableOnDemand == null) {
-      this.isEnabledOnResultDemand =
-        queryClient.queryFeatures.enableOnDemand ?? false;
+    if ('queryFeatures' in queryClient) {
+      if (this.config.lazy === undefined) {
+        this.isLazy = queryClient.queryFeatures.lazy ?? false;
+      }
+      if (config.enableOnDemand === undefined) {
+        this.isEnabledOnResultDemand =
+          queryClient.queryFeatures.enableOnDemand ?? false;
+      }
     }
 
     observable.deep(this, '_result');
@@ -164,10 +180,11 @@ export class InfiniteQuery<
 
     makeObservable(this);
 
-    this.options = this.queryClient.defaultQueryOptions({
-      ...restOptions,
-      ...getDynamicOptions?.(this),
-    } as any) as InfiniteQueryOptions<
+    const isQueryKeyDynamic = typeof queryKeyOrDynamicQueryKey === 'function';
+
+    this.options = this.queryClient.defaultQueryOptions(
+      restOptions as any,
+    ) as InfiniteQueryOptions<
       TQueryFnData,
       TError,
       TPageParam,
@@ -177,24 +194,24 @@ export class InfiniteQuery<
 
     this.options.structuralSharing = this.options.structuralSharing ?? false;
 
-    this.processOptions(this.options);
+    const getAllDynamicOptions =
+      getDynamicOptions || isQueryKeyDynamic
+        ? () => {
+            const freshDynamicOptions = {
+              ...getDynamicOptions?.(this),
+            };
 
-    if (typeof queryKeyOrDynamicQueryKey === 'function') {
-      this.options.queryKey = queryKeyOrDynamicQueryKey();
-
-      reaction(
-        () => queryKeyOrDynamicQueryKey(),
-        (queryKey) => {
-          this.update({
-            queryKey,
-          });
-        },
-        {
-          signal: this.abortController.signal,
-          delay: this.config.dynamicOptionsUpdateDelay,
-        },
-      );
-    } else {
+            if (isQueryKeyDynamic) {
+              freshDynamicOptions.queryKey = queryKeyOrDynamicQueryKey();
+            }
+
+            return freshDynamicOptions;
+          }
+        : undefined;
+
+    if (getAllDynamicOptions) {
+      Object.assign(this.options, getAllDynamicOptions());
+    } else if (!isQueryKeyDynamic) {
       this.options.queryKey =
         queryKeyOrDynamicQueryKey ?? this.options.queryKey ?? [];
     }
@@ -205,47 +222,81 @@ export class InfiniteQuery<
       queryClient.getDefaultOptions().queries?.notifyOnChangeProps ??
       'all';
 
+    this.processOptions(this.options);
+
     // @ts-expect-error
     this.queryObserver = new InfiniteQueryObserver(queryClient, this.options);
 
     // @ts-expect-error
     this.updateResult(this.queryObserver.getOptimisticResult(this.options));
 
-    this._observerSubscription = this.queryObserver.subscribe(
-      this.updateResult,
-    );
+    if (this.isLazy) {
+      let dynamicOptionsDisposeFn: VoidFunction | undefined;
 
-    if (getDynamicOptions) {
-      reaction(() => getDynamicOptions(this), this.update, {
-        signal: this.abortController.signal,
-        delay: this.config.dynamicOptionsUpdateDelay,
+      onBecomeObserved(this, '_result', () => {
+        if (!this._observerSubscription) {
+          if (getAllDynamicOptions) {
+            this.update(getAllDynamicOptions());
+          }
+          this._observerSubscription = this.queryObserver.subscribe(
+            this.updateResult,
+          );
+          if (getAllDynamicOptions) {
+            dynamicOptionsDisposeFn = reaction(
+              getAllDynamicOptions,
+              this.update,
+              {
+                delay: this.config.dynamicOptionsUpdateDelay,
+                signal: config.abortSignal,
+                fireImmediately: true,
+              },
+            );
+          }
+        }
       });
-    }
 
-    if (this.isEnabledOnResultDemand) {
-      reaction(
-        () => this.isResultRequsted,
-        (isRequested) => {
-          if (isRequested) {
-            this.update(getDynamicOptions?.(this) ?? {});
-          }
-        },
-        {
+      const cleanup = () => {
+        if (this._observerSubscription) {
+          dynamicOptionsDisposeFn?.();
+          this._observerSubscription();
+          this._observerSubscription = undefined;
+          dynamicOptionsDisposeFn = undefined;
+          config.abortSignal?.removeEventListener('abort', cleanup);
+        }
+      };
+
+      onBecomeUnobserved(this, '_result', cleanup);
+      config.abortSignal?.addEventListener('abort', cleanup);
+    } else {
+      if (isQueryKeyDynamic) {
+        reaction(
+          queryKeyOrDynamicQueryKey,
+          (queryKey) => this.update({ queryKey }),
+          {
+            signal: this.abortController.signal,
+            delay: this.config.dynamicOptionsUpdateDelay,
+          },
+        );
+      }
+      if (getDynamicOptions) {
+        reaction(() => getDynamicOptions(this), this.update, {
           signal: this.abortController.signal,
-          fireImmediately: true,
-        },
+          delay: this.config.dynamicOptionsUpdateDelay,
+        });
+      }
+      this._observerSubscription = this.queryObserver.subscribe(
+        this.updateResult,
       );
+      this.abortController.signal.addEventListener('abort', this.handleAbort);
     }
 
     if (config.onDone) {
-      this.onDone(config.onDone);
+      this.doneListeners.push(config.onDone);
     }
     if (config.onError) {
-      this.onError(config.onError);
+      this.errorListeners.push(config.onError);
     }
 
-    this.abortController.signal.addEventListener('abort', this.handleAbort);
-
     this.config.onInit?.(this);
     this.hooks?.onInfiniteQueryInit?.(this);
   }
@@ -316,12 +367,14 @@ export class InfiniteQuery<
 
     // @ts-expect-error
     this.queryObserver.setOptions(this.options);
+
+    if (this.isLazy) {
+      this.updateResult(this.queryObserver.getCurrentResult());
+    }
   }
 
   private isEnableHolded = false;
 
-  private enableHolder = () => false;
-
   private processOptions = (
     options: InfiniteQueryOptions<
       TQueryFnData,
@@ -338,40 +391,47 @@ export class InfiniteQuery<
     // to do this, we hold the original value of the enabled option
     // and set enabled to false until the user requests the result (this.isResultRequsted)
     if (this.isEnabledOnResultDemand) {
-      if (this.isEnableHolded && options.enabled !== this.enableHolder) {
+      if (this.isEnableHolded && options.enabled !== enableHolder) {
         this.holdedEnabledOption = options.enabled;
       }
 
       if (this.isResultRequsted) {
         if (this.isEnableHolded) {
           options.enabled =
-            this.holdedEnabledOption === this.enableHolder
+            this.holdedEnabledOption === enableHolder
               ? undefined
               : this.holdedEnabledOption;
           this.isEnableHolded = false;
         }
       } else {
         this.isEnableHolded = true;
         this.holdedEnabledOption = options.enabled;
-        options.enabled = this.enableHolder;
+        options.enabled = enableHolder;
       }
     }
   };
 
   public get result() {
-    if (!this.isResultRequsted) {
+    if (this.isEnabledOnResultDemand && !this.isResultRequsted) {
       runInAction(() => {
         this.isResultRequsted = true;
       });
+      this.update({});
     }
     return this._result;
   }
 
   /**
    * Modify this result so it matches the tanstack query result.
    */
-  private updateResult(nextResult: InfiniteQueryObserverResult<TData, TError>) {
-    this._result = nextResult || {};
+  private updateResult(result: InfiniteQueryObserverResult<TData, TError>) {
+    this._result = result || {};
+
+    if (result.isSuccess && !result.error && result.fetchStatus === 'idle') {
+      this.doneListeners.forEach((fn) => fn(result.data!, void 0));
+    } else if (result.error) {
+      this.errorListeners.forEach((fn) => fn(result.error!, void 0));
+    }
   }
 
   async refetch(options?: RefetchOptions) {
@@ -408,35 +468,12 @@ export class InfiniteQuery<
     } as any);
   }
 
-  onDone(onDoneCallback: (data: TData, payload: void) => void): void {
-    reaction(
-      () => {
-        const { error, isSuccess, fetchStatus } = this._result;
-        return isSuccess && !error && fetchStatus === 'idle';
-      },
-      (isDone) => {
-        if (isDone) {
-          onDoneCallback(this._result.data!, void 0);
-        }
-      },
-      {
-        signal: this.abortController.signal,
-      },
-    );
+  onDone(doneListener: InfiniteQueryDoneListener<TData>): void {
+    this.doneListeners.push(doneListener);
   }
 
-  onError(onErrorCallback: (error: TError, payload: void) => void): void {
-    reaction(
-      () => this._result.error,
-      (error) => {
-        if (error) {
-          onErrorCallback(error, void 0);
-        }
-      },
-      {
-        signal: this.abortController.signal,
-      },
-    );
+  onError(errorListener: InfiniteQueryErrorListener<TError>): void {
+    this.errorListeners.push(errorListener);
   }
 
   async start({
@@ -457,6 +494,9 @@ export class InfiniteQuery<
   protected handleAbort = () => {
     this._observerSubscription?.();
 
+    this.doneListeners = [];
+    this.errorListeners = [];
+
     this.queryObserver.destroy();
     this.isResultRequsted = false;