@trackunit/react-graphql-hooks 1.13.3 → 1.13.5

package/index.cjs.js

@@ -212,23 +212,38 @@ const useStableVariables = (variables) => {
         onChange: setStableVariables,
         skip: !Boolean(variables),
     });
-    return stableVariables;
+    return [stableVariables, setStableVariables];
 };
 /**
  * Hook to manage AbortController for cancellable requests.
  * Returns an abort signal that can be passed to fetch requests and a function to create new controllers.
  */
-const useAbortableRequest = () => {
-    const [abortController] = react.useState(() => new AbortController());
-    const firstRender = reactComponents.useIsFirstRender();
-    react.useEffect(() => {
-        if (firstRender) {
-            return;
+const useAbortableRequest = (props, setStableVariables) => {
+    const [abortController, setAbortController] = react.useState(() => new AbortController());
+    const [prevVariables, setPrevVariables] = react.useState(props.variables);
+    const [lastAbortController, setLastAbortController] = react.useState(undefined);
+    if (!esToolkit.isEqual(props.variables, prevVariables)) {
+        setPrevVariables(props.variables);
+        setStableVariables(props.variables);
+        if (!props.skip) {
+            if (lastAbortController) {
+                lastAbortController.abort();
+            }
+            const newAbortController = new AbortController();
+            setLastAbortController(newAbortController);
+            setAbortController(newAbortController);
         }
+    }
+    const abortControllerRef = react.useRef(abortController);
+    react.useEffect(() => {
+        abortControllerRef.current = abortController;
+    }, [abortController]);
+    // Cleanup on unmount only
+    react.useEffect(() => {
         return () => {
-            abortController.abort();
+            abortControllerRef.current.abort();
         };
-    }, [abortController, firstRender]);
+    }, []);
     return { abortSignal: abortController.signal };
 };
 /**
@@ -289,9 +304,9 @@ const usePaginationQuery = (document, props) => {
         resetTrigger: 0,
     });
     // Stabilize variables to prevent unnecessary re-fetches
-    const stableVariables = useStableVariables(props.variables);
+    const [stableVariables, setStableVariables] = useStableVariables(props.variables);
     // Manage abort controller for cancellable requests
-    const { abortSignal } = useAbortableRequest();
+    const { abortSignal } = useAbortableRequest(props, setStableVariables);
     const internalProps = react.useMemo(() => {
         return {
             ...props,

package/index.esm.js

@@ -2,9 +2,9 @@ import 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { truthy, objectKeys } from '@trackunit/shared-utils';
 import { useLazyQuery as useLazyQuery$1, NetworkStatus, useQuery as useQuery$1 } from '@apollo/client';
-import { omit } from 'es-toolkit';
+import { omit, isEqual } from 'es-toolkit';
 import { useMemo, useReducer, useCallback, useEffect, useState, useRef } from 'react';
-import { useRelayPagination, defaultPageSize, useWatch, useIsFirstRender } from '@trackunit/react-components';
+import { useRelayPagination, defaultPageSize, useWatch } from '@trackunit/react-components';
 
 var defaultTranslations = {
 	
@@ -210,23 +210,38 @@ const useStableVariables = (variables) => {
         onChange: setStableVariables,
         skip: !Boolean(variables),
     });
-    return stableVariables;
+    return [stableVariables, setStableVariables];
 };
 /**
  * Hook to manage AbortController for cancellable requests.
  * Returns an abort signal that can be passed to fetch requests and a function to create new controllers.
  */
-const useAbortableRequest = () => {
-    const [abortController] = useState(() => new AbortController());
-    const firstRender = useIsFirstRender();
-    useEffect(() => {
-        if (firstRender) {
-            return;
+const useAbortableRequest = (props, setStableVariables) => {
+    const [abortController, setAbortController] = useState(() => new AbortController());
+    const [prevVariables, setPrevVariables] = useState(props.variables);
+    const [lastAbortController, setLastAbortController] = useState(undefined);
+    if (!isEqual(props.variables, prevVariables)) {
+        setPrevVariables(props.variables);
+        setStableVariables(props.variables);
+        if (!props.skip) {
+            if (lastAbortController) {
+                lastAbortController.abort();
+            }
+            const newAbortController = new AbortController();
+            setLastAbortController(newAbortController);
+            setAbortController(newAbortController);
         }
+    }
+    const abortControllerRef = useRef(abortController);
+    useEffect(() => {
+        abortControllerRef.current = abortController;
+    }, [abortController]);
+    // Cleanup on unmount only
+    useEffect(() => {
         return () => {
-            abortController.abort();
+            abortControllerRef.current.abort();
         };
-    }, [abortController, firstRender]);
+    }, []);
     return { abortSignal: abortController.signal };
 };
 /**
@@ -287,9 +302,9 @@ const usePaginationQuery = (document, props) => {
         resetTrigger: 0,
     });
     // Stabilize variables to prevent unnecessary re-fetches
-    const stableVariables = useStableVariables(props.variables);
+    const [stableVariables, setStableVariables] = useStableVariables(props.variables);
     // Manage abort controller for cancellable requests
-    const { abortSignal } = useAbortableRequest();
+    const { abortSignal } = useAbortableRequest(props, setStableVariables);
     const internalProps = useMemo(() => {
         return {
             ...props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "1.13.3",
+  "version": "1.13.5",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "@apollo/client": "3.13.8",
     "react": "19.0.0",
-    "@trackunit/i18n-library-translation": "1.12.3",
-    "@trackunit/shared-utils": "1.13.22",
+    "@trackunit/i18n-library-translation": "1.12.4",
+    "@trackunit/shared-utils": "1.13.23",
     "es-toolkit": "^1.39.10",
-    "@trackunit/react-components": "1.16.3"
+    "@trackunit/react-components": "1.16.4"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",