@trackunit/react-graphql-hooks 0.0.269 → 0.0.271

package/index.cjs.js

@@ -134,9 +134,10 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @returns {*}  {PaginationQuery}
  */
 const usePaginationQuery = (document, { ...props }) => {
-    var _a;
+    var _a, _b;
     const [lastFetchedData, setLastFetchedData] = react.useState();
     const [resetTrigger, setResetTrigger] = react.useState(0);
+    const [abortController, setAbortController] = react.useState(new AbortController());
     // Makes **sure** query variables are stable.
     // Before, it required variables to always be memorized in the parent which was easy to forget and confusing.
     // Maybe better solution exists but this is the best I could come up with without changing to much.
@@ -153,6 +154,13 @@ const usePaginationQuery = (document, { ...props }) => {
     }, [props]);
     const [, { fetchMore, networkStatus }] = ApolloClient__namespace.useLazyQuery(document, {
         ...internalProps,
+        context: {
+            ...internalProps.context,
+            fetchOptions: {
+                ...(_a = internalProps.context) === null || _a === void 0 ? void 0 : _a.fetchOptions,
+                signal: abortController.signal,
+            },
+        },
         notifyOnNetworkStatusChange: true, // Needed to update networkStatus
         onCompleted: () => {
             if (networkStatus === ApolloClient__namespace.NetworkStatus.refetch) {
@@ -171,14 +179,13 @@ const usePaginationQuery = (document, { ...props }) => {
         setResetTrigger(prev => prev + 1);
     }, []);
     const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = reactTablePagination.useRelayPagination({
-        pageSize: internalProps.pageSize || ((_a = internalProps.variables) === null || _a === void 0 ? void 0 : _a.first) || reactTablePagination.defaultPageSize,
+        pageSize: internalProps.pageSize || ((_b = internalProps.variables) === null || _b === void 0 ? void 0 : _b.first) || reactTablePagination.defaultPageSize,
         onReset,
     });
     const doFetchMore = react.useCallback((variables, prev) => {
         if (internalProps.skip) {
             return;
         }
-        const abortController = new AbortController();
         setIsLoading(true);
         /**
          * To support pagination with page and pageSize, we need to convert the variables from first and after.
@@ -229,18 +236,27 @@ const usePaginationQuery = (document, { ...props }) => {
                 setIsLoading(false);
                 return result.data;
             },
+            // It is apparently not possible to use the onError from the useLazyQuery hook so we have to handle it here.
+            // However, if you need to pass in your own onError function, you can do so in the props of the hook.
+            // But we ignore the error if the request was aborted.
+        }).catch(error => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            if (internalProps.onError) {
+                return internalProps.onError(error);
+            }
+            else {
+                throw error;
+            }
         });
-        return abortController;
-    }, [setIsLoading, fetchMore, internalProps, setPageInfo]);
+    }, [internalProps, setIsLoading, fetchMore, abortController, setPageInfo]);
     react.useEffect(() => {
         setData(undefined);
         reset();
     }, [internalProps.variables, reset]);
     react.useEffect(() => {
-        const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
-        return () => {
-            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
+        doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [internalProps.variables, resetTrigger]);
     react.useEffect(() => {
@@ -249,6 +265,11 @@ const usePaginationQuery = (document, { ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [after]);
+    react.useEffect(() => () => {
+        abortController.abort();
+        // We need ensure we reset the abort controller on unmounting, as it's not possible to re-use an aborted controller.
+        setAbortController(new AbortController());
+    }, [abortController]);
     return react.useMemo(() => {
         return {
             data,

package/index.esm.js

@@ -113,9 +113,10 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @returns {*}  {PaginationQuery}
  */
 const usePaginationQuery = (document, { ...props }) => {
-    var _a;
+    var _a, _b;
     const [lastFetchedData, setLastFetchedData] = useState();
     const [resetTrigger, setResetTrigger] = useState(0);
+    const [abortController, setAbortController] = useState(new AbortController());
     // Makes **sure** query variables are stable.
     // Before, it required variables to always be memorized in the parent which was easy to forget and confusing.
     // Maybe better solution exists but this is the best I could come up with without changing to much.
@@ -132,6 +133,13 @@ const usePaginationQuery = (document, { ...props }) => {
     }, [props]);
     const [, { fetchMore, networkStatus }] = ApolloClient.useLazyQuery(document, {
         ...internalProps,
+        context: {
+            ...internalProps.context,
+            fetchOptions: {
+                ...(_a = internalProps.context) === null || _a === void 0 ? void 0 : _a.fetchOptions,
+                signal: abortController.signal,
+            },
+        },
         notifyOnNetworkStatusChange: true, // Needed to update networkStatus
         onCompleted: () => {
             if (networkStatus === ApolloClient.NetworkStatus.refetch) {
@@ -150,14 +158,13 @@ const usePaginationQuery = (document, { ...props }) => {
         setResetTrigger(prev => prev + 1);
     }, []);
     const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = useRelayPagination({
-        pageSize: internalProps.pageSize || ((_a = internalProps.variables) === null || _a === void 0 ? void 0 : _a.first) || defaultPageSize,
+        pageSize: internalProps.pageSize || ((_b = internalProps.variables) === null || _b === void 0 ? void 0 : _b.first) || defaultPageSize,
         onReset,
     });
     const doFetchMore = useCallback((variables, prev) => {
         if (internalProps.skip) {
             return;
         }
-        const abortController = new AbortController();
         setIsLoading(true);
         /**
          * To support pagination with page and pageSize, we need to convert the variables from first and after.
@@ -208,18 +215,27 @@ const usePaginationQuery = (document, { ...props }) => {
                 setIsLoading(false);
                 return result.data;
             },
+            // It is apparently not possible to use the onError from the useLazyQuery hook so we have to handle it here.
+            // However, if you need to pass in your own onError function, you can do so in the props of the hook.
+            // But we ignore the error if the request was aborted.
+        }).catch(error => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            if (internalProps.onError) {
+                return internalProps.onError(error);
+            }
+            else {
+                throw error;
+            }
         });
-        return abortController;
-    }, [setIsLoading, fetchMore, internalProps, setPageInfo]);
+    }, [internalProps, setIsLoading, fetchMore, abortController, setPageInfo]);
     useEffect(() => {
         setData(undefined);
         reset();
     }, [internalProps.variables, reset]);
     useEffect(() => {
-        const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
-        return () => {
-            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
+        doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [internalProps.variables, resetTrigger]);
     useEffect(() => {
@@ -228,6 +244,11 @@ const usePaginationQuery = (document, { ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [after]);
+    useEffect(() => () => {
+        abortController.abort();
+        // We need ensure we reset the abort controller on unmounting, as it's not possible to re-use an aborted controller.
+        setAbortController(new AbortController());
+    }, [abortController]);
     return useMemo(() => {
         return {
             data,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "0.0.269",
+  "version": "0.0.271",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {