@trackunit/react-graphql-hooks 0.0.12-alpha-3fd0172a5e.0 → 0.0.15

package/index.cjs.js

@@ -162,10 +162,19 @@ const usePaginationQuery = (document, props) => {
         /**
          * 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
+        let 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)));
+        // 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
+            ? Object.assign(Object.assign({}, fetchMoreVariables), { pageable: {
+                    first: fetchMoreVariables.first,
+                    last: fetchMoreVariables.last,
+                    before: fetchMoreVariables.before,
+                    after: fetchMoreVariables.after,
+                    pageSize: fetchMoreVariables.pageSize,
+                } }) : Object.assign({}, fetchMoreVariables)));
         fetchMore({
             variables: fetchMoreVariables,
             updateQuery: (_, { fetchMoreResult }) => {
@@ -194,7 +203,7 @@ const usePaginationQuery = (document, props) => {
         setData(undefined);
     }, [props.variables]);
     react.useEffect(() => {
-        const abortController = doFetchMore({ first: first, last: undefined, before: undefined, after: undefined }, undefined);
+        const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
         return () => {
             abortController.abort();
         };

package/index.esm.js

@@ -138,10 +138,19 @@ const usePaginationQuery = (document, props) => {
         /**
          * 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
+        let 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)));
+        // 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
+            ? Object.assign(Object.assign({}, fetchMoreVariables), { pageable: {
+                    first: fetchMoreVariables.first,
+                    last: fetchMoreVariables.last,
+                    before: fetchMoreVariables.before,
+                    after: fetchMoreVariables.after,
+                    pageSize: fetchMoreVariables.pageSize,
+                } }) : Object.assign({}, fetchMoreVariables)));
         fetchMore({
             variables: fetchMoreVariables,
             updateQuery: (_, { fetchMoreResult }) => {
@@ -170,7 +179,7 @@ const usePaginationQuery = (document, props) => {
         setData(undefined);
     }, [props.variables]);
     useEffect(() => {
-        const abortController = doFetchMore({ first: first, last: undefined, before: undefined, after: undefined }, undefined);
+        const abortController = doFetchMore({ first, last: undefined, before: undefined, after: undefined }, undefined);
         return () => {
             abortController.abort();
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "0.0.12-alpha-3fd0172a5e.0",
+  "version": "0.0.15",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/usePaginationQuery.d.ts

@@ -9,13 +9,25 @@ export type PaginationQuery<TData> = {
     lastFetchedData?: TData;
     pagination: RelayTableSupport;
 };
-export type PaginationQueryProps<TData, TVariables extends ApolloClient.OperationVariables = ApolloClient.OperationVariables> = {
+export interface PaginationQueryProps<TData, TVariables extends ApolloClient.OperationVariables = ApolloClient.OperationVariables> extends ApolloClient.LazyQueryHookOptions<TData, TVariables> {
+    /**
+     * A function that is used to update the query results with new data.
+     *
+     * @param previous The previous data from the query, which can be undefined if no previous data exists.
+     * @param newData The new data to merge with the previous data.
+     * @returns an object containing the merged data, with an optional pageInfo field of type RelayPageInfo or null.
+     */
     updateQuery: (previous: TData | undefined, newData: TData) => {
         data: TData;
         pageInfo?: RelayPageInfo | null;
     };
+    /**
+     * A number specifying the size of each page of data.
+     * This is an optional field.
+     * If not specified, the default page size is 50.
+     */
     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.
  *

package/src/usePaginationQuery.demo.d.ts

@@ -0,0 +1,11 @@
+import * as ApolloClient from "@apollo/client";
+import { PaginationQueryProps } from "./usePaginationQuery";
+export interface UsePaginationQueryDemoComponentProps<TData, TVariables extends ApolloClient.OperationVariables> extends PaginationQueryProps<TData, TVariables> {
+    document: ApolloClient.TypedDocumentNode<TData, TVariables>;
+}
+/**
+ * The `usePaginationQuery` Hook provides pagination when fetching data
+ *
+ * It returns an object containing methods and values related to pagination.
+ */
+export declare const UsePaginationQueryDemoComponent: <TData, TVariables extends ApolloClient.OperationVariables>({ document, variables, pageSize, updateQuery, }: UsePaginationQueryDemoComponentProps<TData, TVariables>) => JSX.Element;

package/src/usePaginationQuery.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { UsePaginationQueryDemoComponent } from "./usePaginationQuery.demo";
+type Story = StoryObj<typeof UsePaginationQueryDemoComponent>;
+declare const meta: Meta<typeof UsePaginationQueryDemoComponent>;
+export default meta;
+export declare const packageName: () => JSX.Element;
+export declare const Default: Story;