@trackunit/react-graphql-hooks 1.10.9 → 1.10.12

package/index.cjs.js

@@ -127,6 +127,121 @@ const useLazyQuery = (document, options) => {
     return react.useMemo(() => [executeQuery, enhancedResult], [executeQuery, enhancedResult]);
 };
 
+/**
+ * Converts pagination variables from cursor-based (first/after) to page-based (page/pageSize) if needed.
+ * Returns the appropriate variables based on the pagination type.
+ */
+const convertPaginationVariables = (baseVariables, paginationVars) => {
+    const usesPageBasedPagination = baseVariables !== undefined && "page" in baseVariables && "pageSize" in baseVariables;
+    const paginationVariables = usesPageBasedPagination
+        ? {
+            pageSize: paginationVars.first,
+            page: Number(paginationVars.after ?? 0),
+        }
+        : { ...paginationVars };
+    return {
+        ...baseVariables,
+        ...paginationVariables,
+    };
+};
+/**
+ * Creates an update query handler for Apollo's fetchMore.
+ * Handles aborted requests and merges new data with existing data.
+ */
+const createUpdateQueryHandler = (params) => {
+    return (_previousResult, { fetchMoreResult }) => {
+        // Handle aborted requests by returning previous data
+        if (params.abortSignal.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 (params.prev !== undefined && params.prev !== null) {
+                // Type assertion required: Apollo's updateQuery expects its own result type
+                return sharedUtils.objectKeys(params.prev).length === 0
+                    ? undefined
+                    : params.prev;
+            }
+            return undefined;
+        }
+        // Type assertion required: Apollo's fetchMoreResult has complex internal types
+        // that need to be cast to our TData generic for type-safe usage
+        const typedResult = fetchMoreResult;
+        params.onLastFetchedUpdate(typedResult);
+        const result = params.onUpdate(params.prev, typedResult);
+        params.onPageInfoUpdate(result.pageInfo ?? null);
+        params.onDataUpdate(result.data);
+        params.onLoadingComplete();
+        return result.data;
+    };
+};
+/**
+ * Creates a reducer function for managing pagination state.
+ * Handles data updates, reset, and reset trigger increments.
+ */
+const createPaginationReducer = () => {
+    return (state, action) => {
+        switch (action.type) {
+            case "SET_DATA": {
+                return { ...state, data: action.payload };
+            }
+            case "SET_LAST_FETCHED_DATA": {
+                return { ...state, lastFetchedData: action.payload };
+            }
+            case "RESET": {
+                return { ...state, data: undefined, lastFetchedData: undefined };
+            }
+            case "INCREMENT_RESET_TRIGGER": {
+                return { ...state, resetTrigger: state.resetTrigger + 1 };
+            }
+            default: {
+                throw new Error(`${action} is not a known action type`);
+            }
+        }
+    };
+};
+
+/**
+ * Hook to stabilize variables based on deep equality comparison.
+ * Prevents unnecessary re-fetches when parent components pass new variable objects
+ * with the same content.
+ */
+const useStableVariables = (variables) => {
+    const [stableVariables, setStableVariables] = react.useState(variables);
+    reactComponents.useWatch({
+        value: variables,
+        onChange: setStableVariables,
+        skip: !Boolean(variables),
+    });
+    return stableVariables;
+};
+/**
+ * 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;
+        }
+        return () => {
+            abortController.abort();
+        };
+    }, [abortController, firstRender]);
+    return { abortSignal: abortController.signal };
+};
+/**
+ * Hook to sync a value to a ref and return the ref.
+ * Useful for avoiding dependency cycles in effects.
+ */
+const useSyncedRef = (value) => {
+    const ref = react.useRef(value);
+    react.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+};
 /**
  * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
  *
@@ -137,17 +252,15 @@ const useLazyQuery = (document, options) => {
  * lastFetchedData is used to store the last fetched data, so you can update data according to last page.
  *
  * @example
- *
  * const {
  *   data,
  *   loading,
  *   pagination,
  *   lastFetchedData,
- *} = usePaginationQuery({
- *   query: myLazyQuery, // <-- myLazyQuery is the graphql LazyQuery to run pagination for.
+ * } = usePaginationQuery(MyAssetsDocument, {
  *   updateQuery: (previous, newData) => {
- *    // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
- *    if (newData?.assets?.edges) {
+ *     // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
+ *     if (newData?.assets?.edges) {
  *       return {
  *         data: {
  *           ...newData,
@@ -162,40 +275,23 @@ const useLazyQuery = (document, options) => {
  *     return { data: newData, pageInfo: newData.assets.pageInfo };
  *   },
  * });
- * @template TData
- * @template TVariables
- * @param {TypedDocumentNode<TData, TVariables>} document - The GraphQL document (query or mutation).
- * @param {PaginationQueryProps<TData, TVariables>} props - The properties for configuring the query. This includes the `updateQuery` function for merging new and existing data, and options for pagination such as `pageSize`. Also includes other lazy query hook options from Apollo Client.
- * @returns {*}  {PaginationQuery}
+ * @template TData - The type of the query result data.
+ * @template TVariables - The type of the query variables.
+ * @param document - The GraphQL query document.
+ * @param props - The properties for configuring the query. This includes the `updateQuery` function for merging new and existing data, and options for pagination such as `pageSize`. Also includes other lazy query hook options from Apollo Client.
+ * @returns {PaginationQuery<TData>} The pagination query result containing data, loading state, pagination controls, and lastFetchedData.
  */
 const usePaginationQuery = (document, props) => {
-    const [lastFetchedData, setLastFetchedData] = react.useState();
-    const [resetTrigger, setResetTrigger] = react.useState(0);
-    const [abortController, setAbortController] = react.useState(new AbortController());
-    const [lastAbortController, setLastAbortController] = react.useState(undefined);
-    // 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.
-    // If ever a better solution is found, please remove this ugliness.
-    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 (!esToolkit.isEqual(props.variables, variablesRef.current)) {
-            variablesRef.current = props.variables;
-            setStableVariables(props.variables);
-            if (!props.skip) {
-                if (lastAbortController) {
-                    lastAbortController.abort();
-                }
-                const newAbortController = new AbortController();
-                setLastAbortController(newAbortController);
-                setAbortController(newAbortController);
-            }
-        }
-        // eslint-disable-next-line
-    }, [props.variables]);
+    // Use reducer to manage interconnected pagination state
+    const [state, dispatch] = react.useReducer(createPaginationReducer(), {
+        data: undefined,
+        lastFetchedData: undefined,
+        resetTrigger: 0,
+    });
+    // Stabilize variables to prevent unnecessary re-fetches
+    const stableVariables = useStableVariables(props.variables);
+    // Manage abort controller for cancellable requests
+    const { abortSignal } = useAbortableRequest();
     const internalProps = react.useMemo(() => {
         return {
             ...props,
@@ -208,7 +304,7 @@ const usePaginationQuery = (document, props) => {
             ...internalProps.context,
             fetchOptions: {
                 ...internalProps.context?.fetchOptions,
-                signal: abortController.signal,
+                signal: abortSignal,
             },
         },
         pollInterval: internalProps.pollInterval,
@@ -216,7 +312,7 @@ const usePaginationQuery = (document, props) => {
         onCompleted: completedData => {
             if (networkStatus === client.NetworkStatus.refetch) {
                 // trigger reset for refetchQueries for the provided document.
-                setResetTrigger(prev => prev + 1);
+                dispatch({ type: "INCREMENT_RESET_TRIGGER" });
             }
             if (internalProps.onCompleted) {
                 internalProps.onCompleted(completedData);
@@ -228,15 +324,14 @@ const usePaginationQuery = (document, props) => {
         nextFetchPolicy: "network-only",
         initialFetchPolicy: "network-only",
     });
-    const [data, setData] = react.useState();
     const onReset = react.useCallback(() => {
-        setResetTrigger(prev => prev + 1);
+        dispatch({ type: "INCREMENT_RESET_TRIGGER" });
     }, []);
     react.useEffect(() => {
         onReset();
     }, [document, onReset]);
     const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after, last, before }, } = reactComponents.useRelayPagination({
-        pageSize: internalProps.pageSize || internalProps.variables?.first || reactComponents.defaultPageSize,
+        pageSize: internalProps.pageSize ?? internalProps.variables?.first ?? reactComponents.defaultPageSize,
         onReset,
     });
     const doFetchMore = react.useCallback((variables, prev) => {
@@ -245,47 +340,25 @@ const usePaginationQuery = (document, props) => {
             return;
         }
         setIsLoading(true);
-        /**
-         * To support pagination with page and pageSize, we need to convert the variables from first and after.
-         */
-        const fetchMoreVariables = {
-            ...internalProps.variables,
-            ...(internalProps.variables && "page" in internalProps.variables && "pageSize" in internalProps.variables
-                ? {
-                    pageSize: variables.first,
-                    page: Number(variables.after) || 0,
-                }
-                : { ...variables }),
-        };
+        // Convert pagination variables based on pagination type (cursor vs page-based)
+        const fetchMoreVariables = convertPaginationVariables(internalProps.variables, variables);
         fetchMore({
             variables: fetchMoreVariables,
-            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) {
-                        return sharedUtils.objectKeys(prev).length === 0
-                            ? undefined
-                            : prev;
-                    }
-                    return undefined;
-                }
-                // Safely handle Apollo types
-                const typedResult = fetchMoreResult;
-                setLastFetchedData(typedResult);
-                const result = internalProps.updateQuery(prev, typedResult);
-                setPageInfo(result.pageInfo || null);
-                setData(result.data);
-                setIsLoading(false);
-                return result.data;
-            },
+            updateQuery: createUpdateQueryHandler({
+                abortSignal,
+                prev,
+                onUpdate: internalProps.updateQuery,
+                onDataUpdate: (data) => dispatch({ type: "SET_DATA", payload: data }),
+                onLastFetchedUpdate: (data) => dispatch({ type: "SET_LAST_FETCHED_DATA", payload: data }),
+                onPageInfoUpdate: setPageInfo,
+                onLoadingComplete: () => setIsLoading(false),
+            }),
             // 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 => {
             setIsLoading(false);
-            if (abortController.signal.aborted) {
+            if (abortSignal.aborted) {
                 return;
             }
             if (internalProps.onError) {
@@ -295,35 +368,18 @@ const usePaginationQuery = (document, props) => {
                 throw error;
             }
         });
-    }, [internalProps, setIsLoading, fetchMore, abortController, setPageInfo]);
+    }, [internalProps, setIsLoading, fetchMore, abortSignal, setPageInfo]);
     react.useEffect(() => {
-        setData(undefined);
+        dispatch({ type: "RESET" });
         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(() => {
-        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
+    }, [stableVariables, reset]);
+    // Store pagination values in refs to avoid triggering unnecessary effect re-runs
+    const firstRef = useSyncedRef(first);
+    const lastRef = useSyncedRef(last);
+    const beforeRef = useSyncedRef(before);
+    const dataRef = useSyncedRef(state.data);
+    const doFetchMoreRef = useSyncedRef(doFetchMore);
+    // Fetch initial page when variables or reset trigger changes
     react.useEffect(() => {
         const fetchVariables = {
             first: firstRef.current,
@@ -331,30 +387,34 @@ const usePaginationQuery = (document, props) => {
             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
+        // Refs are stable and don't need to trigger re-runs, but included to satisfy linter
+    }, [stableVariables, state.resetTrigger, firstRef, doFetchMoreRef]);
+    // Fetch next/previous page when after cursor changes
     react.useEffect(() => {
-        if (after) {
-            const fetchVariables = { first: firstRef.current, after, last: lastRef.current, before: beforeRef.current };
-            // Use the ref version to avoid dependency cycles
+        if (after !== undefined && after !== null) {
+            const fetchVariables = {
+                first: firstRef.current,
+                after,
+                last: lastRef.current,
+                before: beforeRef.current,
+            };
             doFetchMoreRef.current(fetchVariables, dataRef.current);
         }
-        // Removed doFetchMore from dependencies to prevent refetch loops
-    }, [after]);
+        // Refs are stable and don't need to trigger re-runs, but included to satisfy linter
+    }, [after, firstRef, lastRef, beforeRef, dataRef, doFetchMoreRef]);
     return react.useMemo(() => {
         return {
-            data: data || previousData,
+            data: state.data ?? previousData,
             previousData,
             loading: isLoading || lazyLoading,
             pagination: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage },
-            lastFetchedData,
+            lastFetchedData: state.lastFetchedData,
             reset,
         };
     }, [
-        data,
+        state.data,
+        state.lastFetchedData,
         isLoading,
         lazyLoading,
         setIsLoading,
@@ -363,7 +423,6 @@ const usePaginationQuery = (document, props) => {
         reset,
         nextPage,
         previousPage,
-        lastFetchedData,
         previousData,
     ]);
 };

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, isEqual } from 'es-toolkit';
-import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import { useRelayPagination, defaultPageSize } from '@trackunit/react-components';
+import { omit } from 'es-toolkit';
+import { useMemo, useReducer, useCallback, useEffect, useState, useRef } from 'react';
+import { useRelayPagination, defaultPageSize, useWatch, useIsFirstRender } from '@trackunit/react-components';
 
 var defaultTranslations = {
 	
@@ -125,6 +125,121 @@ const useLazyQuery = (document, options) => {
     return useMemo(() => [executeQuery, enhancedResult], [executeQuery, enhancedResult]);
 };
 
+/**
+ * Converts pagination variables from cursor-based (first/after) to page-based (page/pageSize) if needed.
+ * Returns the appropriate variables based on the pagination type.
+ */
+const convertPaginationVariables = (baseVariables, paginationVars) => {
+    const usesPageBasedPagination = baseVariables !== undefined && "page" in baseVariables && "pageSize" in baseVariables;
+    const paginationVariables = usesPageBasedPagination
+        ? {
+            pageSize: paginationVars.first,
+            page: Number(paginationVars.after ?? 0),
+        }
+        : { ...paginationVars };
+    return {
+        ...baseVariables,
+        ...paginationVariables,
+    };
+};
+/**
+ * Creates an update query handler for Apollo's fetchMore.
+ * Handles aborted requests and merges new data with existing data.
+ */
+const createUpdateQueryHandler = (params) => {
+    return (_previousResult, { fetchMoreResult }) => {
+        // Handle aborted requests by returning previous data
+        if (params.abortSignal.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 (params.prev !== undefined && params.prev !== null) {
+                // Type assertion required: Apollo's updateQuery expects its own result type
+                return objectKeys(params.prev).length === 0
+                    ? undefined
+                    : params.prev;
+            }
+            return undefined;
+        }
+        // Type assertion required: Apollo's fetchMoreResult has complex internal types
+        // that need to be cast to our TData generic for type-safe usage
+        const typedResult = fetchMoreResult;
+        params.onLastFetchedUpdate(typedResult);
+        const result = params.onUpdate(params.prev, typedResult);
+        params.onPageInfoUpdate(result.pageInfo ?? null);
+        params.onDataUpdate(result.data);
+        params.onLoadingComplete();
+        return result.data;
+    };
+};
+/**
+ * Creates a reducer function for managing pagination state.
+ * Handles data updates, reset, and reset trigger increments.
+ */
+const createPaginationReducer = () => {
+    return (state, action) => {
+        switch (action.type) {
+            case "SET_DATA": {
+                return { ...state, data: action.payload };
+            }
+            case "SET_LAST_FETCHED_DATA": {
+                return { ...state, lastFetchedData: action.payload };
+            }
+            case "RESET": {
+                return { ...state, data: undefined, lastFetchedData: undefined };
+            }
+            case "INCREMENT_RESET_TRIGGER": {
+                return { ...state, resetTrigger: state.resetTrigger + 1 };
+            }
+            default: {
+                throw new Error(`${action} is not a known action type`);
+            }
+        }
+    };
+};
+
+/**
+ * Hook to stabilize variables based on deep equality comparison.
+ * Prevents unnecessary re-fetches when parent components pass new variable objects
+ * with the same content.
+ */
+const useStableVariables = (variables) => {
+    const [stableVariables, setStableVariables] = useState(variables);
+    useWatch({
+        value: variables,
+        onChange: setStableVariables,
+        skip: !Boolean(variables),
+    });
+    return stableVariables;
+};
+/**
+ * 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;
+        }
+        return () => {
+            abortController.abort();
+        };
+    }, [abortController, firstRender]);
+    return { abortSignal: abortController.signal };
+};
+/**
+ * Hook to sync a value to a ref and return the ref.
+ * Useful for avoiding dependency cycles in effects.
+ */
+const useSyncedRef = (value) => {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+};
 /**
  * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
  *
@@ -135,17 +250,15 @@ const useLazyQuery = (document, options) => {
  * lastFetchedData is used to store the last fetched data, so you can update data according to last page.
  *
  * @example
- *
  * const {
  *   data,
  *   loading,
  *   pagination,
  *   lastFetchedData,
- *} = usePaginationQuery({
- *   query: myLazyQuery, // <-- myLazyQuery is the graphql LazyQuery to run pagination for.
+ * } = usePaginationQuery(MyAssetsDocument, {
  *   updateQuery: (previous, newData) => {
- *    // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
- *    if (newData?.assets?.edges) {
+ *     // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
+ *     if (newData?.assets?.edges) {
  *       return {
  *         data: {
  *           ...newData,
@@ -160,40 +273,23 @@ const useLazyQuery = (document, options) => {
  *     return { data: newData, pageInfo: newData.assets.pageInfo };
  *   },
  * });
- * @template TData
- * @template TVariables
- * @param {TypedDocumentNode<TData, TVariables>} document - The GraphQL document (query or mutation).
- * @param {PaginationQueryProps<TData, TVariables>} props - The properties for configuring the query. This includes the `updateQuery` function for merging new and existing data, and options for pagination such as `pageSize`. Also includes other lazy query hook options from Apollo Client.
- * @returns {*}  {PaginationQuery}
+ * @template TData - The type of the query result data.
+ * @template TVariables - The type of the query variables.
+ * @param document - The GraphQL query document.
+ * @param props - The properties for configuring the query. This includes the `updateQuery` function for merging new and existing data, and options for pagination such as `pageSize`. Also includes other lazy query hook options from Apollo Client.
+ * @returns {PaginationQuery<TData>} The pagination query result containing data, loading state, pagination controls, and lastFetchedData.
  */
 const usePaginationQuery = (document, props) => {
-    const [lastFetchedData, setLastFetchedData] = useState();
-    const [resetTrigger, setResetTrigger] = useState(0);
-    const [abortController, setAbortController] = useState(new AbortController());
-    const [lastAbortController, setLastAbortController] = useState(undefined);
-    // 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.
-    // If ever a better solution is found, please remove this ugliness.
-    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);
-            if (!props.skip) {
-                if (lastAbortController) {
-                    lastAbortController.abort();
-                }
-                const newAbortController = new AbortController();
-                setLastAbortController(newAbortController);
-                setAbortController(newAbortController);
-            }
-        }
-        // eslint-disable-next-line
-    }, [props.variables]);
+    // Use reducer to manage interconnected pagination state
+    const [state, dispatch] = useReducer(createPaginationReducer(), {
+        data: undefined,
+        lastFetchedData: undefined,
+        resetTrigger: 0,
+    });
+    // Stabilize variables to prevent unnecessary re-fetches
+    const stableVariables = useStableVariables(props.variables);
+    // Manage abort controller for cancellable requests
+    const { abortSignal } = useAbortableRequest();
     const internalProps = useMemo(() => {
         return {
             ...props,
@@ -206,7 +302,7 @@ const usePaginationQuery = (document, props) => {
             ...internalProps.context,
             fetchOptions: {
                 ...internalProps.context?.fetchOptions,
-                signal: abortController.signal,
+                signal: abortSignal,
             },
         },
         pollInterval: internalProps.pollInterval,
@@ -214,7 +310,7 @@ const usePaginationQuery = (document, props) => {
         onCompleted: completedData => {
             if (networkStatus === NetworkStatus.refetch) {
                 // trigger reset for refetchQueries for the provided document.
-                setResetTrigger(prev => prev + 1);
+                dispatch({ type: "INCREMENT_RESET_TRIGGER" });
             }
             if (internalProps.onCompleted) {
                 internalProps.onCompleted(completedData);
@@ -226,15 +322,14 @@ const usePaginationQuery = (document, props) => {
         nextFetchPolicy: "network-only",
         initialFetchPolicy: "network-only",
     });
-    const [data, setData] = useState();
     const onReset = useCallback(() => {
-        setResetTrigger(prev => prev + 1);
+        dispatch({ type: "INCREMENT_RESET_TRIGGER" });
     }, []);
     useEffect(() => {
         onReset();
     }, [document, onReset]);
     const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after, last, before }, } = useRelayPagination({
-        pageSize: internalProps.pageSize || internalProps.variables?.first || defaultPageSize,
+        pageSize: internalProps.pageSize ?? internalProps.variables?.first ?? defaultPageSize,
         onReset,
     });
     const doFetchMore = useCallback((variables, prev) => {
@@ -243,47 +338,25 @@ const usePaginationQuery = (document, props) => {
             return;
         }
         setIsLoading(true);
-        /**
-         * To support pagination with page and pageSize, we need to convert the variables from first and after.
-         */
-        const fetchMoreVariables = {
-            ...internalProps.variables,
-            ...(internalProps.variables && "page" in internalProps.variables && "pageSize" in internalProps.variables
-                ? {
-                    pageSize: variables.first,
-                    page: Number(variables.after) || 0,
-                }
-                : { ...variables }),
-        };
+        // Convert pagination variables based on pagination type (cursor vs page-based)
+        const fetchMoreVariables = convertPaginationVariables(internalProps.variables, variables);
         fetchMore({
             variables: fetchMoreVariables,
-            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) {
-                        return objectKeys(prev).length === 0
-                            ? undefined
-                            : prev;
-                    }
-                    return undefined;
-                }
-                // Safely handle Apollo types
-                const typedResult = fetchMoreResult;
-                setLastFetchedData(typedResult);
-                const result = internalProps.updateQuery(prev, typedResult);
-                setPageInfo(result.pageInfo || null);
-                setData(result.data);
-                setIsLoading(false);
-                return result.data;
-            },
+            updateQuery: createUpdateQueryHandler({
+                abortSignal,
+                prev,
+                onUpdate: internalProps.updateQuery,
+                onDataUpdate: (data) => dispatch({ type: "SET_DATA", payload: data }),
+                onLastFetchedUpdate: (data) => dispatch({ type: "SET_LAST_FETCHED_DATA", payload: data }),
+                onPageInfoUpdate: setPageInfo,
+                onLoadingComplete: () => setIsLoading(false),
+            }),
             // 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 => {
             setIsLoading(false);
-            if (abortController.signal.aborted) {
+            if (abortSignal.aborted) {
                 return;
             }
             if (internalProps.onError) {
@@ -293,35 +366,18 @@ const usePaginationQuery = (document, props) => {
                 throw error;
             }
         });
-    }, [internalProps, setIsLoading, fetchMore, abortController, setPageInfo]);
+    }, [internalProps, setIsLoading, fetchMore, abortSignal, setPageInfo]);
     useEffect(() => {
-        setData(undefined);
+        dispatch({ type: "RESET" });
         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(() => {
-        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
+    }, [stableVariables, reset]);
+    // Store pagination values in refs to avoid triggering unnecessary effect re-runs
+    const firstRef = useSyncedRef(first);
+    const lastRef = useSyncedRef(last);
+    const beforeRef = useSyncedRef(before);
+    const dataRef = useSyncedRef(state.data);
+    const doFetchMoreRef = useSyncedRef(doFetchMore);
+    // Fetch initial page when variables or reset trigger changes
     useEffect(() => {
         const fetchVariables = {
             first: firstRef.current,
@@ -329,30 +385,34 @@ const usePaginationQuery = (document, props) => {
             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
+        // Refs are stable and don't need to trigger re-runs, but included to satisfy linter
+    }, [stableVariables, state.resetTrigger, firstRef, doFetchMoreRef]);
+    // Fetch next/previous page when after cursor changes
     useEffect(() => {
-        if (after) {
-            const fetchVariables = { first: firstRef.current, after, last: lastRef.current, before: beforeRef.current };
-            // Use the ref version to avoid dependency cycles
+        if (after !== undefined && after !== null) {
+            const fetchVariables = {
+                first: firstRef.current,
+                after,
+                last: lastRef.current,
+                before: beforeRef.current,
+            };
             doFetchMoreRef.current(fetchVariables, dataRef.current);
         }
-        // Removed doFetchMore from dependencies to prevent refetch loops
-    }, [after]);
+        // Refs are stable and don't need to trigger re-runs, but included to satisfy linter
+    }, [after, firstRef, lastRef, beforeRef, dataRef, doFetchMoreRef]);
     return useMemo(() => {
         return {
-            data: data || previousData,
+            data: state.data ?? previousData,
             previousData,
             loading: isLoading || lazyLoading,
             pagination: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage },
-            lastFetchedData,
+            lastFetchedData: state.lastFetchedData,
             reset,
         };
     }, [
-        data,
+        state.data,
+        state.lastFetchedData,
         isLoading,
         lazyLoading,
         setIsLoading,
@@ -361,7 +421,6 @@ const usePaginationQuery = (document, props) => {
         reset,
         nextPage,
         previousPage,
-        lastFetchedData,
         previousData,
     ]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "1.10.9",
+  "version": "1.10.12",
   "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.9.10",
-    "@trackunit/shared-utils": "1.11.7",
+    "@trackunit/i18n-library-translation": "1.9.13",
+    "@trackunit/shared-utils": "1.11.10",
     "es-toolkit": "^1.39.10",
-    "@trackunit/react-components": "1.12.11"
+    "@trackunit/react-components": "1.13.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/paginationQueryUtils.d.ts

@@ -0,0 +1,53 @@
+import { OperationVariables as ApolloOperationVariables } from "@apollo/client/core/types";
+import { RelayPageInfo } from "@trackunit/react-components";
+type RelayPaginationQueryVariables = {
+    first?: number | null;
+    last?: number | null;
+    before?: string | null;
+    after?: string | null;
+};
+export type PaginationState<TData> = {
+    data: TData | undefined;
+    lastFetchedData: TData | undefined;
+    resetTrigger: number;
+};
+export type PaginationAction<TData> = {
+    type: "SET_DATA";
+    payload: TData;
+} | {
+    type: "SET_LAST_FETCHED_DATA";
+    payload: TData;
+} | {
+    type: "RESET";
+} | {
+    type: "INCREMENT_RESET_TRIGGER";
+};
+/**
+ * Converts pagination variables from cursor-based (first/after) to page-based (page/pageSize) if needed.
+ * Returns the appropriate variables based on the pagination type.
+ */
+export declare const convertPaginationVariables: <TVariables extends ApolloOperationVariables>(baseVariables: TVariables | undefined, paginationVars: RelayPaginationQueryVariables) => TVariables;
+/**
+ * Creates an update query handler for Apollo's fetchMore.
+ * Handles aborted requests and merges new data with existing data.
+ */
+export declare const createUpdateQueryHandler: <TData, TPreviousResult>(params: {
+    abortSignal: AbortSignal;
+    prev: TData | undefined;
+    onUpdate: (prev: TData | undefined, newData: TData) => {
+        data: TData;
+        pageInfo?: RelayPageInfo | null;
+    };
+    onDataUpdate: (data: TData) => void;
+    onLastFetchedUpdate: (data: TData) => void;
+    onPageInfoUpdate: (pageInfo: RelayPageInfo | null) => void;
+    onLoadingComplete: () => void;
+}) => (_previousResult: TPreviousResult, { fetchMoreResult }: {
+    fetchMoreResult?: unknown;
+}) => TPreviousResult;
+/**
+ * Creates a reducer function for managing pagination state.
+ * Handles data updates, reset, and reset trigger increments.
+ */
+export declare const createPaginationReducer: <TData>() => (state: PaginationState<TData>, action: PaginationAction<TData>) => PaginationState<TData>;
+export {};

package/src/usePaginationQuery.d.ts

@@ -45,17 +45,15 @@ export interface PaginationQueryProps<TData, TVariables extends ApolloOperationV
  * lastFetchedData is used to store the last fetched data, so you can update data according to last page.
  *
  * @example
- *
  * const {
  *   data,
  *   loading,
  *   pagination,
  *   lastFetchedData,
- *} = usePaginationQuery({
- *   query: myLazyQuery, // <-- myLazyQuery is the graphql LazyQuery to run pagination for.
+ * } = usePaginationQuery(MyAssetsDocument, {
  *   updateQuery: (previous, newData) => {
- *    // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
- *    if (newData?.assets?.edges) {
+ *     // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
+ *     if (newData?.assets?.edges) {
  *       return {
  *         data: {
  *           ...newData,
@@ -70,11 +68,11 @@ export interface PaginationQueryProps<TData, TVariables extends ApolloOperationV
  *     return { data: newData, pageInfo: newData.assets.pageInfo };
  *   },
  * });
- * @template TData
- * @template TVariables
- * @param {TypedDocumentNode<TData, TVariables>} document - The GraphQL document (query or mutation).
- * @param {PaginationQueryProps<TData, TVariables>} props - The properties for configuring the query. This includes the `updateQuery` function for merging new and existing data, and options for pagination such as `pageSize`. Also includes other lazy query hook options from Apollo Client.
- * @returns {*}  {PaginationQuery}
+ * @template TData - The type of the query result data.
+ * @template TVariables - The type of the query variables.
+ * @param document - The GraphQL query document.
+ * @param props - The properties for configuring the query. This includes the `updateQuery` function for merging new and existing data, and options for pagination such as `pageSize`. Also includes other lazy query hook options from Apollo Client.
+ * @returns {PaginationQuery<TData>} The pagination query result containing data, loading state, pagination controls, and lastFetchedData.
  */
 export declare const usePaginationQuery: <TData, TVariables extends ApolloOperationVariables>(document: TypedDocumentNode<TData, TVariables>, props: PaginationQueryProps<TData, TVariables>) => PaginationQuery<TData>;
 export {};