@trackunit/react-graphql-hooks 2.3.4 → 2.3.6

package/index.cjs.js

@@ -2,9 +2,9 @@
 
 require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var react = require('react');
 var client = require('@apollo/client');
 var esToolkit = require('es-toolkit');
-var react = require('react');
 var reactComponents = require('@trackunit/react-components');
 var sharedUtils = require('@trackunit/shared-utils');
 
@@ -50,6 +50,80 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const toRelayPageInfo = (pageInfo) => {
+    if (!isRecord(pageInfo)) {
+        return null;
+    }
+    return {
+        hasNextPage: pageInfo.hasNextPage === true,
+        hasPreviousPage: pageInfo.hasPreviousPage === true,
+        startCursor: typeof pageInfo.startCursor === "string" ? pageInfo.startCursor : null,
+        endCursor: typeof pageInfo.endCursor === "string" ? pageInfo.endCursor : null,
+    };
+};
+const readConnection = (data, rootField, connectionField) => {
+    if (!isRecord(data)) {
+        return null;
+    }
+    const root = data[rootField];
+    if (!isRecord(root)) {
+        return null;
+    }
+    const connection = root[connectionField];
+    return isRecord(connection) ? connection : null;
+};
+/**
+ * Appends a newly fetched Relay connection page to the accumulated one.
+ *
+ * Backs `useConnectionPageMerger`, which is how consumers reach this. A later page that comes back
+ * without `edges` (the field is nullable in most schemas) keeps everything accumulated so far
+ * instead of collapsing the list.
+ *
+ * @param rootField name of the field on the query root that holds the connection
+ * @param connectionField name of the connection field on the root field
+ * @param previous the accumulated query result, undefined on the first page
+ * @param newData the freshly fetched query result
+ * @returns {object} the merged result together with the newest page info
+ */
+const mergeConnectionPages = (rootField, connectionField, previous, newData) => {
+    const newConnection = readConnection(newData, rootField, connectionField);
+    const previousConnection = readConnection(previous, rootField, connectionField);
+    const pageInfo = toRelayPageInfo(newConnection?.pageInfo);
+    const previousEdges = previousConnection?.edges;
+    const root = newData[rootField];
+    if (newConnection === null || !isRecord(root) || !Array.isArray(previousEdges)) {
+        return { data: newData, pageInfo };
+    }
+    const newEdges = Array.isArray(newConnection.edges) ? newConnection.edges : [];
+    return {
+        data: {
+            ...newData,
+            [rootField]: {
+                ...root,
+                [connectionField]: {
+                    ...newConnection,
+                    edges: [...previousEdges, ...newEdges],
+                },
+            },
+        },
+        pageInfo,
+    };
+};
+
+/**
+ * Builds a stable `updateQuery` for `usePaginationQuery` that appends each fetched page of a Relay
+ * connection to the accumulated one.
+ *
+ * Use it when the connection sits at a fixed `<rootField>.<connectionField>` path. A later page that
+ * comes back without `edges` keeps everything accumulated so far instead of collapsing the list.
+ *
+ * @param rootField name of the field on the query root that holds the connection
+ * @param connectionField name of the connection field on the root field
+ * @returns {Function} the `updateQuery` callback
+ */
+const useConnectionPageMerger = (rootField, connectionField) => react.useCallback((previous, newData) => mergeConnectionPages(rootField, connectionField, previous, newData), [rootField, connectionField]);
+
 /**
  * A wrapper around Apollo Client's useLazyQuery that provides stable data by default.
  *
@@ -624,6 +698,7 @@ const useQuery = (document, options) => {
  */
 setupLibraryTranslations();
 
+exports.useConnectionPageMerger = useConnectionPageMerger;
 exports.useLazyQuery = useLazyQuery;
 exports.usePaginationQuery = usePaginationQuery;
 exports.useQuery = useQuery;

package/index.esm.js

@@ -1,8 +1,8 @@
 import 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { useCallback, useMemo, useState, useReducer, useRef, useEffect } from 'react';
 import { useLazyQuery as useLazyQuery$1, NetworkStatus, useQuery as useQuery$1 } from '@apollo/client';
 import { omit, isEqual } from 'es-toolkit';
-import { useMemo, useState, useReducer, useRef, useEffect, useCallback } from 'react';
 import { defaultPageSize, useRelayPagination, useWatch } from '@trackunit/react-components';
 import { truthy, objectKeys } from '@trackunit/shared-utils';
 
@@ -48,6 +48,80 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const toRelayPageInfo = (pageInfo) => {
+    if (!isRecord(pageInfo)) {
+        return null;
+    }
+    return {
+        hasNextPage: pageInfo.hasNextPage === true,
+        hasPreviousPage: pageInfo.hasPreviousPage === true,
+        startCursor: typeof pageInfo.startCursor === "string" ? pageInfo.startCursor : null,
+        endCursor: typeof pageInfo.endCursor === "string" ? pageInfo.endCursor : null,
+    };
+};
+const readConnection = (data, rootField, connectionField) => {
+    if (!isRecord(data)) {
+        return null;
+    }
+    const root = data[rootField];
+    if (!isRecord(root)) {
+        return null;
+    }
+    const connection = root[connectionField];
+    return isRecord(connection) ? connection : null;
+};
+/**
+ * Appends a newly fetched Relay connection page to the accumulated one.
+ *
+ * Backs `useConnectionPageMerger`, which is how consumers reach this. A later page that comes back
+ * without `edges` (the field is nullable in most schemas) keeps everything accumulated so far
+ * instead of collapsing the list.
+ *
+ * @param rootField name of the field on the query root that holds the connection
+ * @param connectionField name of the connection field on the root field
+ * @param previous the accumulated query result, undefined on the first page
+ * @param newData the freshly fetched query result
+ * @returns {object} the merged result together with the newest page info
+ */
+const mergeConnectionPages = (rootField, connectionField, previous, newData) => {
+    const newConnection = readConnection(newData, rootField, connectionField);
+    const previousConnection = readConnection(previous, rootField, connectionField);
+    const pageInfo = toRelayPageInfo(newConnection?.pageInfo);
+    const previousEdges = previousConnection?.edges;
+    const root = newData[rootField];
+    if (newConnection === null || !isRecord(root) || !Array.isArray(previousEdges)) {
+        return { data: newData, pageInfo };
+    }
+    const newEdges = Array.isArray(newConnection.edges) ? newConnection.edges : [];
+    return {
+        data: {
+            ...newData,
+            [rootField]: {
+                ...root,
+                [connectionField]: {
+                    ...newConnection,
+                    edges: [...previousEdges, ...newEdges],
+                },
+            },
+        },
+        pageInfo,
+    };
+};
+
+/**
+ * Builds a stable `updateQuery` for `usePaginationQuery` that appends each fetched page of a Relay
+ * connection to the accumulated one.
+ *
+ * Use it when the connection sits at a fixed `<rootField>.<connectionField>` path. A later page that
+ * comes back without `edges` keeps everything accumulated so far instead of collapsing the list.
+ *
+ * @param rootField name of the field on the query root that holds the connection
+ * @param connectionField name of the connection field on the root field
+ * @returns {Function} the `updateQuery` callback
+ */
+const useConnectionPageMerger = (rootField, connectionField) => useCallback((previous, newData) => mergeConnectionPages(rootField, connectionField, previous, newData), [rootField, connectionField]);
+
 /**
  * A wrapper around Apollo Client's useLazyQuery that provides stable data by default.
  *
@@ -622,4 +696,4 @@ const useQuery = (document, options) => {
  */
 setupLibraryTranslations();
 
-export { useLazyQuery, usePaginationQuery, useQuery };
+export { useConnectionPageMerger, useLazyQuery, usePaginationQuery, useQuery };

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/graphql-hooks/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/i18n-library-translation": "2.2.4",
-    "@trackunit/shared-utils": "1.15.92",
+    "@trackunit/i18n-library-translation": "2.2.5",
+    "@trackunit/shared-utils": "1.15.93",
     "es-toolkit": "^1.39.10",
-    "@trackunit/react-components": "2.3.4"
+    "@trackunit/react-components": "2.4.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useConnectionPageMerger";
 export * from "./useLazyQuery";
 export * from "./usePaginationQuery";
 export * from "./useQuery";

package/src/useConnectionPageMerger.d.ts

@@ -0,0 +1,17 @@
+import type { RelayPageInfo } from "@trackunit/react-components";
+import { ConnectionQueryShape } from "./utils/mergeConnectionPages";
+/**
+ * Builds a stable `updateQuery` for `usePaginationQuery` that appends each fetched page of a Relay
+ * connection to the accumulated one.
+ *
+ * Use it when the connection sits at a fixed `<rootField>.<connectionField>` path. A later page that
+ * comes back without `edges` keeps everything accumulated so far instead of collapsing the list.
+ *
+ * @param rootField name of the field on the query root that holds the connection
+ * @param connectionField name of the connection field on the root field
+ * @returns {Function} the `updateQuery` callback
+ */
+export declare const useConnectionPageMerger: <TRootField extends string, TQuery extends ConnectionQueryShape<TRootField>>(rootField: TRootField, connectionField: string) => ((previous: TQuery | undefined, newData: TQuery) => {
+    data: TQuery;
+    pageInfo: RelayPageInfo | null;
+});

package/src/utils/mergeConnectionPages.d.ts

@@ -0,0 +1,23 @@
+import type { RelayPageInfo } from "@trackunit/react-components";
+export type ConnectionQueryShape<TRootField extends string> = {
+    [K in TRootField]?: {
+        [key: string]: unknown;
+    } | null;
+};
+/**
+ * Appends a newly fetched Relay connection page to the accumulated one.
+ *
+ * Backs `useConnectionPageMerger`, which is how consumers reach this. A later page that comes back
+ * without `edges` (the field is nullable in most schemas) keeps everything accumulated so far
+ * instead of collapsing the list.
+ *
+ * @param rootField name of the field on the query root that holds the connection
+ * @param connectionField name of the connection field on the root field
+ * @param previous the accumulated query result, undefined on the first page
+ * @param newData the freshly fetched query result
+ * @returns {object} the merged result together with the newest page info
+ */
+export declare const mergeConnectionPages: <TRootField extends string, TQuery extends ConnectionQueryShape<TRootField>>(rootField: TRootField, connectionField: string, previous: TQuery | undefined, newData: TQuery) => {
+    data: TQuery;
+    pageInfo: RelayPageInfo | null;
+};