@trackunit/react-graphql-hooks 1.15.1 → 1.15.6

package/index.cjs.js

@@ -220,13 +220,23 @@ const useStableVariablesWithAbort = (variables, skip = false) => {
             setAbortController(new AbortController());
         }
     }
-    reactComponents.useWatch({
-        value: variables,
-        onChange: setStableVariables,
-        skip: !Boolean(variables),
-    });
     return { stableVariables, abortController };
 };
+/**
+ * Extracts declared variable names from a GraphQL document so the hook
+ * only injects relay pagination variables the query actually accepts.
+ */
+const getQueryVariableNames = (document) => {
+    const definition = document.definitions[0];
+    if (definition === undefined || definition.kind !== "OperationDefinition") {
+        return new Set();
+    }
+    const varDefs = definition.variableDefinitions;
+    if (varDefs === undefined) {
+        return new Set();
+    }
+    return new Set(varDefs.map(v => v.variable.name.value));
+};
 /**
  * `usePaginationQuery` fetches data from a GraphQL query with Relay-style cursor pagination.
  * It manages page accumulation, loading state, and provides `pagination` controls (including `fetchNext`)
@@ -273,6 +283,7 @@ const useStableVariablesWithAbort = (variables, skip = false) => {
  */
 const usePaginationQuery = (document, props) => {
     const pageSize = props.pageSize ?? props.variables?.first ?? reactComponents.defaultPageSize;
+    const declaredVarNames = react.useMemo(() => getQueryVariableNames(document), [document]);
     const { stableVariables, abortController } = useStableVariablesWithAbort(props.variables, props.skip);
     const [state, dispatch] = react.useReducer(createPaginationReducer(), {
         data: undefined,
@@ -306,8 +317,10 @@ const usePaginationQuery = (document, props) => {
         onReset,
         initialCursor: props.initialCursor,
     });
+    const { skip: _skip, updateQuery: _uq, pageSize: _ps, initialCursor: _ic, variables: _vars, ...lazyQueryProps } = props;
+    const networkStatusRef = react.useRef(0);
     const [, { previousData, fetchMore, networkStatus, loading: lazyLoading }] = useLazyQuery(document, {
-        ...props,
+        ...lazyQueryProps,
         variables: stableVariables !== undefined
             ? {
                 ...stableVariables,
@@ -324,16 +337,19 @@ const usePaginationQuery = (document, props) => {
         },
         notifyOnNetworkStatusChange: true,
         onCompleted: completedData => {
-            if (networkStatus === client.NetworkStatus.refetch) {
+            if (networkStatusRef.current === client.NetworkStatus.refetch) {
                 dispatch({ type: "INCREMENT_RESET_TRIGGER" });
             }
             onCompletedRef.current?.(completedData);
-        }, // This is safe since we have no cache
-        // and without it it will make a magic extra call to the query check this
-        // https://stackoverflow.com/questions/66441463/fetchmore-request-executed-twice-every-time
-        nextFetchPolicy: "network-only",
-        initialFetchPolicy: "network-only",
+        },
+        // This is safe since we have no cache and want to control fetch outselves
+        fetchPolicy: "standby",
+        nextFetchPolicy: "standby",
+        initialFetchPolicy: "standby",
     });
+    react.useEffect(() => {
+        networkStatusRef.current = networkStatus;
+    }, [networkStatus]);
     const executeFetch = react.useCallback((variables, prev, direction) => {
         if (props.skip) {
             if (props.initialCursor === undefined) {
@@ -343,7 +359,8 @@ const usePaginationQuery = (document, props) => {
         }
         setIsLoading(true);
         const signal = abortController.signal;
-        const fetchMoreVariables = { ...stableVariables, ...variables };
+        const filteredRelayVars = Object.fromEntries(Object.entries(variables).filter(([key]) => declaredVarNames.has(key)));
+        const fetchMoreVariables = { ...stableVariables, ...filteredRelayVars };
         fetchMore({
             variables: fetchMoreVariables,
             updateQuery: createUpdateQueryHandler({
@@ -388,7 +405,16 @@ const usePaginationQuery = (document, props) => {
             }
             throw error;
         });
-    }, [props.skip, props.initialCursor, stableVariables, setIsLoading, fetchMore, abortController, setPageInfo]);
+    }, [
+        props.skip,
+        props.initialCursor,
+        stableVariables,
+        setIsLoading,
+        fetchMore,
+        abortController,
+        setPageInfo,
+        declaredVarNames,
+    ]);
     // Single ref for values that effects need without triggering re-runs.
     // Defined after executeFetch so it can be initialized with the real value.
     const latestRef = react.useRef({
@@ -410,15 +436,25 @@ const usePaginationQuery = (document, props) => {
     });
     // Reset accumulated data when variables change (skip until first load
     // to preserve initialCursor)
+    const pendingResetRef = react.useRef(false);
     react.useEffect(() => {
         if (!hasLoadedDataRef.current) {
             return;
         }
+        pendingResetRef.current = true;
         dispatch({ type: "RESET" });
         reset();
     }, [stableVariables, reset]);
-    // Fetch initial page when variables or reset trigger changes
+    // Fetch initial page when variables or reset trigger changes.
+    // When stableVariables changes after data is loaded, the reset effect above
+    // also increments resetTrigger — which would cause this effect to fire twice.
+    // The pendingReset guard skips the first (stableVariables-triggered) fire so
+    // only the resetTrigger-triggered fire fetches.
     react.useEffect(() => {
+        if (pendingResetRef.current) {
+            pendingResetRef.current = false;
+            return;
+        }
         const fetchVariables = {
             first: latestRef.current.first ?? pageSize,
             last: undefined,

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { useLazyQuery as useLazyQuery$1, NetworkStatus, useQuery as useQuery$1 } from '@apollo/client';
 import { omit, isEqual } from 'es-toolkit';
 import { useMemo, useReducer, useRef, useEffect, useCallback, useState } from 'react';
-import { defaultPageSize, useRelayPagination, useWatch } from '@trackunit/react-components';
+import { defaultPageSize, useRelayPagination } from '@trackunit/react-components';
 import { truthy, objectKeys } from '@trackunit/shared-utils';
 
 var defaultTranslations = {
@@ -218,13 +218,23 @@ const useStableVariablesWithAbort = (variables, skip = false) => {
             setAbortController(new AbortController());
         }
     }
-    useWatch({
-        value: variables,
-        onChange: setStableVariables,
-        skip: !Boolean(variables),
-    });
     return { stableVariables, abortController };
 };
+/**
+ * Extracts declared variable names from a GraphQL document so the hook
+ * only injects relay pagination variables the query actually accepts.
+ */
+const getQueryVariableNames = (document) => {
+    const definition = document.definitions[0];
+    if (definition === undefined || definition.kind !== "OperationDefinition") {
+        return new Set();
+    }
+    const varDefs = definition.variableDefinitions;
+    if (varDefs === undefined) {
+        return new Set();
+    }
+    return new Set(varDefs.map(v => v.variable.name.value));
+};
 /**
  * `usePaginationQuery` fetches data from a GraphQL query with Relay-style cursor pagination.
  * It manages page accumulation, loading state, and provides `pagination` controls (including `fetchNext`)
@@ -271,6 +281,7 @@ const useStableVariablesWithAbort = (variables, skip = false) => {
  */
 const usePaginationQuery = (document, props) => {
     const pageSize = props.pageSize ?? props.variables?.first ?? defaultPageSize;
+    const declaredVarNames = useMemo(() => getQueryVariableNames(document), [document]);
     const { stableVariables, abortController } = useStableVariablesWithAbort(props.variables, props.skip);
     const [state, dispatch] = useReducer(createPaginationReducer(), {
         data: undefined,
@@ -304,8 +315,10 @@ const usePaginationQuery = (document, props) => {
         onReset,
         initialCursor: props.initialCursor,
     });
+    const { skip: _skip, updateQuery: _uq, pageSize: _ps, initialCursor: _ic, variables: _vars, ...lazyQueryProps } = props;
+    const networkStatusRef = useRef(0);
     const [, { previousData, fetchMore, networkStatus, loading: lazyLoading }] = useLazyQuery(document, {
-        ...props,
+        ...lazyQueryProps,
         variables: stableVariables !== undefined
             ? {
                 ...stableVariables,
@@ -322,16 +335,19 @@ const usePaginationQuery = (document, props) => {
         },
         notifyOnNetworkStatusChange: true,
         onCompleted: completedData => {
-            if (networkStatus === NetworkStatus.refetch) {
+            if (networkStatusRef.current === NetworkStatus.refetch) {
                 dispatch({ type: "INCREMENT_RESET_TRIGGER" });
             }
             onCompletedRef.current?.(completedData);
-        }, // This is safe since we have no cache
-        // and without it it will make a magic extra call to the query check this
-        // https://stackoverflow.com/questions/66441463/fetchmore-request-executed-twice-every-time
-        nextFetchPolicy: "network-only",
-        initialFetchPolicy: "network-only",
+        },
+        // This is safe since we have no cache and want to control fetch outselves
+        fetchPolicy: "standby",
+        nextFetchPolicy: "standby",
+        initialFetchPolicy: "standby",
     });
+    useEffect(() => {
+        networkStatusRef.current = networkStatus;
+    }, [networkStatus]);
     const executeFetch = useCallback((variables, prev, direction) => {
         if (props.skip) {
             if (props.initialCursor === undefined) {
@@ -341,7 +357,8 @@ const usePaginationQuery = (document, props) => {
         }
         setIsLoading(true);
         const signal = abortController.signal;
-        const fetchMoreVariables = { ...stableVariables, ...variables };
+        const filteredRelayVars = Object.fromEntries(Object.entries(variables).filter(([key]) => declaredVarNames.has(key)));
+        const fetchMoreVariables = { ...stableVariables, ...filteredRelayVars };
         fetchMore({
             variables: fetchMoreVariables,
             updateQuery: createUpdateQueryHandler({
@@ -386,7 +403,16 @@ const usePaginationQuery = (document, props) => {
             }
             throw error;
         });
-    }, [props.skip, props.initialCursor, stableVariables, setIsLoading, fetchMore, abortController, setPageInfo]);
+    }, [
+        props.skip,
+        props.initialCursor,
+        stableVariables,
+        setIsLoading,
+        fetchMore,
+        abortController,
+        setPageInfo,
+        declaredVarNames,
+    ]);
     // Single ref for values that effects need without triggering re-runs.
     // Defined after executeFetch so it can be initialized with the real value.
     const latestRef = useRef({
@@ -408,15 +434,25 @@ const usePaginationQuery = (document, props) => {
     });
     // Reset accumulated data when variables change (skip until first load
     // to preserve initialCursor)
+    const pendingResetRef = useRef(false);
     useEffect(() => {
         if (!hasLoadedDataRef.current) {
             return;
         }
+        pendingResetRef.current = true;
         dispatch({ type: "RESET" });
         reset();
     }, [stableVariables, reset]);
-    // Fetch initial page when variables or reset trigger changes
+    // Fetch initial page when variables or reset trigger changes.
+    // When stableVariables changes after data is loaded, the reset effect above
+    // also increments resetTrigger — which would cause this effect to fire twice.
+    // The pendingReset guard skips the first (stableVariables-triggered) fire so
+    // only the resetTrigger-triggered fire fetches.
     useEffect(() => {
+        if (pendingResetRef.current) {
+            pendingResetRef.current = false;
+            return;
+        }
         const fetchVariables = {
             first: latestRef.current.first ?? pageSize,
             last: undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "1.15.1",
+  "version": "1.15.6",
   "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.12.52",
-    "@trackunit/shared-utils": "1.13.61",
+    "@trackunit/i18n-library-translation": "1.12.54",
+    "@trackunit/shared-utils": "1.13.63",
     "es-toolkit": "^1.39.10",
-    "@trackunit/react-components": "1.18.1"
+    "@trackunit/react-components": "1.18.3"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",