@spoosh/react 0.6.0 → 0.7.0

package/dist/index.mjs

@@ -53,10 +53,11 @@ function createUseRead(options) {
       initialized: false,
       prevContext: null
     });
-    if (controllerRef.current && controllerRef.current.queryKey !== queryKey) {
+    const baseQueryKeyChanged = controllerRef.current && controllerRef.current.baseQueryKey !== queryKey;
+    if (baseQueryKeyChanged) {
       lifecycleRef.current.prevContext = controllerRef.current.controller.getContext();
     }
-    if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
+    if (!controllerRef.current || baseQueryKeyChanged) {
       const controller2 = createOperationController({
         operationType: "read",
         path: pathSegments,
@@ -73,29 +74,36 @@ function createUseRead(options) {
           return method(fetchOpts);
         }
       });
-      controllerRef.current = { controller: controller2, queryKey };
+      controllerRef.current = { controller: controller2, queryKey, baseQueryKey: queryKey };
     }
     const controller = controllerRef.current.controller;
     controller.setPluginOptions(pluginOpts);
-    const state = useSyncExternalStore(
-      controller.subscribe,
-      controller.getState,
-      controller.getState
+    const subscribe = useCallback(
+      (callback) => {
+        return controller.subscribe(callback);
+      },
+      [controller]
     );
+    const getSnapshot = useCallback(() => {
+      return controller.getState();
+    }, [controller]);
+    const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     const [requestState, setRequestState] = useState(() => {
       const cachedEntry = stateManager.getCache(queryKey);
       const hasCachedData = cachedEntry?.state?.data !== void 0;
       return { isPending: enabled && !hasCachedData, error: void 0 };
     });
+    const [, forceUpdate] = useState(0);
     const abortRef = useRef(controller.abort);
     abortRef.current = controller.abort;
     const pluginOptsKey = JSON.stringify(pluginOpts);
     const tagsKey = JSON.stringify(tags);
     const executeWithTracking = useCallback(
-      async (force = false) => {
+      async (force = false, overrideOptions) => {
         setRequestState((prev) => ({ ...prev, isPending: true }));
         try {
-          const response = await controller.execute(void 0, { force });
+          const execOptions = overrideOptions ? { ...capturedCall.options ?? {}, ...overrideOptions } : void 0;
+          const response = await controller.execute(execOptions, { force });
           if (response.error) {
             setRequestState({ isPending: false, error: response.error });
           } else {
@@ -107,7 +115,7 @@ function createUseRead(options) {
           throw err;
         }
       },
-      [controller]
+      [controller, capturedCall.options]
     );
     useEffect(() => {
       return () => {
@@ -155,9 +163,84 @@ function createUseRead(options) {
     const abort = useCallback(() => {
       abortRef.current();
     }, []);
-    const trigger = useCallback(() => {
-      return executeWithTracking(true);
-    }, [executeWithTracking]);
+    const trigger = useCallback(
+      async (triggerOptions) => {
+        const { force = false, ...overrideOptions } = triggerOptions ?? {};
+        const hasOverrides = Object.keys(overrideOptions).length > 0;
+        if (!hasOverrides) {
+          return executeWithTracking(force, void 0);
+        }
+        const mergedOptions = {
+          ...capturedCall.options ?? {},
+          ...overrideOptions
+        };
+        const newQueryKey = stateManager.createQueryKey({
+          path: pathSegments,
+          method: capturedCall.method,
+          options: mergedOptions
+        });
+        if (newQueryKey === controllerRef.current?.queryKey) {
+          return executeWithTracking(force, overrideOptions);
+        }
+        const params = mergedOptions?.params;
+        const newResolvedPath = resolvePath(pathSegments, params);
+        const newResolvedTags = resolveTags({ tags }, newResolvedPath);
+        const newController = createOperationController({
+          operationType: "read",
+          path: pathSegments,
+          method: capturedCall.method,
+          tags: newResolvedTags,
+          requestOptions: mergedOptions,
+          stateManager,
+          eventEmitter,
+          pluginExecutor,
+          hookId,
+          fetchFn: async (fetchOpts) => {
+            const pathMethods = api(capturedCall.path);
+            const method = pathMethods[capturedCall.method];
+            return method(fetchOpts);
+          }
+        });
+        newController.setPluginOptions(pluginOpts);
+        const currentBaseQueryKey = controllerRef.current?.baseQueryKey ?? queryKey;
+        controllerRef.current = {
+          controller: newController,
+          queryKey: newQueryKey,
+          baseQueryKey: currentBaseQueryKey
+        };
+        forceUpdate((n) => n + 1);
+        newController.mount();
+        setRequestState((prev) => ({ ...prev, isPending: true }));
+        try {
+          const response = await newController.execute(mergedOptions, {
+            force
+          });
+          if (response.error) {
+            setRequestState({ isPending: false, error: response.error });
+          } else {
+            setRequestState({ isPending: false, error: void 0 });
+          }
+          return response;
+        } catch (err) {
+          setRequestState({ isPending: false, error: err });
+          throw err;
+        }
+      },
+      [
+        executeWithTracking,
+        capturedCall.options,
+        capturedCall.method,
+        capturedCall.path,
+        pathSegments,
+        tags,
+        stateManager,
+        eventEmitter,
+        pluginExecutor,
+        hookId,
+        pluginOpts,
+        api
+      ]
+    );
     const entry = stateManager.getCache(queryKey);
     const pluginResultData = entry?.meta ? Object.fromEntries(entry.meta) : {};
     const opts = capturedCall.options;
@@ -315,160 +398,18 @@ function createUseWrite(options) {
   return useWrite;
 }
 
-// src/useLazyRead/index.ts
-import {
-  useSyncExternalStore as useSyncExternalStore3,
-  useRef as useRef3,
-  useCallback as useCallback3,
-  useState as useState3,
-  useId as useId3
-} from "react";
-import {
-  createOperationController as createOperationController3,
-  createSelectorProxy as createSelectorProxy3,
-  resolvePath as resolvePath3
-} from "@spoosh/core";
-function createUseLazyRead(options) {
-  const { api, stateManager, pluginExecutor, eventEmitter } = options;
-  function useLazyRead(readFn) {
-    const hookId = useId3();
-    const selectorResultRef = useRef3({
-      call: null,
-      selector: null
-    });
-    const selectorProxy = createSelectorProxy3((result) => {
-      selectorResultRef.current = result;
-    });
-    readFn(selectorProxy);
-    const selectedEndpoint = selectorResultRef.current.selector;
-    if (!selectedEndpoint) {
-      throw new Error(
-        'useLazyRead requires selecting an HTTP method (GET). Example: useLazyRead((api) => api("posts").GET)'
-      );
-    }
-    if (selectedEndpoint.method !== "GET") {
-      throw new Error(
-        "useLazyRead only supports GET method. Use useWrite for POST, PUT, PATCH, DELETE methods."
-      );
-    }
-    const pathSegments = selectedEndpoint.path.split("/").filter(Boolean);
-    const controllerRef = useRef3(null);
-    const emptyStateRef = useRef3({ data: void 0, error: void 0 });
-    const [currentQueryKey, setCurrentQueryKey] = useState3(null);
-    const [, forceUpdate] = useState3(0);
-    const getOrCreateController = useCallback3(
-      (triggerOptions) => {
-        const queryKey = stateManager.createQueryKey({
-          path: pathSegments,
-          method: selectedEndpoint.method,
-          options: triggerOptions
-        });
-        if (controllerRef.current?.queryKey === queryKey) {
-          return { controller: controllerRef.current.controller, queryKey };
-        }
-        const controller2 = createOperationController3({
-          operationType: "read",
-          path: pathSegments,
-          method: "GET",
-          tags: [],
-          stateManager,
-          eventEmitter,
-          pluginExecutor,
-          hookId,
-          requestOptions: triggerOptions,
-          fetchFn: async (fetchOpts) => {
-            const pathMethods = api(selectedEndpoint.path);
-            const method = pathMethods[selectedEndpoint.method];
-            return method(fetchOpts);
-          }
-        });
-        controllerRef.current = { controller: controller2, queryKey };
-        setCurrentQueryKey(queryKey);
-        forceUpdate((n) => n + 1);
-        return { controller: controller2, queryKey };
-      },
-      [pathSegments, selectedEndpoint.method, selectedEndpoint.path, hookId]
-    );
-    const controller = controllerRef.current?.controller;
-    const subscribe = useCallback3(
-      (callback) => {
-        if (!controller) return () => {
-        };
-        return controller.subscribe(callback);
-      },
-      [controller]
-    );
-    const getSnapshot = useCallback3(() => {
-      if (!controller) return emptyStateRef.current;
-      return controller.getState();
-    }, [controller]);
-    const state = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
-    const [lastTriggerOptions, setLastTriggerOptions] = useState3(void 0);
-    const [requestState, setRequestState] = useState3({ isPending: false, error: void 0 });
-    const abort = useCallback3(() => {
-      controllerRef.current?.controller.abort();
-    }, []);
-    const trigger = useCallback3(
-      async (triggerOptions) => {
-        setLastTriggerOptions(triggerOptions);
-        setRequestState((prev) => ({ ...prev, isPending: true }));
-        const params = triggerOptions?.params;
-        resolvePath3(pathSegments, params);
-        const { controller: ctrl } = getOrCreateController(triggerOptions);
-        ctrl.setPluginOptions(triggerOptions);
-        try {
-          const response = await ctrl.execute(triggerOptions);
-          if (response.error) {
-            setRequestState({ isPending: false, error: response.error });
-          } else {
-            setRequestState({ isPending: false, error: void 0 });
-          }
-          return response;
-        } catch (err) {
-          setRequestState({ isPending: false, error: err });
-          throw err;
-        }
-      },
-      [pathSegments, getOrCreateController]
-    );
-    const opts = lastTriggerOptions;
-    const inputInner = {};
-    if (opts?.query !== void 0) {
-      inputInner.query = opts.query;
-    }
-    if (opts?.body !== void 0) {
-      inputInner.body = opts.body;
-    }
-    if (opts?.params !== void 0) {
-      inputInner.params = opts.params;
-    }
-    const inputField = Object.keys(inputInner).length > 0 ? { input: inputInner } : {};
-    const loading = requestState.isPending;
-    return {
-      trigger,
-      ...inputField,
-      data: state.data,
-      error: requestState.error ?? state.error,
-      loading,
-      abort
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    };
-  }
-  return useLazyRead;
-}
-
 // src/useInfiniteRead/index.ts
 import {
-  useRef as useRef4,
+  useRef as useRef3,
   useEffect as useEffect2,
-  useSyncExternalStore as useSyncExternalStore4,
-  useId as useId4,
-  useState as useState4
+  useSyncExternalStore as useSyncExternalStore3,
+  useId as useId3,
+  useState as useState3
 } from "react";
 import {
   createInfiniteReadController,
-  createSelectorProxy as createSelectorProxy4,
-  resolvePath as resolvePath4,
+  createSelectorProxy as createSelectorProxy3,
+  resolvePath as resolvePath3,
   resolveTags as resolveTags3
 } from "@spoosh/core";
 function createUseInfiniteRead(options) {
@@ -484,12 +425,12 @@ function createUseInfiniteRead(options) {
       prevPageRequest,
       ...pluginOpts
     } = readOptions;
-    const hookId = useId4();
-    const selectorResultRef = useRef4({
+    const hookId = useId3();
+    const selectorResultRef = useRef3({
       call: null,
       selector: null
     });
-    const selectorProxy = createSelectorProxy4((result2) => {
+    const selectorProxy = createSelectorProxy3((result2) => {
       selectorResultRef.current = result2;
     });
     readFn(selectorProxy);
@@ -512,13 +453,13 @@ function createUseInfiniteRead(options) {
       params: void 0,
       body: void 0
     };
-    const resolvedPath = resolvePath4(pathSegments, requestOptions?.params);
+    const resolvedPath = resolvePath3(pathSegments, requestOptions?.params);
     const resolvedTags = resolveTags3({ tags }, resolvedPath);
-    const canFetchNextRef = useRef4(canFetchNext);
-    const canFetchPrevRef = useRef4(canFetchPrev);
-    const nextPageRequestRef = useRef4(nextPageRequest);
-    const prevPageRequestRef = useRef4(prevPageRequest);
-    const mergerRef = useRef4(merger);
+    const canFetchNextRef = useRef3(canFetchNext);
+    const canFetchPrevRef = useRef3(canFetchPrev);
+    const nextPageRequestRef = useRef3(nextPageRequest);
+    const prevPageRequestRef = useRef3(prevPageRequest);
+    const mergerRef = useRef3(merger);
     canFetchNextRef.current = canFetchNext;
     canFetchPrevRef.current = canFetchPrev;
     nextPageRequestRef.current = nextPageRequest;
@@ -529,7 +470,7 @@ function createUseInfiniteRead(options) {
       method: capturedCall.method,
       options: baseOptionsForKey
     });
-    const controllerRef = useRef4(null);
+    const controllerRef = useRef3(null);
     if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
       controllerRef.current = {
         controller: createInfiniteReadController({
@@ -565,12 +506,12 @@ function createUseInfiniteRead(options) {
     }
     const controller = controllerRef.current.controller;
     controller.setPluginOptions(pluginOpts);
-    const state = useSyncExternalStore4(
+    const state = useSyncExternalStore3(
       controller.subscribe,
       controller.getState,
       controller.getState
     );
-    const [isPending, setIsPending] = useState4(() => {
+    const [isPending, setIsPending] = useState3(() => {
       return enabled && state.data === void 0;
     });
     const fetchingDirection = controller.getFetchingDirection();
@@ -579,7 +520,7 @@ function createUseInfiniteRead(options) {
     const fetchingPrev = fetchingDirection === "prev";
     const hasData = state.data !== void 0;
     const loading = (isPending || fetching) && !hasData;
-    const lifecycleRef = useRef4({
+    const lifecycleRef = useRef3({
       initialized: false,
       prevContext: null
     });
@@ -662,12 +603,6 @@ function createReactSpoosh(instance) {
     eventEmitter,
     pluginExecutor
   });
-  const useLazyRead = createUseLazyRead({
-    api,
-    stateManager,
-    eventEmitter,
-    pluginExecutor
-  });
   const useInfiniteRead = createUseInfiniteRead({
     api,
     stateManager,
@@ -693,7 +628,6 @@ function createReactSpoosh(instance) {
   return {
     useRead,
     useWrite,
-    useLazyRead,
     useInfiniteRead,
     ...instanceApis
   };
@@ -701,7 +635,6 @@ function createReactSpoosh(instance) {
 export {
   createReactSpoosh,
   createUseInfiniteRead,
-  createUseLazyRead,
   createUseRead,
   createUseWrite
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spoosh/react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
   "description": "React hooks for Spoosh API client",
   "keywords": [