@spoosh/react 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -18,15 +18,19 @@ import {
 } from "@spoosh/core";
 function createUseRead(options) {
   const { api, stateManager, eventEmitter, pluginExecutor } = options;
-  return function useRead(readFn, readOptions) {
-    const { enabled = true, tags, ...pluginOpts } = readOptions ?? {};
+  function useRead(readFn, readOptions) {
+    const {
+      enabled = true,
+      tags,
+      ...pluginOpts
+    } = readOptions ?? {};
     const hookId = useId();
     const selectorResultRef = useRef({
       call: null,
       selector: null
     });
-    const selectorProxy = createSelectorProxy((result2) => {
-      selectorResultRef.current = result2;
+    const selectorProxy = createSelectorProxy((result) => {
+      selectorResultRef.current = result;
     });
     readFn(selectorProxy);
     const capturedCall = selectorResultRef.current.call;
@@ -86,6 +90,7 @@ function createUseRead(options) {
     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) => {
         setRequestState((prev) => ({ ...prev, isPending: true }));
@@ -141,7 +146,7 @@ function createUseRead(options) {
         unsubRefetch();
         unsubInvalidate();
       };
-    }, [queryKey, enabled]);
+    }, [queryKey, enabled, tagsKey]);
     useEffect(() => {
       if (!enabled || !lifecycleRef.current.initialized) return;
       const prevContext = controller.getContext();
@@ -150,7 +155,7 @@ function createUseRead(options) {
     const abort = useCallback(() => {
       abortRef.current();
     }, []);
-    const refetch = useCallback(() => {
+    const trigger = useCallback(() => {
       return executeWithTracking(true);
     }, [executeWithTracking]);
     const entry = stateManager.getCache(queryKey);
@@ -170,7 +175,8 @@ function createUseRead(options) {
     const hasData = state.data !== void 0;
     const loading = requestState.isPending && !hasData;
     const fetching = requestState.isPending;
-    const result = {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       meta: pluginResultData,
       ...inputField,
       data: state.data,
@@ -178,10 +184,10 @@ function createUseRead(options) {
       loading,
       fetching,
       abort,
-      refetch
+      trigger
     };
-    return result;
-  };
+  }
+  return useRead;
 }
 
 // src/useWrite/index.ts
@@ -200,14 +206,14 @@ import {
 } from "@spoosh/core";
 function createUseWrite(options) {
   const { api, stateManager, pluginExecutor, eventEmitter } = options;
-  return function useWrite(writeFn) {
+  function useWrite(writeFn) {
     const hookId = useId2();
     const selectorResultRef = useRef2({
       call: null,
       selector: null
     });
-    const selectorProxy = createSelectorProxy2((result2) => {
-      selectorResultRef.current = result2;
+    const selectorProxy = createSelectorProxy2((result) => {
+      selectorResultRef.current = result;
     });
     writeFn(selectorProxy);
     const selectedEndpoint = selectorResultRef.current.selector;
@@ -251,10 +257,6 @@ function createUseWrite(options) {
     );
     const [lastTriggerOptions, setLastTriggerOptions] = useState2(void 0);
     const [requestState, setRequestState] = useState2({ isPending: false, error: void 0 });
-    const reset = useCallback2(() => {
-      stateManager.deleteCache(queryKey);
-      setRequestState({ isPending: false, error: void 0 });
-    }, [queryKey]);
     const abort = useCallback2(() => {
       controller.abort();
     }, []);
@@ -298,32 +300,175 @@ function createUseWrite(options) {
     }
     const inputField = Object.keys(inputInner).length > 0 ? { input: inputInner } : {};
     const loading = requestState.isPending;
-    const result = {
+    return {
       trigger,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       meta: pluginResultData,
       ...inputField,
       data: state.data,
       error: requestState.error ?? state.error,
       loading,
-      reset,
       abort
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     };
-    return result;
-  };
+  }
+  return useWrite;
 }
 
-// src/useInfiniteRead/index.ts
+// 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,
   useEffect as useEffect2,
-  useSyncExternalStore as useSyncExternalStore3,
-  useId as useId3,
-  useState as useState3
+  useSyncExternalStore as useSyncExternalStore4,
+  useId as useId4,
+  useState as useState4
 } from "react";
 import {
   createInfiniteReadController,
-  createSelectorProxy as createSelectorProxy3,
-  resolvePath as resolvePath3,
+  createSelectorProxy as createSelectorProxy4,
+  resolvePath as resolvePath4,
   resolveTags as resolveTags3
 } from "@spoosh/core";
 function createUseInfiniteRead(options) {
@@ -339,12 +484,12 @@ function createUseInfiniteRead(options) {
       prevPageRequest,
       ...pluginOpts
     } = readOptions;
-    const hookId = useId3();
-    const selectorResultRef = useRef3({
+    const hookId = useId4();
+    const selectorResultRef = useRef4({
       call: null,
       selector: null
     });
-    const selectorProxy = createSelectorProxy3((result2) => {
+    const selectorProxy = createSelectorProxy4((result2) => {
       selectorResultRef.current = result2;
     });
     readFn(selectorProxy);
@@ -367,13 +512,13 @@ function createUseInfiniteRead(options) {
       params: void 0,
       body: void 0
     };
-    const resolvedPath = resolvePath3(pathSegments, requestOptions?.params);
+    const resolvedPath = resolvePath4(pathSegments, requestOptions?.params);
     const resolvedTags = resolveTags3({ tags }, resolvedPath);
-    const canFetchNextRef = useRef3(canFetchNext);
-    const canFetchPrevRef = useRef3(canFetchPrev);
-    const nextPageRequestRef = useRef3(nextPageRequest);
-    const prevPageRequestRef = useRef3(prevPageRequest);
-    const mergerRef = useRef3(merger);
+    const canFetchNextRef = useRef4(canFetchNext);
+    const canFetchPrevRef = useRef4(canFetchPrev);
+    const nextPageRequestRef = useRef4(nextPageRequest);
+    const prevPageRequestRef = useRef4(prevPageRequest);
+    const mergerRef = useRef4(merger);
     canFetchNextRef.current = canFetchNext;
     canFetchPrevRef.current = canFetchPrev;
     nextPageRequestRef.current = nextPageRequest;
@@ -384,7 +529,7 @@ function createUseInfiniteRead(options) {
       method: capturedCall.method,
       options: baseOptionsForKey
     });
-    const controllerRef = useRef3(null);
+    const controllerRef = useRef4(null);
     if (!controllerRef.current || controllerRef.current.queryKey !== queryKey) {
       controllerRef.current = {
         controller: createInfiniteReadController({
@@ -420,12 +565,12 @@ function createUseInfiniteRead(options) {
     }
     const controller = controllerRef.current.controller;
     controller.setPluginOptions(pluginOpts);
-    const state = useSyncExternalStore3(
+    const state = useSyncExternalStore4(
       controller.subscribe,
       controller.getState,
       controller.getState
     );
-    const [isPending, setIsPending] = useState3(() => {
+    const [isPending, setIsPending] = useState4(() => {
       return enabled && state.data === void 0;
     });
     const fetchingDirection = controller.getFetchingDirection();
@@ -434,10 +579,11 @@ function createUseInfiniteRead(options) {
     const fetchingPrev = fetchingDirection === "prev";
     const hasData = state.data !== void 0;
     const loading = (isPending || fetching) && !hasData;
-    const lifecycleRef = useRef3({
+    const lifecycleRef = useRef4({
       initialized: false,
       prevContext: null
     });
+    const tagsKey = JSON.stringify(tags);
     useEffect2(() => {
       return () => {
         controllerRef.current?.controller.unmount();
@@ -462,7 +608,7 @@ function createUseInfiniteRead(options) {
       return () => {
         unsubInvalidate();
       };
-    }, []);
+    }, [tagsKey]);
     useEffect2(() => {
       if (!lifecycleRef.current.initialized) return;
       if (enabled) {
@@ -493,7 +639,7 @@ function createUseInfiniteRead(options) {
       canFetchPrev: state.canFetchPrev,
       fetchNext: controller.fetchNext,
       fetchPrev: controller.fetchPrev,
-      refetch: controller.refetch,
+      trigger: controller.refetch,
       abort: controller.abort,
       error: state.error
     };
@@ -516,6 +662,12 @@ function createReactSpoosh(instance) {
     eventEmitter,
     pluginExecutor
   });
+  const useLazyRead = createUseLazyRead({
+    api,
+    stateManager,
+    eventEmitter,
+    pluginExecutor
+  });
   const useInfiniteRead = createUseInfiniteRead({
     api,
     stateManager,
@@ -541,6 +693,7 @@ function createReactSpoosh(instance) {
   return {
     useRead,
     useWrite,
+    useLazyRead,
     useInfiniteRead,
     ...instanceApis
   };
@@ -548,6 +701,7 @@ function createReactSpoosh(instance) {
 export {
   createReactSpoosh,
   createUseInfiniteRead,
+  createUseLazyRead,
   createUseRead,
   createUseWrite
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spoosh/react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
   "description": "React hooks for Spoosh API client",
   "keywords": [
@@ -38,7 +38,7 @@
     "react": "^18 || ^19"
   },
   "devDependencies": {
-    "@spoosh/core": "0.7.0"
+    "@spoosh/core": "0.9.0"
   },
   "scripts": {
     "dev": "tsup --watch",