@trackunit/react-graphql-hooks 0.0.163 → 0.0.165

package/index.cjs.js

@@ -7,8 +7,11 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var sharedUtils = require('@trackunit/shared-utils');
 var ApolloClient = require('@apollo/client');
 var reactTablePagination = require('@trackunit/react-table-pagination');
+var isEqual = require('lodash/isEqual');
 var react = require('react');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -28,6 +31,7 @@ function _interopNamespace(e) {
 }
 
 var ApolloClient__namespace = /*#__PURE__*/_interopNamespace(ApolloClient);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
 var defaultTranslations = {
 	
@@ -94,6 +98,38 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
         .filter(sharedUtils.truthy);
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
  * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
  *
@@ -135,10 +171,22 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @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}
  */
-const usePaginationQuery = (document, props) => {
+const usePaginationQuery = (document, _a) => {
+    var props = __rest(_a, []);
     const [lastFetchedData, setLastFetchedData] = react.useState();
     const [resetTrigger, setResetTrigger] = react.useState(0);
-    const [, { fetchMore, networkStatus }] = ApolloClient__namespace.useLazyQuery(document, Object.assign(Object.assign({}, props), { notifyOnNetworkStatusChange: true, onCompleted: () => {
+    // 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 = react.useRef(props.variables);
+    const internalProps = react.useMemo(() => {
+        if (!isEqual__default["default"](props.variables, stableVariables.current)) {
+            stableVariables.current = props.variables;
+        }
+        return Object.assign(Object.assign({}, props), { variables: stableVariables.current });
+    }, [props]);
+    const [, { fetchMore, networkStatus }] = ApolloClient__namespace.useLazyQuery(document, Object.assign(Object.assign({}, internalProps), { notifyOnNetworkStatusChange: true, onCompleted: () => {
             if (networkStatus === ApolloClient__namespace.NetworkStatus.refetch) {
                 // trigger reset for refetchQueries for the provided document.
                 setResetTrigger(prev => prev + 1);
@@ -153,7 +201,7 @@ const usePaginationQuery = (document, props) => {
         setResetTrigger(prev => prev + 1);
     }, []);
     const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = reactTablePagination.useRelayPagination({
-        pageSize: props.pageSize || 50,
+        pageSize: internalProps.pageSize || 50,
         onReset,
     });
     const doFetchMore = react.useCallback((variables, prev) => {
@@ -162,9 +210,12 @@ const usePaginationQuery = (document, props) => {
         /**
          * To support pagination with page and pageSize, we need to convert the variables from first and after.
          */
-        let fetchMoreVariables = Object.assign(Object.assign({}, props.variables), (props.variables && "page" in props.variables && "pageSize" in props.variables
+        let fetchMoreVariables = Object.assign(Object.assign({}, internalProps.variables), (internalProps.variables && "page" in internalProps.variables && "pageSize" in internalProps.variables
             ? // eslint-disable-next-line local-rules/no-typescript-assertion
-                { pageSize: variables.first, page: Number(variables.after) || 0 }
+                {
+                    pageSize: variables.first,
+                    page: Number(variables.after) || 0,
+                }
             : Object.assign({}, variables)));
         // To support "pageable" queries we do it here! REMOVE once the serviceplans are updated to use the new pagination.
         fetchMoreVariables = Object.assign({}, ("pageable" in fetchMoreVariables
@@ -190,7 +241,7 @@ const usePaginationQuery = (document, props) => {
                     return undefined;
                 }
                 setLastFetchedData(fetchMoreResult);
-                const result = props.updateQuery(prev, fetchMoreResult);
+                const result = internalProps.updateQuery(prev, fetchMoreResult);
                 setPageInfo(result.pageInfo || null);
                 setData(result.data);
                 setIsLoading(false);
@@ -198,18 +249,18 @@ const usePaginationQuery = (document, props) => {
             },
         });
         return abortController;
-    }, [setIsLoading, props, fetchMore, setPageInfo]);
+    }, [setIsLoading, fetchMore, internalProps, setPageInfo]);
     react.useEffect(() => {
         setData(undefined);
         reset();
-    }, [props.variables, reset]);
+    }, [internalProps.variables, reset]);
     react.useEffect(() => {
         const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
         return () => {
             abortController.abort();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.variables, resetTrigger]);
+    }, [internalProps.variables, resetTrigger]);
     react.useEffect(() => {
         if (after) {
             doFetchMore({ first, after }, data);

package/index.esm.js

@@ -3,7 +3,8 @@ import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { truthy, objectKeys } from '@trackunit/shared-utils';
 import * as ApolloClient from '@apollo/client';
 import { useRelayPagination } from '@trackunit/react-table-pagination';
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 
 var defaultTranslations = {
 	
@@ -70,6 +71,38 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
         .filter(truthy);
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
  * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
  *
@@ -111,10 +144,22 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
  * @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}
  */
-const usePaginationQuery = (document, props) => {
+const usePaginationQuery = (document, _a) => {
+    var props = __rest(_a, []);
     const [lastFetchedData, setLastFetchedData] = useState();
     const [resetTrigger, setResetTrigger] = useState(0);
-    const [, { fetchMore, networkStatus }] = ApolloClient.useLazyQuery(document, Object.assign(Object.assign({}, props), { notifyOnNetworkStatusChange: true, onCompleted: () => {
+    // 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 = useRef(props.variables);
+    const internalProps = useMemo(() => {
+        if (!isEqual(props.variables, stableVariables.current)) {
+            stableVariables.current = props.variables;
+        }
+        return Object.assign(Object.assign({}, props), { variables: stableVariables.current });
+    }, [props]);
+    const [, { fetchMore, networkStatus }] = ApolloClient.useLazyQuery(document, Object.assign(Object.assign({}, internalProps), { notifyOnNetworkStatusChange: true, onCompleted: () => {
             if (networkStatus === ApolloClient.NetworkStatus.refetch) {
                 // trigger reset for refetchQueries for the provided document.
                 setResetTrigger(prev => prev + 1);
@@ -129,7 +174,7 @@ const usePaginationQuery = (document, props) => {
         setResetTrigger(prev => prev + 1);
     }, []);
     const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = useRelayPagination({
-        pageSize: props.pageSize || 50,
+        pageSize: internalProps.pageSize || 50,
         onReset,
     });
     const doFetchMore = useCallback((variables, prev) => {
@@ -138,9 +183,12 @@ const usePaginationQuery = (document, props) => {
         /**
          * To support pagination with page and pageSize, we need to convert the variables from first and after.
          */
-        let fetchMoreVariables = Object.assign(Object.assign({}, props.variables), (props.variables && "page" in props.variables && "pageSize" in props.variables
+        let fetchMoreVariables = Object.assign(Object.assign({}, internalProps.variables), (internalProps.variables && "page" in internalProps.variables && "pageSize" in internalProps.variables
             ? // eslint-disable-next-line local-rules/no-typescript-assertion
-                { pageSize: variables.first, page: Number(variables.after) || 0 }
+                {
+                    pageSize: variables.first,
+                    page: Number(variables.after) || 0,
+                }
             : Object.assign({}, variables)));
         // To support "pageable" queries we do it here! REMOVE once the serviceplans are updated to use the new pagination.
         fetchMoreVariables = Object.assign({}, ("pageable" in fetchMoreVariables
@@ -166,7 +214,7 @@ const usePaginationQuery = (document, props) => {
                     return undefined;
                 }
                 setLastFetchedData(fetchMoreResult);
-                const result = props.updateQuery(prev, fetchMoreResult);
+                const result = internalProps.updateQuery(prev, fetchMoreResult);
                 setPageInfo(result.pageInfo || null);
                 setData(result.data);
                 setIsLoading(false);
@@ -174,18 +222,18 @@ const usePaginationQuery = (document, props) => {
             },
         });
         return abortController;
-    }, [setIsLoading, props, fetchMore, setPageInfo]);
+    }, [setIsLoading, fetchMore, internalProps, setPageInfo]);
     useEffect(() => {
         setData(undefined);
         reset();
-    }, [props.variables, reset]);
+    }, [internalProps.variables, reset]);
     useEffect(() => {
         const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
         return () => {
             abortController.abort();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.variables, resetTrigger]);
+    }, [internalProps.variables, resetTrigger]);
     useEffect(() => {
         if (after) {
             doFetchMore({ first, after }, data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "0.0.163",
+  "version": "0.0.165",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,7 +11,8 @@
     "react": "^18.2.0",
     "@trackunit/i18n-library-translation": "*",
     "@trackunit/shared-utils": "*",
-    "@trackunit/react-table-pagination": "*"
+    "@trackunit/react-table-pagination": "*",
+    "lodash": "4.17.21"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/usePaginationQuery.d.ts

@@ -69,4 +69,4 @@ export interface PaginationQueryProps<TData, TVariables extends ApolloClient.Ope
  * @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}
  */
-export declare const usePaginationQuery: <TData, TVariables extends ApolloClient.OperationVariables>(document: ApolloClient.TypedDocumentNode<TData, TVariables>, props: PaginationQueryProps<TData, TVariables>) => PaginationQuery<TData>;
+export declare const usePaginationQuery: <TData, TVariables extends ApolloClient.OperationVariables>(document: ApolloClient.TypedDocumentNode<TData, TVariables>, { ...props }: PaginationQueryProps<TData, TVariables>) => PaginationQuery<TData>;