refactor: optimize the onBefore hook in custom plugins #226

Add `isReturn` to handle situations where the request needs to be aborted and custom data returned.

Author: John60676

src/core/createQuery.ts

@@ -19,7 +19,9 @@ const setStateBind = <T extends StateBindParams>(
 ) => {
   return (newState: Partial<UnWrapRefObject<StateBindParams>>) => {
     Object.keys(newState).forEach(key => {
-      oldState[key].value = newState[key];
+      if (oldState[key]) {
+        oldState[key].value = newState[key];
+      }
     });
     publicCb.forEach(fun => fun(oldState));
   };
@@ -80,18 +82,31 @@ const createQuery = <R, P extends unknown[]>(
 
   context.runAsync = async (...args: P): Promise<R> => {
     setState({
-      loading: true,
-      params: args,
       status: 'pending',
     });
 
     count.value += 1;
     const currentCount = count.value;
 
-    const { isBreak, breakResult = resolvedPromise() } = emit('onBefore', args);
+    const {
+      isBreak = false,
+      isReturn = false,
+      ...rest
+    } = emit('onBefore', args);
     if (isBreak) {
       setState({ status: 'settled' });
-      return breakResult;
+      return resolvedPromise();
+    }
+
+    setState({
+      loading: true,
+      params: args,
+      ...rest,
+    });
+
+    if (isReturn) {
+      setState({ status: 'settled', loading: false });
+      return rest.data!;
     }
 
     onBefore?.(args);

src/core/plugins/useCachePlugin.ts

@@ -82,15 +82,16 @@ export default definePlugin(
         }
         // If it's fresh, stop the request
         if (isFresh(cache.time)) {
-          queryInstance.data.value = cache.data;
-          queryInstance.loading.value = false;
           return {
-            isBreak: true,
-            breakResult: cache.data,
+            isReturn: true,
+            loading: false,
+            data: cache.data,
           };
         } else {
           // If it is not fresh, set data and request
-          queryInstance.data.value = cache.data;
+          return {
+            data: cache.data,
+          };
         }
       },
       onQuery(service) {

src/core/plugins/useLoadingDelayPlugin.ts

@@ -49,10 +49,12 @@ export default definePlugin(
     };
     return {
       onBefore() {
-        queryInstance.loading.value = !loadingDelayRef.value;
         delayLoadingTimer.value();
         delayLoadingTimer.value = delayLoading();
         startTime = getCurrentTime();
+        return {
+          loading: !loadingDelayRef.value,
+        };
       },
       onQuery(service) {
         if (!loadingKeepRef.value) return () => service();

src/core/plugins/useReadyPlugin.ts

@@ -21,7 +21,6 @@ export default definePlugin(
       onBefore() {
         const readyFlag = isFunction(ready) ? ready() : ready.value;
         if (!readyFlag) {
-          queryInstance.loading.value = false;
           return {
             isBreak: true,
           };

src/core/types.ts

@@ -4,7 +4,7 @@ import type { Ref, WatchSource } from 'vue-demi';
 
 import type { PaginationExtendsOption } from '../usePagination';
 import type { CacheData } from './utils/cache';
-import type { EmitVoid } from './utils/types';
+import type { EmitVoid, UnWrapRefObject } from './utils/types';
 
 type MutateData<R> = (newData: R) => void;
 type MutateFunction<R> = (arg: (oldData: R) => R) => void;
@@ -91,10 +91,12 @@ export type PluginImplementType<R, P extends any[]> = {
 };
 
 export type PluginType<R, P extends unknown[]> = {
-  onBefore: (params: P) => {
-    isBreak?: Boolean;
-    breakResult?: any;
-  } | void;
+  onBefore: (params: P) =>
+    | ({
+        isBreak?: Boolean;
+        isReturn?: Boolean;
+      } & Partial<UnWrapRefObject<State<R, P>>>)
+    | void;
 
   onQuery: (service: () => Promise<R>) => () => Promise<R>;