@trackunit/react-graphql-hooks 1.0.15 → 1.0.17

package/index.cjs.js

@@ -79,14 +79,14 @@ const setupLibraryTranslations = () => {
  * @returns {TEdge[]} A new array with the edges from the previous array and the new array, but only if the item's key is unique.
  */
 const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
-    const previousIds = (previousEdges === null || previousEdges === void 0 ? void 0 : previousEdges.map(edge => edge.node[key])) || [];
-    const newIds = (newEdges === null || newEdges === void 0 ? void 0 : newEdges.map(edge => edge.node[key])) || [];
+    const previousIds = previousEdges?.map(edge => edge.node[key]) || [];
+    const newIds = newEdges?.map(edge => edge.node[key]) || [];
     const mergedIds = [...previousIds, ...newIds];
     const uniqueIds = [...new Set(mergedIds)];
     return uniqueIds
         .map(id => {
-        const previousEdge = previousEdges === null || previousEdges === void 0 ? void 0 : previousEdges.find(edge => edge.node[key] === id);
-        const newEdge = newEdges === null || newEdges === void 0 ? void 0 : newEdges.find(edge => edge.node[key] === id);
+        const previousEdge = previousEdges?.find(edge => edge.node[key] === id);
+        const newEdge = newEdges?.find(edge => edge.node[key] === id);
         return newEdge || previousEdge;
     })
         .filter(sharedUtils.truthy);
@@ -134,9 +134,9 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @returns {*}  {PaginationQuery}
  */
 const usePaginationQuery = (document, { ...props }) => {
-    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.
@@ -153,6 +153,13 @@ const usePaginationQuery = (document, { ...props }) => {
     }, [props]);
     const [, { fetchMore, networkStatus }] = ApolloClient__namespace.useLazyQuery(document, {
         ...internalProps,
+        context: {
+            ...internalProps.context,
+            fetchOptions: {
+                ...internalProps.context?.fetchOptions,
+                signal: abortController.signal,
+            },
+        },
         notifyOnNetworkStatusChange: true, // Needed to update networkStatus
         onCompleted: () => {
             if (networkStatus === ApolloClient__namespace.NetworkStatus.refetch) {
@@ -171,14 +178,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 || internalProps.variables?.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 +235,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 +264,16 @@ const usePaginationQuery = (document, { ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [after]);
+    react.useEffect(() => {
+        return () => {
+            abortController.abort();
+            setAbortController(new AbortController());
+        };
+    }, 
+    // Due to issues with StritMode and useEffect cleanup, we need to disable the exhaustive-deps rule here.
+    // For some reason, when the rule is enabled, the cleanup function is not called when the component is unmounted properly.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     return react.useMemo(() => {
         return {
             data,

package/index.esm.js

@@ -58,14 +58,14 @@ const setupLibraryTranslations = () => {
  * @returns {TEdge[]} A new array with the edges from the previous array and the new array, but only if the item's key is unique.
  */
 const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
-    const previousIds = (previousEdges === null || previousEdges === void 0 ? void 0 : previousEdges.map(edge => edge.node[key])) || [];
-    const newIds = (newEdges === null || newEdges === void 0 ? void 0 : newEdges.map(edge => edge.node[key])) || [];
+    const previousIds = previousEdges?.map(edge => edge.node[key]) || [];
+    const newIds = newEdges?.map(edge => edge.node[key]) || [];
     const mergedIds = [...previousIds, ...newIds];
     const uniqueIds = [...new Set(mergedIds)];
     return uniqueIds
         .map(id => {
-        const previousEdge = previousEdges === null || previousEdges === void 0 ? void 0 : previousEdges.find(edge => edge.node[key] === id);
-        const newEdge = newEdges === null || newEdges === void 0 ? void 0 : newEdges.find(edge => edge.node[key] === id);
+        const previousEdge = previousEdges?.find(edge => edge.node[key] === id);
+        const newEdge = newEdges?.find(edge => edge.node[key] === id);
         return newEdge || previousEdge;
     })
         .filter(truthy);
@@ -113,9 +113,9 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @returns {*}  {PaginationQuery}
  */
 const usePaginationQuery = (document, { ...props }) => {
-    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.
@@ -132,6 +132,13 @@ const usePaginationQuery = (document, { ...props }) => {
     }, [props]);
     const [, { fetchMore, networkStatus }] = ApolloClient.useLazyQuery(document, {
         ...internalProps,
+        context: {
+            ...internalProps.context,
+            fetchOptions: {
+                ...internalProps.context?.fetchOptions,
+                signal: abortController.signal,
+            },
+        },
         notifyOnNetworkStatusChange: true, // Needed to update networkStatus
         onCompleted: () => {
             if (networkStatus === ApolloClient.NetworkStatus.refetch) {
@@ -150,14 +157,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 || internalProps.variables?.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 +214,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 +243,16 @@ const usePaginationQuery = (document, { ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [after]);
+    useEffect(() => {
+        return () => {
+            abortController.abort();
+            setAbortController(new AbortController());
+        };
+    }, 
+    // Due to issues with StritMode and useEffect cleanup, we need to disable the exhaustive-deps rule here.
+    // For some reason, when the rule is enabled, the cleanup function is not called when the component is unmounted properly.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     return useMemo(() => {
         return {
             data,

package/package.json

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