fix: lazy queries and mutation make delayed cleanup

Author: js2me

.changeset/metal-shrimps-drum.md

@@ -0,0 +1,5 @@
+---
+"mobx-tanstack-query": patch
+---
+
+fixed lazy queries cleanup functions

src/inifinite-query.ts

@@ -19,8 +19,6 @@ import {
   makeObservable,
   observable,
   runInAction,
-  onBecomeUnobserved,
-  onBecomeObserved,
 } from 'mobx';
 
 import {
@@ -35,6 +33,7 @@ import {
   InfiniteQueryUpdateOptionsAllVariants,
 } from './inifinite-query.types';
 import { AnyQueryClient, QueryClientHooks } from './query-client.types';
+import { lazyObserve } from './utils/lazy-observe';
 
 const enableHolder = () => false;
 
@@ -231,41 +230,36 @@ export class InfiniteQuery<
     this.updateResult(this.queryObserver.getOptimisticResult(this.options));
 
     if (this.isLazy) {
-      let dynamicOptionsDisposeFn: VoidFunction | undefined;
-
-      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,
-              {
+      const cleanup = lazyObserve({
+        context: this,
+        property: '_result',
+        onStart: () => {
+          if (!this._observerSubscription) {
+            if (getAllDynamicOptions) {
+              this.update(getAllDynamicOptions());
+            }
+            this._observerSubscription = this.queryObserver.subscribe(
+              this.updateResult,
+            );
+            if (getAllDynamicOptions) {
+              return reaction(getAllDynamicOptions, this.update, {
                 delay: this.config.dynamicOptionsUpdateDelay,
                 signal: config.abortSignal,
                 fireImmediately: true,
-              },
-            );
+              });
+            }
           }
-        }
+        },
+        onEnd: (disposeFn, cleanup) => {
+          if (this._observerSubscription) {
+            disposeFn?.();
+            this._observerSubscription();
+            this._observerSubscription = undefined;
+            config.abortSignal?.removeEventListener('abort', cleanup);
+          }
+        },
       });
 
-      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) {

src/mutation.ts

@@ -6,13 +6,7 @@ import {
   MutationOptions,
 } from '@tanstack/query-core';
 import { LinkedAbortController } from 'linked-abort-controller';
-import {
-  action,
-  makeObservable,
-  observable,
-  onBecomeObserved,
-  onBecomeUnobserved,
-} from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 
 import {
   MutationConfig,
@@ -23,6 +17,7 @@ import {
   MutationSettledListener,
 } from './mutation.types';
 import { AnyQueryClient, QueryClientHooks } from './query-client.types';
+import { lazyObserve } from './utils/lazy-observe';
 
 export class Mutation<
   TData = unknown,
@@ -120,20 +115,25 @@ export class Mutation<
     this.updateResult(this.mutationObserver.getCurrentResult());
 
     if (this.isLazy) {
-      onBecomeObserved(this, 'result', () => {
-        if (!this._observerSubscription) {
-          this.updateResult(this.mutationObserver.getCurrentResult());
-          this._observerSubscription = this.mutationObserver.subscribe(
-            this.updateResult,
-          );
-        }
-      });
-      onBecomeUnobserved(this, 'result', () => {
-        if (this._observerSubscription) {
-          this._observerSubscription?.();
-          this._observerSubscription = undefined;
-        }
+      const cleanup = lazyObserve({
+        context: this,
+        property: 'result',
+        onStart: () => {
+          if (!this._observerSubscription) {
+            this.updateResult(this.mutationObserver.getCurrentResult());
+            this._observerSubscription = this.mutationObserver.subscribe(
+              this.updateResult,
+            );
+          }
+        },
+        onEnd: () => {
+          if (this._observerSubscription) {
+            this._observerSubscription?.();
+            this._observerSubscription = undefined;
+          }
+        },
       });
+      config.abortSignal?.addEventListener('abort', cleanup);
     } else {
       this._observerSubscription = this.mutationObserver.subscribe(
         this.updateResult,

src/query.ts

@@ -13,8 +13,6 @@ import {
   action,
   makeObservable,
   observable,
-  onBecomeObserved,
-  onBecomeUnobserved,
   reaction,
   runInAction,
 } from 'mobx';
@@ -32,6 +30,7 @@ import {
   QueryStartParams,
   QueryUpdateOptionsAllVariants,
 } from './query.types';
+import { lazyObserve } from './utils/lazy-observe';
 
 const enableHolder = () => false;
 
@@ -212,41 +211,36 @@ export class Query<
     this.updateResult(this.queryObserver.getOptimisticResult(this.options));
 
     if (this.isLazy) {
-      let dynamicOptionsDisposeFn: VoidFunction | undefined;
-
-      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,
-              {
+      const cleanup = lazyObserve({
+        context: this,
+        property: '_result',
+        onStart: () => {
+          if (!this._observerSubscription) {
+            if (getAllDynamicOptions) {
+              this.update(getAllDynamicOptions());
+            }
+            this._observerSubscription = this.queryObserver.subscribe(
+              this.updateResult,
+            );
+            if (getAllDynamicOptions) {
+              return reaction(getAllDynamicOptions, this.update, {
                 delay: this.config.dynamicOptionsUpdateDelay,
                 signal: config.abortSignal,
                 fireImmediately: true,
-              },
-            );
+              });
+            }
           }
-        }
+        },
+        onEnd: (disposeFn, cleanup) => {
+          if (this._observerSubscription) {
+            disposeFn?.();
+            this._observerSubscription();
+            this._observerSubscription = undefined;
+            config.abortSignal?.removeEventListener('abort', cleanup);
+          }
+        },
       });
 
-      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) {

src/utils/lazy-observe.ts

@@ -0,0 +1,42 @@
+import { onBecomeObserved, onBecomeUnobserved } from 'mobx';
+
+export const lazyObserve = <TMetaData = void>({
+  context,
+  property,
+  onStart,
+  onEnd,
+  endDelay = 50,
+}: {
+  context: any;
+  property: any;
+  onStart: () => TMetaData;
+  onEnd: (metaData: TMetaData, cleanupFn: VoidFunction) => void;
+  endDelay?: number;
+}) => {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  let metaData: TMetaData | undefined;
+
+  onBecomeObserved(context, property, () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+    metaData = onStart();
+  });
+
+  const cleanup = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+    timeoutId = setTimeout(() => {
+      onEnd(metaData!, cleanup);
+      timeoutId = undefined;
+      metaData = undefined;
+    }, endDelay);
+  };
+
+  onBecomeUnobserved(context, property, cleanup);
+
+  return cleanup;
+};