@trackunit/react-graphql-hooks 1.3.49 → 1.3.52

package/index.cjs.js

@@ -141,16 +141,22 @@ const usePaginationQuery = (document, { ...props }) => {
     // 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.
     // If ever a better solution is found, please remove this ugliness.
-    const stableVariables = react.useRef(props.variables);
-    const internalProps = react.useMemo(() => {
-        if (!isEqual(props.variables, stableVariables.current)) {
-            stableVariables.current = props.variables;
+    const [stableVariables, setStableVariables] = react.useState(props.variables);
+    // Use ref for variables comparison to avoid setState inside useMemo
+    const variablesRef = react.useRef(props.variables);
+    // Use effect to update the ref when props.variables changes
+    react.useEffect(() => {
+        if (!isEqual(props.variables, variablesRef.current)) {
+            variablesRef.current = props.variables;
+            setStableVariables(props.variables);
         }
+    }, [props.variables]);
+    const internalProps = react.useMemo(() => {
         return {
             ...props,
-            variables: stableVariables.current,
+            variables: stableVariables,
         };
-    }, [props]);
+    }, [props, stableVariables]);
     const [, { fetchMore, networkStatus }] = ApolloClient__namespace.useLazyQuery(document, {
         ...internalProps,
         context: {
@@ -177,7 +183,7 @@ const usePaginationQuery = (document, { ...props }) => {
     const onReset = react.useCallback(() => {
         setResetTrigger(prev => prev + 1);
     }, []);
-    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = reactTablePagination.useRelayPagination({
+    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after, last, before }, } = reactTablePagination.useRelayPagination({
         pageSize: internalProps.pageSize || internalProps.variables?.first || reactTablePagination.defaultPageSize,
         onReset,
     });
@@ -189,7 +195,7 @@ const usePaginationQuery = (document, { ...props }) => {
         /**
          * To support pagination with page and pageSize, we need to convert the variables from first and after.
          */
-        let fetchMoreVariables = {
+        const fetchMoreVariables = {
             ...internalProps.variables,
             ...(internalProps.variables && "page" in internalProps.variables && "pageSize" in internalProps.variables
                 ? // eslint-disable-next-line local-rules/no-typescript-assertion
@@ -199,37 +205,25 @@ const usePaginationQuery = (document, { ...props }) => {
                     }
                 : { ...variables }),
         };
-        // To support "pageable" queries we do it here! REMOVE once the serviceplans are updated to use the new pagination.
-        fetchMoreVariables = {
-            ...("pageable" in fetchMoreVariables
-                ? {
-                    ...fetchMoreVariables,
-                    pageable: {
-                        first: fetchMoreVariables.first,
-                        last: fetchMoreVariables.last,
-                        before: fetchMoreVariables.before,
-                        after: fetchMoreVariables.after,
-                        pageSize: fetchMoreVariables.pageSize,
-                    },
-                }
-                : { ...fetchMoreVariables }),
-        };
         fetchMore({
             variables: fetchMoreVariables,
-            updateQuery: (_, { fetchMoreResult }) => {
+            updateQuery: (previousResult, { fetchMoreResult }) => {
                 if (abortController.signal.aborted) {
                     // if prev does not hold any data we don't want to return it,
                     // since it will make the cache output an error to the console.
                     // https://github.com/apollographql/apollo-client/issues/8677
                     if (prev) {
-                        // eslint-disable-next-line local-rules/no-typescript-assertion
-                        return sharedUtils.objectKeys(prev).length === 0 ? undefined : prev;
+                        return sharedUtils.objectKeys(prev).length === 0
+                            ? undefined
+                            : prev;
                     }
                     // eslint-disable-next-line local-rules/no-typescript-assertion
                     return undefined;
                 }
-                setLastFetchedData(fetchMoreResult);
-                const result = internalProps.updateQuery(prev, fetchMoreResult);
+                // Safely handle Apollo types
+                const typedResult = fetchMoreResult;
+                setLastFetchedData(typedResult);
+                const result = internalProps.updateQuery(prev, typedResult);
                 setPageInfo(result.pageInfo || null);
                 setData(result.data);
                 setIsLoading(false);
@@ -254,15 +248,49 @@ const usePaginationQuery = (document, { ...props }) => {
         setData(undefined);
         reset();
     }, [internalProps.variables, reset]);
+    // Use a ref to track the current value of first variable
+    const lastRef = react.useRef(last);
+    react.useEffect(() => {
+        lastRef.current = last;
+    }, [last]);
+    const beforeRef = react.useRef(before);
     react.useEffect(() => {
-        doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        beforeRef.current = before;
+    }, [before]);
+    const firstRef = react.useRef(first);
+    react.useEffect(() => {
+        firstRef.current = first;
+    }, [first]);
+    // Use a ref to track the current data
+    const dataRef = react.useRef(data);
+    react.useEffect(() => {
+        dataRef.current = data;
+    }, [data]);
+    // Store doFetchMore in a ref to avoid dependency cycles
+    const doFetchMoreRef = react.useRef(doFetchMore);
+    react.useEffect(() => {
+        doFetchMoreRef.current = doFetchMore;
+    }, [doFetchMore]);
+    // Stabilize the fetchMore call by using refs instead of direct dependencies
+    react.useEffect(() => {
+        const fetchVariables = {
+            first: firstRef.current,
+            last: undefined,
+            before: undefined,
+            after: undefined,
+        };
+        // Use the ref version to avoid dependency cycles
+        doFetchMoreRef.current(fetchVariables, undefined);
+        // Removed doFetchMore from dependencies to prevent refetch loops
     }, [internalProps.variables, resetTrigger]);
+    // Stabilize the pagination effect
     react.useEffect(() => {
         if (after) {
-            doFetchMore({ first, after }, data);
+            const fetchVariables = { first: firstRef.current, after, last: lastRef.current, before: beforeRef.current };
+            // Use the ref version to avoid dependency cycles
+            doFetchMoreRef.current(fetchVariables, dataRef.current);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // Removed doFetchMore from dependencies to prevent refetch loops
     }, [after]);
     return react.useMemo(() => {
         return {

package/index.esm.js

@@ -4,7 +4,7 @@ import { truthy, objectKeys } from '@trackunit/shared-utils';
 import * as ApolloClient from '@apollo/client';
 import { useRelayPagination, defaultPageSize } from '@trackunit/react-table-pagination';
 import isEqual from 'lodash/isEqual';
-import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 
 var defaultTranslations = {
 	
@@ -120,16 +120,22 @@ const usePaginationQuery = (document, { ...props }) => {
     // 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.
     // If ever a better solution is found, please remove this ugliness.
-    const stableVariables = useRef(props.variables);
-    const internalProps = useMemo(() => {
-        if (!isEqual(props.variables, stableVariables.current)) {
-            stableVariables.current = props.variables;
+    const [stableVariables, setStableVariables] = useState(props.variables);
+    // Use ref for variables comparison to avoid setState inside useMemo
+    const variablesRef = useRef(props.variables);
+    // Use effect to update the ref when props.variables changes
+    useEffect(() => {
+        if (!isEqual(props.variables, variablesRef.current)) {
+            variablesRef.current = props.variables;
+            setStableVariables(props.variables);
         }
+    }, [props.variables]);
+    const internalProps = useMemo(() => {
         return {
             ...props,
-            variables: stableVariables.current,
+            variables: stableVariables,
         };
-    }, [props]);
+    }, [props, stableVariables]);
     const [, { fetchMore, networkStatus }] = ApolloClient.useLazyQuery(document, {
         ...internalProps,
         context: {
@@ -156,7 +162,7 @@ const usePaginationQuery = (document, { ...props }) => {
     const onReset = useCallback(() => {
         setResetTrigger(prev => prev + 1);
     }, []);
-    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = useRelayPagination({
+    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after, last, before }, } = useRelayPagination({
         pageSize: internalProps.pageSize || internalProps.variables?.first || defaultPageSize,
         onReset,
     });
@@ -168,7 +174,7 @@ const usePaginationQuery = (document, { ...props }) => {
         /**
          * To support pagination with page and pageSize, we need to convert the variables from first and after.
          */
-        let fetchMoreVariables = {
+        const fetchMoreVariables = {
             ...internalProps.variables,
             ...(internalProps.variables && "page" in internalProps.variables && "pageSize" in internalProps.variables
                 ? // eslint-disable-next-line local-rules/no-typescript-assertion
@@ -178,37 +184,25 @@ const usePaginationQuery = (document, { ...props }) => {
                     }
                 : { ...variables }),
         };
-        // To support "pageable" queries we do it here! REMOVE once the serviceplans are updated to use the new pagination.
-        fetchMoreVariables = {
-            ...("pageable" in fetchMoreVariables
-                ? {
-                    ...fetchMoreVariables,
-                    pageable: {
-                        first: fetchMoreVariables.first,
-                        last: fetchMoreVariables.last,
-                        before: fetchMoreVariables.before,
-                        after: fetchMoreVariables.after,
-                        pageSize: fetchMoreVariables.pageSize,
-                    },
-                }
-                : { ...fetchMoreVariables }),
-        };
         fetchMore({
             variables: fetchMoreVariables,
-            updateQuery: (_, { fetchMoreResult }) => {
+            updateQuery: (previousResult, { fetchMoreResult }) => {
                 if (abortController.signal.aborted) {
                     // if prev does not hold any data we don't want to return it,
                     // since it will make the cache output an error to the console.
                     // https://github.com/apollographql/apollo-client/issues/8677
                     if (prev) {
-                        // eslint-disable-next-line local-rules/no-typescript-assertion
-                        return objectKeys(prev).length === 0 ? undefined : prev;
+                        return objectKeys(prev).length === 0
+                            ? undefined
+                            : prev;
                     }
                     // eslint-disable-next-line local-rules/no-typescript-assertion
                     return undefined;
                 }
-                setLastFetchedData(fetchMoreResult);
-                const result = internalProps.updateQuery(prev, fetchMoreResult);
+                // Safely handle Apollo types
+                const typedResult = fetchMoreResult;
+                setLastFetchedData(typedResult);
+                const result = internalProps.updateQuery(prev, typedResult);
                 setPageInfo(result.pageInfo || null);
                 setData(result.data);
                 setIsLoading(false);
@@ -233,15 +227,49 @@ const usePaginationQuery = (document, { ...props }) => {
         setData(undefined);
         reset();
     }, [internalProps.variables, reset]);
+    // Use a ref to track the current value of first variable
+    const lastRef = useRef(last);
+    useEffect(() => {
+        lastRef.current = last;
+    }, [last]);
+    const beforeRef = useRef(before);
     useEffect(() => {
-        doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        beforeRef.current = before;
+    }, [before]);
+    const firstRef = useRef(first);
+    useEffect(() => {
+        firstRef.current = first;
+    }, [first]);
+    // Use a ref to track the current data
+    const dataRef = useRef(data);
+    useEffect(() => {
+        dataRef.current = data;
+    }, [data]);
+    // Store doFetchMore in a ref to avoid dependency cycles
+    const doFetchMoreRef = useRef(doFetchMore);
+    useEffect(() => {
+        doFetchMoreRef.current = doFetchMore;
+    }, [doFetchMore]);
+    // Stabilize the fetchMore call by using refs instead of direct dependencies
+    useEffect(() => {
+        const fetchVariables = {
+            first: firstRef.current,
+            last: undefined,
+            before: undefined,
+            after: undefined,
+        };
+        // Use the ref version to avoid dependency cycles
+        doFetchMoreRef.current(fetchVariables, undefined);
+        // Removed doFetchMore from dependencies to prevent refetch loops
     }, [internalProps.variables, resetTrigger]);
+    // Stabilize the pagination effect
     useEffect(() => {
         if (after) {
-            doFetchMore({ first, after }, data);
+            const fetchVariables = { first: firstRef.current, after, last: lastRef.current, before: beforeRef.current };
+            // Use the ref version to avoid dependency cycles
+            doFetchMoreRef.current(fetchVariables, dataRef.current);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // Removed doFetchMore from dependencies to prevent refetch loops
     }, [after]);
     return useMemo(() => {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "1.3.49",
+  "version": "1.3.52",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,9 +10,9 @@
     "@apollo/client": "3.10.4",
     "react": "19.0.0",
     "lodash": "4.17.21",
-    "@trackunit/i18n-library-translation": "1.3.48",
-    "@trackunit/shared-utils": "1.5.44",
-    "@trackunit/react-table-pagination": "1.3.45"
+    "@trackunit/i18n-library-translation": "1.3.50",
+    "@trackunit/shared-utils": "1.5.46",
+    "@trackunit/react-table-pagination": "1.3.47"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",