@isograph/react 0.0.0-main-359621bd → 0.0.0-main-3a0c06c0

package/dist/index.d.ts

@@ -18,4 +18,5 @@ export { useRerenderOnChange } from './react/useRerenderOnChange';
 export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';
 export { useImperativeExposedMutationField } from './loadable-hooks/useImperativeExposedMutationField';
 export { useSkipLimitPagination } from './loadable-hooks/useSkipLimitPagination';
+export { useConnectionSpecPagination } from './loadable-hooks/useConnectionSpecPagination';
 export { useImperativeLoadableField } from './loadable-hooks/useImperativeLoadableField';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImperativeLoadableField = exports.useSkipLimitPagination = exports.useImperativeExposedMutationField = exports.useClientSideDefer = exports.useRerenderOnChange = exports.useLazyReference = exports.useSubscribeToMultiple = exports.useReadAndSubscribe = exports.useResult = exports.FragmentReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.stableIdForFragmentReference = exports.readButDoNotEvaluate = exports.assertIsEntrypoint = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.makeNetworkRequest = exports.normalizeData = exports.subscribe = exports.wrapPromise = exports.wrapResolvedValue = exports.getPromiseState = exports.readPromise = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
+exports.useImperativeLoadableField = exports.useConnectionSpecPagination = exports.useSkipLimitPagination = exports.useImperativeExposedMutationField = exports.useClientSideDefer = exports.useRerenderOnChange = exports.useLazyReference = exports.useSubscribeToMultiple = exports.useReadAndSubscribe = exports.useResult = exports.FragmentReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.stableIdForFragmentReference = exports.readButDoNotEvaluate = exports.assertIsEntrypoint = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.makeNetworkRequest = exports.normalizeData = exports.subscribe = exports.wrapPromise = exports.wrapResolvedValue = exports.getPromiseState = exports.readPromise = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
 var garbageCollection_1 = require("./core/garbageCollection");
 Object.defineProperty(exports, "retainQuery", { enumerable: true, get: function () { return garbageCollection_1.retainQuery; } });
 Object.defineProperty(exports, "unretainQuery", { enumerable: true, get: function () { return garbageCollection_1.unretainQuery; } });
@@ -48,5 +48,7 @@ var useImperativeExposedMutationField_1 = require("./loadable-hooks/useImperativ
 Object.defineProperty(exports, "useImperativeExposedMutationField", { enumerable: true, get: function () { return useImperativeExposedMutationField_1.useImperativeExposedMutationField; } });
 var useSkipLimitPagination_1 = require("./loadable-hooks/useSkipLimitPagination");
 Object.defineProperty(exports, "useSkipLimitPagination", { enumerable: true, get: function () { return useSkipLimitPagination_1.useSkipLimitPagination; } });
+var useConnectionSpecPagination_1 = require("./loadable-hooks/useConnectionSpecPagination");
+Object.defineProperty(exports, "useConnectionSpecPagination", { enumerable: true, get: function () { return useConnectionSpecPagination_1.useConnectionSpecPagination; } });
 var useImperativeLoadableField_1 = require("./loadable-hooks/useImperativeLoadableField");
 Object.defineProperty(exports, "useImperativeLoadableField", { enumerable: true, get: function () { return useImperativeLoadableField_1.useImperativeLoadableField; } });

package/dist/loadable-hooks/useConnectionSpecPagination.d.ts

@@ -0,0 +1,33 @@
+import { FragmentReference } from '../core/FragmentReference';
+import { LoadableField } from '../core/reader';
+type FirstOrAfter = 'first' | 'after';
+type OmitFirstAfter<TArgs> = keyof Omit<TArgs, FirstOrAfter> extends never ? void | Record<string, never> : Omit<TArgs, FirstOrAfter>;
+type UsePaginationReturnValue<TReadFromStore extends {
+    parameters: object;
+    data: object;
+}, TItem> = {
+    kind: 'Pending';
+    pendingFragment: FragmentReference<TReadFromStore, Connection<TItem>>;
+    results: ReadonlyArray<TItem>;
+} | {
+    kind: 'Complete';
+    fetchMore: (args: OmitFirstAfter<TReadFromStore['parameters']>, first: number) => void;
+    results: ReadonlyArray<TItem>;
+    hasNextPage: boolean;
+};
+type PageInfo = {
+    readonly hasNextPage: boolean;
+    readonly endCursor: string | null;
+};
+type Connection<T> = {
+    readonly edges: ReadonlyArray<T> | null;
+    readonly pageInfo: PageInfo;
+};
+export declare function useConnectionSpecPagination<TReadFromStore extends {
+    parameters: {
+        readonly first?: number | void | null;
+        readonly after?: string | void | null;
+    };
+    data: object;
+}, TItem>(loadableField: LoadableField<TReadFromStore, Connection<TItem>>): UsePaginationReturnValue<TReadFromStore, TItem>;
+export {};

package/dist/loadable-hooks/useConnectionSpecPagination.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectionSpecPagination = void 0;
+const react_disposable_state_1 = require("@isograph/react-disposable-state");
+const reference_counted_pointer_1 = require("@isograph/reference-counted-pointer");
+const react_1 = require("react");
+const cache_1 = require("../core/cache");
+const PromiseWrapper_1 = require("../core/PromiseWrapper");
+const read_1 = require("../core/read");
+const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
+const useReadAndSubscribe_1 = require("../react/useReadAndSubscribe");
+const useResult_1 = require("../react/useResult");
+function flatten(arr) {
+    let outArray = [];
+    for (const subarr of arr) {
+        for (const item of subarr) {
+            outArray.push(item);
+        }
+    }
+    return outArray;
+}
+function useConnectionSpecPagination(loadableField) {
+    const networkRequestOptions = {
+        suspendIfInFlight: true,
+        throwOnNetworkError: true,
+    };
+    const { state, setState } = (0, react_disposable_state_1.useUpdatableDisposableState)();
+    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    // TODO move this out of useSkipLimitPagination, and pass environment and networkRequestOptions
+    // as parameters (or recreate networkRequestOptions)
+    function readCompletedFragmentReferences(completedReferences) {
+        var _a, _b;
+        const results = completedReferences.map((fragmentReference, i) => {
+            const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
+            const firstParameter = {
+                data: readOutDataAndRecords[i].item,
+                parameters: fragmentReference.variables,
+            };
+            if (readerWithRefetchQueries.readerArtifact.kind !== 'EagerReaderArtifact') {
+                throw new Error(`@loadable field of kind "${readerWithRefetchQueries.readerArtifact.kind}" is not supported by useSkipLimitPagination`);
+            }
+            return readerWithRefetchQueries.readerArtifact.resolver(firstParameter);
+        });
+        const items = flatten(results.map((result) => { var _a; return (_a = result.edges) !== null && _a !== void 0 ? _a : []; }));
+        return {
+            edges: items,
+            pageInfo: (_b = (_a = results[results.length - 1]) === null || _a === void 0 ? void 0 : _a.pageInfo) !== null && _b !== void 0 ? _b : {
+                endCursor: null,
+                hasNextPage: true,
+            },
+        };
+    }
+    function subscribeCompletedFragmentReferences(completedReferences) {
+        return completedReferences.map((fragmentReference, i) => {
+            (0, useResult_1.maybeUnwrapNetworkRequest)(fragmentReference.networkRequest, networkRequestOptions);
+            const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
+            return {
+                fragmentReference,
+                readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+                records: readOutDataAndRecords[i],
+                callback(_data) {
+                    rerender({});
+                },
+            };
+        });
+    }
+    const getFetchMore = (after) => (args, first) => {
+        // @ts-expect-error
+        const loadedField = loadableField(Object.assign(Object.assign({}, args), { after: after, first: first }))[1]();
+        const newPointer = (0, reference_counted_pointer_1.createReferenceCountedPointer)(loadedField);
+        const clonedPointers = loadedReferences.map(([refCountedPointer]) => {
+            const clonedRefCountedPointer = refCountedPointer.cloneIfNotDisposed();
+            if (clonedRefCountedPointer == null) {
+                throw new Error('This reference counted pointer has already been disposed. \
+            This is indicative of a bug in useSkipLimitPagination.');
+            }
+            return clonedRefCountedPointer;
+        });
+        clonedPointers.push(newPointer);
+        const totalItemCleanupPair = [
+            clonedPointers,
+            () => {
+                clonedPointers.forEach(([, dispose]) => {
+                    dispose();
+                });
+            },
+        ];
+        setState(totalItemCleanupPair);
+    };
+    const [, rerender] = (0, react_1.useState)({});
+    const loadedReferences = state === react_disposable_state_1.UNASSIGNED_STATE ? [] : state;
+    const mostRecentItem = loadedReferences[loadedReferences.length - 1];
+    const mostRecentFragmentReference = mostRecentItem === null || mostRecentItem === void 0 ? void 0 : mostRecentItem[0].getItemIfNotDisposed();
+    if (mostRecentItem && mostRecentFragmentReference === null) {
+        throw new Error('FragmentReference is unexpectedly disposed. \
+      This is indicative of a bug in Isograph.');
+    }
+    const networkRequestStatus = mostRecentFragmentReference &&
+        (0, PromiseWrapper_1.getPromiseState)(mostRecentFragmentReference.networkRequest);
+    const slicedFragmentReferences = (networkRequestStatus === null || networkRequestStatus === void 0 ? void 0 : networkRequestStatus.kind) === 'Ok'
+        ? loadedReferences
+        : loadedReferences.slice(0, loadedReferences.length - 1);
+    const completedFragmentReferences = slicedFragmentReferences.map(([pointer]) => {
+        const fragmentReference = pointer.getItemIfNotDisposed();
+        if (fragmentReference == null) {
+            throw new Error('FragmentReference is unexpectedly disposed. \
+            This is indicative of a bug in Isograph.');
+        }
+        return fragmentReference;
+    });
+    const readOutDataAndRecords = completedFragmentReferences.map((fragmentReference) => (0, read_1.readButDoNotEvaluate)(environment, fragmentReference, networkRequestOptions));
+    (0, useReadAndSubscribe_1.useSubscribeToMultiple)(subscribeCompletedFragmentReferences(completedFragmentReferences));
+    if (!networkRequestStatus) {
+        return {
+            kind: 'Complete',
+            fetchMore: getFetchMore(null),
+            results: [],
+            hasNextPage: true,
+        };
+    }
+    switch (networkRequestStatus.kind) {
+        case 'Pending': {
+            const unsubscribe = (0, cache_1.subscribeToAnyChange)(environment, () => {
+                unsubscribe();
+                rerender({});
+            });
+            const results = readCompletedFragmentReferences(completedFragmentReferences);
+            return {
+                results: results.edges,
+                kind: 'Pending',
+                pendingFragment: mostRecentFragmentReference,
+            };
+        }
+        case 'Err': {
+            throw networkRequestStatus.error;
+        }
+        case 'Ok': {
+            const results = readCompletedFragmentReferences(completedFragmentReferences);
+            return {
+                results: results.edges,
+                hasNextPage: results.pageInfo.hasNextPage,
+                kind: 'Complete',
+                fetchMore: getFetchMore(results.pageInfo.endCursor),
+            };
+        }
+    }
+}
+exports.useConnectionSpecPagination = useConnectionSpecPagination;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-359621bd",
+  "version": "0.0.0-main-3a0c06c0",
   "description": "Use Isograph with React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -17,9 +17,9 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-359621bd",
-    "@isograph/react-disposable-state": "0.0.0-main-359621bd",
-    "@isograph/reference-counted-pointer": "0.0.0-main-359621bd"
+    "@isograph/disposable-types": "0.0.0-main-3a0c06c0",
+    "@isograph/react-disposable-state": "0.0.0-main-3a0c06c0",
+    "@isograph/reference-counted-pointer": "0.0.0-main-3a0c06c0"
   },
   "peerDependencies": {
     "react": "18.2.0"

package/src/index.ts

@@ -86,4 +86,5 @@ export { useRerenderOnChange } from './react/useRerenderOnChange';
 export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';
 export { useImperativeExposedMutationField } from './loadable-hooks/useImperativeExposedMutationField';
 export { useSkipLimitPagination } from './loadable-hooks/useSkipLimitPagination';
+export { useConnectionSpecPagination } from './loadable-hooks/useConnectionSpecPagination';
 export { useImperativeLoadableField } from './loadable-hooks/useImperativeLoadableField';

package/src/loadable-hooks/useConnectionSpecPagination.ts

@@ -0,0 +1,319 @@
+import { ItemCleanupPair } from '@isograph/disposable-types';
+import {
+  UNASSIGNED_STATE,
+  useUpdatableDisposableState,
+} from '@isograph/react-disposable-state';
+import {
+  createReferenceCountedPointer,
+  ReferenceCountedPointer,
+} from '@isograph/reference-counted-pointer';
+import { useState } from 'react';
+import { subscribeToAnyChange } from '../core/cache';
+import { FragmentReference } from '../core/FragmentReference';
+import { getPromiseState, readPromise } from '../core/PromiseWrapper';
+import {
+  readButDoNotEvaluate,
+  type WithEncounteredRecords,
+} from '../core/read';
+import { LoadableField, type ReaderAst } from '../core/reader';
+import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
+import { useSubscribeToMultiple } from '../react/useReadAndSubscribe';
+import { maybeUnwrapNetworkRequest } from '../react/useResult';
+
+type FirstOrAfter = 'first' | 'after';
+type OmitFirstAfter<TArgs> = keyof Omit<TArgs, FirstOrAfter> extends never
+  ? void | Record<string, never>
+  : Omit<TArgs, FirstOrAfter>;
+
+type UsePaginationReturnValue<
+  TReadFromStore extends { parameters: object; data: object },
+  TItem,
+> =
+  | {
+      kind: 'Pending';
+      pendingFragment: FragmentReference<TReadFromStore, Connection<TItem>>;
+      results: ReadonlyArray<TItem>;
+    }
+  | {
+      kind: 'Complete';
+      fetchMore: (
+        args: OmitFirstAfter<TReadFromStore['parameters']>,
+        first: number,
+      ) => void;
+      results: ReadonlyArray<TItem>;
+      hasNextPage: boolean;
+    };
+
+type LoadedFragmentReferences<
+  TReadFromStore extends { parameters: object; data: object },
+  TItem,
+> = ReadonlyArray<LoadedFragmentReference<TReadFromStore, TItem>>;
+
+type LoadedFragmentReference<
+  TReadFromStore extends { parameters: object; data: object },
+  TItem,
+> = ItemCleanupPair<
+  ReferenceCountedPointer<FragmentReference<TReadFromStore, TItem>>
+>;
+
+function flatten<T>(arr: ReadonlyArray<ReadonlyArray<T>>): ReadonlyArray<T> {
+  let outArray: Array<T> = [];
+  for (const subarr of arr) {
+    for (const item of subarr) {
+      outArray.push(item);
+    }
+  }
+  return outArray;
+}
+
+type PageInfo = {
+  readonly hasNextPage: boolean;
+  readonly endCursor: string | null;
+};
+
+type Connection<T> = {
+  readonly edges: ReadonlyArray<T> | null;
+  readonly pageInfo: PageInfo;
+};
+
+type NonNullConnection<T> = {
+  readonly edges: ReadonlyArray<T>;
+  readonly pageInfo: PageInfo;
+};
+
+export function useConnectionSpecPagination<
+  TReadFromStore extends {
+    parameters: {
+      readonly first?: number | void | null;
+      readonly after?: string | void | null;
+    };
+    data: object;
+  },
+  TItem,
+>(
+  loadableField: LoadableField<TReadFromStore, Connection<TItem>>,
+): UsePaginationReturnValue<TReadFromStore, TItem> {
+  const networkRequestOptions = {
+    suspendIfInFlight: true,
+    throwOnNetworkError: true,
+  };
+  const { state, setState } =
+    useUpdatableDisposableState<
+      LoadedFragmentReferences<TReadFromStore, Connection<TItem>>
+    >();
+
+  const environment = useIsographEnvironment();
+
+  // TODO move this out of useSkipLimitPagination, and pass environment and networkRequestOptions
+  // as parameters (or recreate networkRequestOptions)
+  function readCompletedFragmentReferences(
+    completedReferences: FragmentReference<TReadFromStore, Connection<TItem>>[],
+  ): NonNullConnection<TItem> {
+    const results = completedReferences.map((fragmentReference, i) => {
+      const readerWithRefetchQueries = readPromise(
+        fragmentReference.readerWithRefetchQueries,
+      );
+
+      const firstParameter = {
+        data: readOutDataAndRecords[i].item,
+        parameters: fragmentReference.variables,
+      };
+
+      if (
+        readerWithRefetchQueries.readerArtifact.kind !== 'EagerReaderArtifact'
+      ) {
+        throw new Error(
+          `@loadable field of kind "${readerWithRefetchQueries.readerArtifact.kind}" is not supported by useSkipLimitPagination`,
+        );
+      }
+
+      return readerWithRefetchQueries.readerArtifact.resolver(firstParameter);
+    });
+
+    const items = flatten(results.map((result) => result.edges ?? []));
+
+    return {
+      edges: items,
+      pageInfo: results[results.length - 1]?.pageInfo ?? {
+        endCursor: null,
+        hasNextPage: true,
+      },
+    };
+  }
+
+  function subscribeCompletedFragmentReferences(
+    completedReferences: FragmentReference<TReadFromStore, Connection<TItem>>[],
+  ) {
+    return completedReferences.map(
+      (
+        fragmentReference,
+        i,
+      ): {
+        records: WithEncounteredRecords<TReadFromStore>;
+        callback: (
+          updatedRecords: WithEncounteredRecords<TReadFromStore>,
+        ) => void;
+        fragmentReference: FragmentReference<TReadFromStore, Connection<TItem>>;
+        readerAst: ReaderAst<Connection<TItem>>;
+      } => {
+        maybeUnwrapNetworkRequest(
+          fragmentReference.networkRequest,
+          networkRequestOptions,
+        );
+
+        const readerWithRefetchQueries = readPromise(
+          fragmentReference.readerWithRefetchQueries,
+        );
+
+        return {
+          fragmentReference,
+          readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+          records: readOutDataAndRecords[i],
+          callback(_data) {
+            rerender({});
+          },
+        };
+      },
+    );
+  }
+
+  const getFetchMore =
+    (after: string | null | undefined) =>
+    (
+      args: OmitFirstAfter<TReadFromStore['parameters']>,
+      first: number,
+    ): void => {
+      // @ts-expect-error
+      const loadedField = loadableField({
+        ...args,
+        after: after,
+        first: first,
+      })[1]();
+      const newPointer = createReferenceCountedPointer(loadedField);
+      const clonedPointers = loadedReferences.map(([refCountedPointer]) => {
+        const clonedRefCountedPointer = refCountedPointer.cloneIfNotDisposed();
+        if (clonedRefCountedPointer == null) {
+          throw new Error(
+            'This reference counted pointer has already been disposed. \
+            This is indicative of a bug in useSkipLimitPagination.',
+          );
+        }
+        return clonedRefCountedPointer;
+      });
+      clonedPointers.push(newPointer);
+
+      const totalItemCleanupPair: ItemCleanupPair<
+        ReadonlyArray<
+          ItemCleanupPair<
+            ReferenceCountedPointer<
+              FragmentReference<TReadFromStore, Connection<TItem>>
+            >
+          >
+        >
+      > = [
+        clonedPointers,
+        () => {
+          clonedPointers.forEach(([, dispose]) => {
+            dispose();
+          });
+        },
+      ];
+
+      setState(totalItemCleanupPair);
+    };
+
+  const [, rerender] = useState({});
+
+  const loadedReferences = state === UNASSIGNED_STATE ? [] : state;
+
+  const mostRecentItem: LoadedFragmentReference<
+    TReadFromStore,
+    Connection<TItem>
+  > | null = loadedReferences[loadedReferences.length - 1];
+  const mostRecentFragmentReference =
+    mostRecentItem?.[0].getItemIfNotDisposed();
+
+  if (mostRecentItem && mostRecentFragmentReference === null) {
+    throw new Error(
+      'FragmentReference is unexpectedly disposed. \
+      This is indicative of a bug in Isograph.',
+    );
+  }
+
+  const networkRequestStatus =
+    mostRecentFragmentReference &&
+    getPromiseState(mostRecentFragmentReference.networkRequest);
+
+  const slicedFragmentReferences =
+    networkRequestStatus?.kind === 'Ok'
+      ? loadedReferences
+      : loadedReferences.slice(0, loadedReferences.length - 1);
+
+  const completedFragmentReferences = slicedFragmentReferences.map(
+    ([pointer]) => {
+      const fragmentReference = pointer.getItemIfNotDisposed();
+      if (fragmentReference == null) {
+        throw new Error(
+          'FragmentReference is unexpectedly disposed. \
+            This is indicative of a bug in Isograph.',
+        );
+      }
+      return fragmentReference;
+    },
+  );
+
+  const readOutDataAndRecords = completedFragmentReferences.map(
+    (fragmentReference) =>
+      readButDoNotEvaluate(
+        environment,
+        fragmentReference,
+        networkRequestOptions,
+      ),
+  );
+
+  useSubscribeToMultiple<TReadFromStore>(
+    subscribeCompletedFragmentReferences(completedFragmentReferences),
+  );
+
+  if (!networkRequestStatus) {
+    return {
+      kind: 'Complete',
+      fetchMore: getFetchMore(null),
+      results: [],
+      hasNextPage: true,
+    };
+  }
+
+  switch (networkRequestStatus.kind) {
+    case 'Pending': {
+      const unsubscribe = subscribeToAnyChange(environment, () => {
+        unsubscribe();
+        rerender({});
+      });
+
+      const results = readCompletedFragmentReferences(
+        completedFragmentReferences,
+      );
+      return {
+        results: results.edges,
+        kind: 'Pending',
+        pendingFragment: mostRecentFragmentReference,
+      };
+    }
+    case 'Err': {
+      throw networkRequestStatus.error;
+    }
+    case 'Ok': {
+      const results = readCompletedFragmentReferences(
+        completedFragmentReferences,
+      );
+
+      return {
+        results: results.edges,
+        hasNextPage: results.pageInfo.hasNextPage,
+        kind: 'Complete',
+        fetchMore: getFetchMore(results.pageInfo.endCursor),
+      };
+    }
+  }
+}