@trackunit/react-graphql-hooks 0.0.271 → 0.0.273

package/index.cjs.js

@@ -134,10 +134,9 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @returns {*}  {PaginationQuery}
  */
 const usePaginationQuery = (document, { ...props }) => {
-    var _a, _b;
+    var _a;
     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.
@@ -154,13 +153,6 @@ 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) {
@@ -179,13 +171,14 @@ 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 || ((_b = internalProps.variables) === null || _b === void 0 ? void 0 : _b.first) || reactTablePagination.defaultPageSize,
+        pageSize: internalProps.pageSize || ((_a = internalProps.variables) === null || _a === void 0 ? void 0 : _a.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.
@@ -236,27 +229,18 @@ 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;
-            }
         });
-    }, [internalProps, setIsLoading, fetchMore, abortController, setPageInfo]);
+        return abortController;
+    }, [setIsLoading, fetchMore, internalProps, setPageInfo]);
     react.useEffect(() => {
         setData(undefined);
         reset();
     }, [internalProps.variables, reset]);
     react.useEffect(() => {
-        doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
+        const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [internalProps.variables, resetTrigger]);
     react.useEffect(() => {
@@ -265,11 +249,6 @@ 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,10 +113,9 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @returns {*}  {PaginationQuery}
  */
 const usePaginationQuery = (document, { ...props }) => {
-    var _a, _b;
+    var _a;
     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.
@@ -133,13 +132,6 @@ 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) {
@@ -158,13 +150,14 @@ const usePaginationQuery = (document, { ...props }) => {
         setResetTrigger(prev => prev + 1);
     }, []);
     const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = useRelayPagination({
-        pageSize: internalProps.pageSize || ((_b = internalProps.variables) === null || _b === void 0 ? void 0 : _b.first) || defaultPageSize,
+        pageSize: internalProps.pageSize || ((_a = internalProps.variables) === null || _a === void 0 ? void 0 : _a.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.
@@ -215,27 +208,18 @@ 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;
-            }
         });
-    }, [internalProps, setIsLoading, fetchMore, abortController, setPageInfo]);
+        return abortController;
+    }, [setIsLoading, fetchMore, internalProps, setPageInfo]);
     useEffect(() => {
         setData(undefined);
         reset();
     }, [internalProps.variables, reset]);
     useEffect(() => {
-        doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
+        const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [internalProps.variables, resetTrigger]);
     useEffect(() => {
@@ -244,11 +228,6 @@ 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.271",
+  "version": "0.0.273",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {