@trackunit/react-graphql-hooks 0.0.1-alpha-11d90c6ca6.0

package/README.md

@@ -0,0 +1,19 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit GraphQL Hooks
+The purpose of this library is to contain the graphql-hooks library and its dependencies.
+These are just helper hooks for making working with GraphQL easier.
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Development
+At this point this library is only developed by Trackunit Employees.  
+For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
+
+## Trackunit
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.cjs.js

@@ -0,0 +1,283 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react/jsx-runtime');
+var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var sharedUtils = require('@trackunit/shared-utils');
+var ApolloClient = require('@apollo/client');
+var react = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var ApolloClient__namespace = /*#__PURE__*/_interopNamespace(ApolloClient);
+
+var defaultTranslations = {
+	
+};
+
+/** The translation namespace for this library */
+const namespace = "react.graphql-hooks";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
+        da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
+        cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
+        nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
+        fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
+        fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
+        hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
+        it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
+        nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
+        pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
+        pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
+        ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
+        ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
+        es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
+        sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
+        ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
+        th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
+    },
+};
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    i18nLibraryTranslation.registerTranslations(translations);
+};
+
+/**
+ * Creates a union of two arrays of edges by a key on the node.
+ *
+ * @template TEdge
+ * @param key The key to use to determine uniqueness
+ * @param previousEdges The previous array of edges to merge with the new array
+ * @param newEdges The new array of edges to merge with the previous array
+ * @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 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);
+        return newEdge || previousEdge;
+    })
+        .filter(sharedUtils.truthy);
+};
+
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+const useRelayPagination = (props = { pageSize: 50 }) => {
+    const [variables, setVariables] = react.useState({ first: props.pageSize });
+    const [pageInfo, setPageInfo] = react.useState();
+    const [isLoading, setIsLoading] = react.useState(false);
+    const nextPage = react.useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
+            setVariables({
+                after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
+                first: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
+    const previousPage = react.useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
+            setVariables({
+                before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
+                last: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
+    const reset = react.useCallback(() => {
+        setVariables({
+            last: undefined,
+            before: undefined,
+            after: undefined,
+            first: props.pageSize,
+        });
+        if (props.onReset) {
+            props.onReset();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.onReset, props.pageSize]);
+    return react.useMemo(() => {
+        return {
+            variables,
+            table: {
+                nextPage,
+                previousPage,
+                isLoading,
+                setIsLoading,
+                reset,
+                pageInfo: pageInfo === null ? undefined : pageInfo,
+                setPageInfo,
+            },
+        };
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+};
+
+/**
+ * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
+ *
+ * Data will be the combined data from all pages, if you merge in the updateQuery.
+ *
+ * It will use pagination.fetchNext to fetch next page and call updateQuery where you can merge the data together.
+ *
+ * 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.
+ *   updateQuery: (previous, newData) => {
+ *    // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
+ *    if (newData?.assets?.edges) {
+ *       return {
+ *         data: {
+ *           ...newData,
+ *           assets: {
+ *             ...newData.assets,
+ *             edges: unionEdgesByNodeKey("id", previous?.assets?.edges, newData.assets.edges) || [],
+ *           },
+ *         },
+ *         pageInfo: newData.assets.pageInfo,
+ *       };
+ *     }
+ *     return { data: newData, pageInfo: newData.assets.pageInfo };
+ *   },
+ * });
+ * @template TData
+ * @template TVariables
+ * @param {ApolloClient.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}
+ */
+const usePaginationQuery = (document, props) => {
+    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: () => {
+            if (networkStatus === ApolloClient__namespace.NetworkStatus.refetch) {
+                // trigger reset for refetchQueries for the provided document.
+                setResetTrigger(prev => prev + 1);
+            }
+        }, 
+        // 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" }));
+    const [data, setData] = react.useState();
+    const onReset = react.useCallback(() => {
+        setResetTrigger(prev => prev + 1);
+    }, []);
+    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = useRelayPagination({
+        pageSize: props.pageSize || 50,
+        onReset,
+    });
+    const doFetchMore = react.useCallback((variables, prev) => {
+        setIsLoading(true);
+        const abortController = new AbortController();
+        /**
+         * To support pagination with page and pageSize, we need to convert the variables from first and after.
+         */
+        const fetchMoreVariables = Object.assign(Object.assign({}, props.variables), (props.variables && "page" in props.variables && "pageSize" in props.variables
+            ? // eslint-disable-next-line local-rules/no-typescript-assertion
+                { pageSize: variables.first, page: Number(variables.after) || 0 }
+            : Object.assign({}, variables)));
+        fetchMore({
+            variables: fetchMoreVariables,
+            updateQuery: (_, { 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 Object.keys(prev).length === 0 ? undefined : prev;
+                    }
+                    // eslint-disable-next-line local-rules/no-typescript-assertion
+                    return undefined;
+                }
+                setLastFetchedData(fetchMoreResult);
+                const result = props.updateQuery(prev, fetchMoreResult);
+                setPageInfo(result.pageInfo || null);
+                setData(result.data);
+                setIsLoading(false);
+                return result.data;
+            },
+        });
+        return abortController;
+    }, [setIsLoading, props, fetchMore, setPageInfo]);
+    react.useEffect(() => {
+        setData(undefined);
+    }, [props.variables]);
+    react.useEffect(() => {
+        const abortController = doFetchMore({ first: first, last: undefined, before: undefined, after: undefined }, undefined);
+        return () => {
+            abortController.abort();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.variables, resetTrigger]);
+    react.useEffect(() => {
+        if (after) {
+            doFetchMore({ first, after }, data);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [after]);
+    return react.useMemo(() => {
+        return {
+            data,
+            loading: isLoading,
+            pagination: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage },
+            lastFetchedData,
+        };
+    }, [data, isLoading, setIsLoading, setPageInfo, pageInfo, reset, nextPage, previousPage, lastFetchedData]);
+};
+
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+exports.unionEdgesByNodeKey = unionEdgesByNodeKey;
+exports.usePaginationQuery = usePaginationQuery;
+exports.useRelayPagination = useRelayPagination;

package/index.esm.js

@@ -0,0 +1,257 @@
+import 'react/jsx-runtime';
+import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { truthy } from '@trackunit/shared-utils';
+import * as ApolloClient from '@apollo/client';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+
+var defaultTranslations = {
+	
+};
+
+/** The translation namespace for this library */
+const namespace = "react.graphql-hooks";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => import('./translation.esm.js'),
+        da: () => import('./translation.esm2.js'),
+        cs: () => import('./translation.esm3.js'),
+        nl: () => import('./translation.esm4.js'),
+        fr: () => import('./translation.esm5.js'),
+        fi: () => import('./translation.esm6.js'),
+        hu: () => import('./translation.esm7.js'),
+        it: () => import('./translation.esm8.js'),
+        nb: () => import('./translation.esm9.js'),
+        pl: () => import('./translation.esm10.js'),
+        pt: () => import('./translation.esm11.js'),
+        ru: () => import('./translation.esm12.js'),
+        ro: () => import('./translation.esm13.js'),
+        es: () => import('./translation.esm14.js'),
+        sv: () => import('./translation.esm15.js'),
+        ja: () => import('./translation.esm16.js'),
+        th: () => import('./translation.esm17.js'),
+    },
+};
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    registerTranslations(translations);
+};
+
+/**
+ * Creates a union of two arrays of edges by a key on the node.
+ *
+ * @template TEdge
+ * @param key The key to use to determine uniqueness
+ * @param previousEdges The previous array of edges to merge with the new array
+ * @param newEdges The new array of edges to merge with the previous array
+ * @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 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);
+        return newEdge || previousEdge;
+    })
+        .filter(truthy);
+};
+
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+const useRelayPagination = (props = { pageSize: 50 }) => {
+    const [variables, setVariables] = useState({ first: props.pageSize });
+    const [pageInfo, setPageInfo] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const nextPage = useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
+            setVariables({
+                after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
+                first: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
+    const previousPage = useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
+            setVariables({
+                before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
+                last: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
+    const reset = useCallback(() => {
+        setVariables({
+            last: undefined,
+            before: undefined,
+            after: undefined,
+            first: props.pageSize,
+        });
+        if (props.onReset) {
+            props.onReset();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.onReset, props.pageSize]);
+    return useMemo(() => {
+        return {
+            variables,
+            table: {
+                nextPage,
+                previousPage,
+                isLoading,
+                setIsLoading,
+                reset,
+                pageInfo: pageInfo === null ? undefined : pageInfo,
+                setPageInfo,
+            },
+        };
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+};
+
+/**
+ * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
+ *
+ * Data will be the combined data from all pages, if you merge in the updateQuery.
+ *
+ * It will use pagination.fetchNext to fetch next page and call updateQuery where you can merge the data together.
+ *
+ * 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.
+ *   updateQuery: (previous, newData) => {
+ *    // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
+ *    if (newData?.assets?.edges) {
+ *       return {
+ *         data: {
+ *           ...newData,
+ *           assets: {
+ *             ...newData.assets,
+ *             edges: unionEdgesByNodeKey("id", previous?.assets?.edges, newData.assets.edges) || [],
+ *           },
+ *         },
+ *         pageInfo: newData.assets.pageInfo,
+ *       };
+ *     }
+ *     return { data: newData, pageInfo: newData.assets.pageInfo };
+ *   },
+ * });
+ * @template TData
+ * @template TVariables
+ * @param {ApolloClient.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}
+ */
+const usePaginationQuery = (document, props) => {
+    const [lastFetchedData, setLastFetchedData] = useState();
+    const [resetTrigger, setResetTrigger] = useState(0);
+    const [, { fetchMore, networkStatus }] = ApolloClient.useLazyQuery(document, Object.assign(Object.assign({}, props), { notifyOnNetworkStatusChange: true, onCompleted: () => {
+            if (networkStatus === ApolloClient.NetworkStatus.refetch) {
+                // trigger reset for refetchQueries for the provided document.
+                setResetTrigger(prev => prev + 1);
+            }
+        }, 
+        // 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" }));
+    const [data, setData] = useState();
+    const onReset = useCallback(() => {
+        setResetTrigger(prev => prev + 1);
+    }, []);
+    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = useRelayPagination({
+        pageSize: props.pageSize || 50,
+        onReset,
+    });
+    const doFetchMore = useCallback((variables, prev) => {
+        setIsLoading(true);
+        const abortController = new AbortController();
+        /**
+         * To support pagination with page and pageSize, we need to convert the variables from first and after.
+         */
+        const fetchMoreVariables = Object.assign(Object.assign({}, props.variables), (props.variables && "page" in props.variables && "pageSize" in props.variables
+            ? // eslint-disable-next-line local-rules/no-typescript-assertion
+                { pageSize: variables.first, page: Number(variables.after) || 0 }
+            : Object.assign({}, variables)));
+        fetchMore({
+            variables: fetchMoreVariables,
+            updateQuery: (_, { 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 Object.keys(prev).length === 0 ? undefined : prev;
+                    }
+                    // eslint-disable-next-line local-rules/no-typescript-assertion
+                    return undefined;
+                }
+                setLastFetchedData(fetchMoreResult);
+                const result = props.updateQuery(prev, fetchMoreResult);
+                setPageInfo(result.pageInfo || null);
+                setData(result.data);
+                setIsLoading(false);
+                return result.data;
+            },
+        });
+        return abortController;
+    }, [setIsLoading, props, fetchMore, setPageInfo]);
+    useEffect(() => {
+        setData(undefined);
+    }, [props.variables]);
+    useEffect(() => {
+        const abortController = doFetchMore({ first: first, last: undefined, before: undefined, after: undefined }, undefined);
+        return () => {
+            abortController.abort();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.variables, resetTrigger]);
+    useEffect(() => {
+        if (after) {
+            doFetchMore({ first, after }, data);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [after]);
+    return useMemo(() => {
+        return {
+            data,
+            loading: isLoading,
+            pagination: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage },
+            lastFetchedData,
+        };
+    }, [data, isLoading, setIsLoading, setPageInfo, pageInfo, reset, nextPage, previousPage, lastFetchedData]);
+};
+
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+export { unionEdgesByNodeKey, usePaginationQuery, useRelayPagination };

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@trackunit/react-graphql-hooks",
+  "version": "0.0.1-alpha-11d90c6ca6.0",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "engines": {
+    "node": ">=18.x"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.7.10",
+    "react": "^18.2.0",
+    "@trackunit/i18n-library-translation": "*",
+    "@trackunit/shared-utils": "*"
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js"
+}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./unionEdgesByNodeKey";
+export * from "./usePaginationQuery";
+export * from "./useRelayPagination";

package/src/translation.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
+import defaultTranslations from "./locales/en/translation.json";
+/** A type for all available translation keys in this library */
+export type TranslationKeys = keyof typeof defaultTranslations;
+/** The translation namespace for this library */
+export declare const namespace = "react.graphql-hooks";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+export declare const translations: TranslationResource<TranslationKeys>;
+/**
+ *  Local useTranslation for this specific library
+ */
+export declare const useTranslation: () => [TransForLibs<never>, import("i18next").i18n, boolean] & {
+    t: TransForLibs<never>;
+    i18n: import("i18next").i18n;
+    ready: boolean;
+};
+/**
+ * Type of the t function for the local useTranslation for this specific library
+ */
+export type TranslationFunction = TransForLibs<TranslationKeys>;
+/**
+ * Trans for this specific library.
+ */
+export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
+/**
+ * Registers the translations for this library
+ */
+export declare const setupLibraryTranslations: () => void;

package/src/unionEdgesByNodeKey.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Creates a union of two arrays of edges by a key on the node.
+ *
+ * @template TEdge
+ * @param key The key to use to determine uniqueness
+ * @param previousEdges The previous array of edges to merge with the new array
+ * @param newEdges The new array of edges to merge with the previous array
+ * @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.
+ */
+export declare const unionEdgesByNodeKey: <TEdge extends {
+    node: { [K in keyof TEdge["node"]]: unknown; };
+}>(key: keyof TEdge["node"], previousEdges: TEdge[] | null | undefined, newEdges: TEdge[] | null | undefined) => TEdge[];

package/src/usePaginationQuery.d.ts

@@ -0,0 +1,60 @@
+import * as ApolloClient from "@apollo/client";
+import { RelayPageInfo, RelayTableSupport } from "./useRelayPagination";
+/**
+ * This type is used to return the data from the query, the pagination object and the last fetched data.
+ */
+export type PaginationQuery<TData> = {
+    data: TData | undefined;
+    loading: boolean;
+    lastFetchedData?: TData;
+    pagination: RelayTableSupport;
+};
+export type PaginationQueryProps<TData, TVariables extends ApolloClient.OperationVariables = ApolloClient.OperationVariables> = {
+    updateQuery: (previous: TData | undefined, newData: TData) => {
+        data: TData;
+        pageInfo?: RelayPageInfo | null;
+    };
+    pageSize?: number;
+} & ApolloClient.LazyQueryHookOptions<TData, TVariables>;
+/**
+ * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
+ *
+ * Data will be the combined data from all pages, if you merge in the updateQuery.
+ *
+ * It will use pagination.fetchNext to fetch next page and call updateQuery where you can merge the data together.
+ *
+ * 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.
+ *   updateQuery: (previous, newData) => {
+ *    // Here you can use the unionEdgesByNodeKey utils to merge your edges together.
+ *    if (newData?.assets?.edges) {
+ *       return {
+ *         data: {
+ *           ...newData,
+ *           assets: {
+ *             ...newData.assets,
+ *             edges: unionEdgesByNodeKey("id", previous?.assets?.edges, newData.assets.edges) || [],
+ *           },
+ *         },
+ *         pageInfo: newData.assets.pageInfo,
+ *       };
+ *     }
+ *     return { data: newData, pageInfo: newData.assets.pageInfo };
+ *   },
+ * });
+ * @template TData
+ * @template TVariables
+ * @param {ApolloClient.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}
+ */
+export declare const usePaginationQuery: <TData, TVariables extends ApolloClient.OperationVariables>(document: ApolloClient.TypedDocumentNode<TData, TVariables>, props: PaginationQueryProps<TData, TVariables>) => PaginationQuery<TData>;

package/src/useRelayPagination.d.ts

@@ -0,0 +1,41 @@
+import { Dispatch, SetStateAction } from "react";
+export interface RelayPaginationProps {
+    pageSize?: number;
+    onReset?: () => void;
+}
+export interface RelayPageInfo {
+    count?: number | null;
+    endCursor?: string | null;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+    startCursor?: string | null;
+}
+export interface RelayPagination {
+    nextPage: () => void;
+    previousPage: () => void;
+    pageInfo?: RelayPageInfo;
+    isLoading: boolean;
+}
+export interface RelayPaginationQueryVariables {
+    first?: number | null;
+    last?: number | null;
+    before?: string | null;
+    after?: string | null;
+}
+export interface RelayTableSupport extends RelayPagination {
+    isLoading: boolean;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    reset: () => void;
+    setPageInfo: Dispatch<SetStateAction<RelayPageInfo | null | undefined>>;
+}
+export interface RelayPaginationSupport {
+    variables: RelayPaginationQueryVariables;
+    table: RelayTableSupport;
+}
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+export declare const useRelayPagination: (props?: RelayPaginationProps) => RelayPaginationSupport;

package/translation.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs10.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs11.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs12.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs13.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs14.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs15.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs16.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs17.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs3.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs4.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs5.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs6.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs7.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs8.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.cjs9.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports["default"] = translation;

package/translation.esm.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm10.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm11.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm12.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm13.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm14.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm15.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm16.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm17.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm2.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm3.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm4.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm5.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm6.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm7.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm8.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm9.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };