fix: critical bug with enableOnDemand behaviour

Author: js2me

src/mobx-inifinite-query.ts

@@ -263,6 +263,10 @@ export class MobxInfiniteQuery<
     this.queryObserver.setOptions(this.options);
   }
 
+  private isEnableHolded = false;
+
+  private enableHolder = () => false;
+
   private processOptions = (
     options: MobxInfiniteQueryOptions<TData, TError, TQueryKey, TPageParam>,
   ) => {
@@ -273,12 +277,22 @@ export class MobxInfiniteQuery<
     // 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) {
+        this.holdedEnabledOption = options.enabled;
+      }
+
       if (this.isResultRequsted) {
-        options.enabled = this.holdedEnabledOption;
-        this.holdedEnabledOption = undefined;
+        if (this.isEnableHolded) {
+          options.enabled =
+            this.holdedEnabledOption === this.enableHolder
+              ? undefined
+              : this.holdedEnabledOption;
+          this.isEnableHolded = false;
+        }
       } else {
+        this.isEnableHolded = true;
         this.holdedEnabledOption = options.enabled;
-        options.enabled = false;
+        options.enabled = this.enableHolder;
       }
     }
   };

src/mobx-query.test.ts

@@ -514,7 +514,9 @@ describe('MobxQuery', () => {
         const mobxQuery = new MobxQueryMock({
           queryFn: () => 10,
           enableOnDemand: true,
-          enabled: () => false,
+          enabled: function getEnabledFromUnitTest() {
+            return false;
+          },
         });
 
         mobxQuery.result.data;
@@ -599,7 +601,48 @@ describe('MobxQuery', () => {
 
         expect(mobxQuery.spies.queryFn).toBeCalledTimes(0);
 
-        valueBox.set('value');
+        runInAction(() => {
+          valueBox.set('value');
+        });
+
+        expect(mobxQuery.spies.queryFn).toBeCalledTimes(1);
+
+        mobxQuery.dispose();
+      });
+
+      it('should enable query from dynamic options ONLY AFTER result is requested (multiple observable updates)', () => {
+        const valueBox = observable.box<string | null | undefined>();
+
+        const mobxQuery = new MobxQueryMock({
+          queryFn: () => 100,
+          enableOnDemand: true,
+          options: () => {
+            const value = valueBox.get();
+            return {
+              queryKey: ['values', value] as const,
+              enabled: value === 'kek',
+            };
+          },
+        });
+
+        mobxQuery.result.data;
+        mobxQuery.result.isLoading;
+
+        expect(mobxQuery.spies.queryFn).toBeCalledTimes(0);
+
+        runInAction(() => {
+          valueBox.set(null);
+        });
+
+        runInAction(() => {
+          valueBox.set('faslse');
+        });
+
+        expect(mobxQuery.spies.queryFn).toBeCalledTimes(0);
+
+        runInAction(() => {
+          valueBox.set('kek');
+        });
 
         expect(mobxQuery.spies.queryFn).toBeCalledTimes(1);
 

src/mobx-query.ts

@@ -111,6 +111,7 @@ export class MobxQuery<
 
     if (this.isStaticDisabled) {
       this.holdedEnabledOption = undefined;
+      console.info('hold(3)', `${this.holdedEnabledOption}`);
     }
 
     if (typeof queryKeyOrDynamicQueryKey === 'function') {
@@ -228,6 +229,10 @@ export class MobxQuery<
     this.queryObserver.setOptions(this.options);
   }
 
+  private isEnableHolded = false;
+
+  private enableHolder = () => false;
+
   private processOptions = (
     options: MobxQueryOptions<TData, TError, TQueryKey>,
   ) => {
@@ -238,12 +243,22 @@ export class MobxQuery<
     // 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) {
+        this.holdedEnabledOption = options.enabled;
+      }
+
       if (this.isResultRequsted) {
-        options.enabled = this.holdedEnabledOption;
-        this.holdedEnabledOption = undefined;
+        if (this.isEnableHolded) {
+          options.enabled =
+            this.holdedEnabledOption === this.enableHolder
+              ? undefined
+              : this.holdedEnabledOption;
+          this.isEnableHolded = false;
+        }
       } else {
+        this.isEnableHolded = true;
         this.holdedEnabledOption = options.enabled;
-        options.enabled = false;
+        options.enabled = this.enableHolder;
       }
     }
   };