@isograph/react 0.0.0-main-47ff1729 → 0.0.0-main-5c3c47b2

package/dist/index.d.ts

@@ -16,4 +16,4 @@ export { useReadAndSubscribe, useSubscribeToMultiple, } from './react/useReadAnd
 export { useLazyReference } from './react/useLazyReference';
 export { useRerenderOnChange } from './react/useRerenderOnChange';
 export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';
-export { useSuspensefulSkipLimitPagination } from './loadable-hooks/useSuspensefulSkipLimitPagination';
+export { useSkipLimitPagination } from './loadable-hooks/useSkipLimitPagination';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSuspensefulSkipLimitPagination = 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.useSkipLimitPagination = 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; } });
@@ -44,5 +44,5 @@ var useRerenderOnChange_1 = require("./react/useRerenderOnChange");
 Object.defineProperty(exports, "useRerenderOnChange", { enumerable: true, get: function () { return useRerenderOnChange_1.useRerenderOnChange; } });
 var useClientSideDefer_1 = require("./loadable-hooks/useClientSideDefer");
 Object.defineProperty(exports, "useClientSideDefer", { enumerable: true, get: function () { return useClientSideDefer_1.useClientSideDefer; } });
-var useSuspensefulSkipLimitPagination_1 = require("./loadable-hooks/useSuspensefulSkipLimitPagination");
-Object.defineProperty(exports, "useSuspensefulSkipLimitPagination", { enumerable: true, get: function () { return useSuspensefulSkipLimitPagination_1.useSuspensefulSkipLimitPagination; } });
+var useSkipLimitPagination_1 = require("./loadable-hooks/useSkipLimitPagination");
+Object.defineProperty(exports, "useSkipLimitPagination", { enumerable: true, get: function () { return useSkipLimitPagination_1.useSkipLimitPagination; } });

package/dist/loadable-hooks/{useSuspensefulSkipLimitPagination.d.ts → useSkipLimitPagination.d.ts}

@@ -1,9 +1,15 @@
 import { LoadableField } from '../core/reader';
+import { FragmentReference } from '../core/FragmentReference';
 type SkipOrLimit = 'skip' | 'limit';
 type OmitSkipLimit<TArgs> = keyof Omit<TArgs, SkipOrLimit> extends never ? void | Record<string, never> : Omit<TArgs, SkipOrLimit>;
 type UseSkipLimitReturnValue<TArgs, TItem> = {
+    readonly kind: 'Complete';
     readonly fetchMore: (args: OmitSkipLimit<TArgs>, count: number) => void;
     readonly results: ReadonlyArray<TItem>;
+} | {
+    readonly kind: 'Pending';
+    readonly results: ReadonlyArray<TItem>;
+    readonly pendingFragment: FragmentReference<any, ReadonlyArray<TItem>>;
 };
 /**
  * accepts a loadableField that accepts skip and limit arguments
@@ -16,7 +22,7 @@ type UseSkipLimitReturnValue<TArgs, TItem> = {
  *
  * Calling fetchMore before the hook mounts is a no-op.
  */
-export declare function useSuspensefulSkipLimitPagination<TArgs extends {
+export declare function useSkipLimitPagination<TArgs extends {
     skip: number | void | null;
     limit: number | void | null;
 }, TItem>(loadableField: LoadableField<TArgs, Array<TItem>>): UseSkipLimitReturnValue<TArgs, TItem>;

package/dist/loadable-hooks/useSkipLimitPagination.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSkipLimitPagination = void 0;
+const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
+const useResult_1 = require("../react/useResult");
+const read_1 = require("../core/read");
+const react_disposable_state_1 = require("@isograph/react-disposable-state");
+const reference_counted_pointer_1 = require("@isograph/reference-counted-pointer");
+const PromiseWrapper_1 = require("../core/PromiseWrapper");
+function flatten(arr) {
+    let outArray = [];
+    for (const subarr of arr) {
+        for (const item of subarr) {
+            outArray.push(item);
+        }
+    }
+    return outArray;
+}
+/**
+ * accepts a loadableField that accepts skip and limit arguments
+ * and returns:
+ * - a fetchMore function that, when called, triggers a network
+ *   request for additional data, and
+ * - the data received so far.
+ *
+ * This hook will suspend if any network request is in flight.
+ *
+ * Calling fetchMore before the hook mounts is a no-op.
+ */
+function useSkipLimitPagination(loadableField) {
+    const networkRequestOptions = {
+        suspendIfInFlight: true,
+        throwOnNetworkError: true,
+    };
+    const { state, setState } = (0, react_disposable_state_1.useUpdatableDisposableState)();
+    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    function readCompletedFragmentReferences(completedReferences) {
+        // In general, this will not suspend. But it could, if there is missing data.
+        // A better version of this hook would not do any reading here.
+        const results = completedReferences.map(([pointer]) => {
+            const fragmentReference = pointer.getItemIfNotDisposed();
+            if (fragmentReference == null) {
+                throw new Error('FragmentReference is unexpectedly disposed. \
+        This is indicative of a bug in Isograph.');
+            }
+            (0, useResult_1.maybeUnwrapNetworkRequest)(fragmentReference.networkRequest, networkRequestOptions);
+            const data = (0, read_1.readButDoNotEvaluate)(environment, fragmentReference, networkRequestOptions);
+            const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
+            return readerWithRefetchQueries.readerArtifact.resolver(data.item, undefined);
+        });
+        const items = flatten(results);
+        return items;
+    }
+    const getFetchMore = (loadedSoFar) => (args, count) => {
+        // @ts-expect-error
+        const loadedField = loadableField(Object.assign(Object.assign({}, args), { skip: loadedSoFar, limit: count }))[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 loadedReferences = state === react_disposable_state_1.UNASSIGNED_STATE ? [] : state;
+    if (loadedReferences.length === 0) {
+        return {
+            kind: 'Complete',
+            fetchMore: getFetchMore(0),
+            results: [],
+        };
+    }
+    const mostRecentItem = loadedReferences[loadedReferences.length - 1];
+    const mostRecentFragmentReference = mostRecentItem[0].getItemIfNotDisposed();
+    if (mostRecentFragmentReference === null) {
+        throw new Error('FragmentReference is unexpectedly disposed. \
+        This is indicative of a bug in Isograph.');
+    }
+    const networkRequestStatus = (0, PromiseWrapper_1.getPromiseState)(mostRecentFragmentReference.networkRequest);
+    switch (networkRequestStatus.kind) {
+        case 'Pending': {
+            const completedFragmentReferences = loadedReferences.slice(0, loadedReferences.length - 1);
+            return {
+                kind: 'Pending',
+                pendingFragment: mostRecentFragmentReference,
+                results: readCompletedFragmentReferences(completedFragmentReferences),
+            };
+        }
+        case 'Err': {
+            throw networkRequestStatus.error;
+        }
+        case 'Ok': {
+            const results = readCompletedFragmentReferences(loadedReferences);
+            return {
+                kind: 'Complete',
+                results,
+                fetchMore: getFetchMore(results.length),
+            };
+        }
+    }
+}
+exports.useSkipLimitPagination = useSkipLimitPagination;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-47ff1729",
+  "version": "0.0.0-main-5c3c47b2",
   "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-47ff1729",
-    "@isograph/react-disposable-state": "0.0.0-main-47ff1729",
-    "@isograph/reference-counted-pointer": "0.0.0-main-47ff1729"
+    "@isograph/disposable-types": "0.0.0-main-5c3c47b2",
+    "@isograph/react-disposable-state": "0.0.0-main-5c3c47b2",
+    "@isograph/reference-counted-pointer": "0.0.0-main-5c3c47b2"
   },
   "peerDependencies": {
     "react": "18.2.0"

package/src/index.ts

@@ -81,4 +81,4 @@ export { useLazyReference } from './react/useLazyReference';
 export { useRerenderOnChange } from './react/useRerenderOnChange';
 
 export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';
-export { useSuspensefulSkipLimitPagination } from './loadable-hooks/useSuspensefulSkipLimitPagination';
+export { useSkipLimitPagination } from './loadable-hooks/useSkipLimitPagination';

package/src/loadable-hooks/useSkipLimitPagination.ts

@@ -0,0 +1,207 @@
+import { LoadableField } from '../core/reader';
+import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
+import { ItemCleanupPair } from '@isograph/disposable-types';
+import { FragmentReference } from '../core/FragmentReference';
+import { maybeUnwrapNetworkRequest } from '../react/useResult';
+import { readButDoNotEvaluate } from '../core/read';
+import {
+  UNASSIGNED_STATE,
+  useUpdatableDisposableState,
+} from '@isograph/react-disposable-state';
+import {
+  createReferenceCountedPointer,
+  ReferenceCountedPointer,
+} from '@isograph/reference-counted-pointer';
+import { getPromiseState, readPromise } from '../core/PromiseWrapper';
+
+type SkipOrLimit = 'skip' | 'limit';
+type OmitSkipLimit<TArgs> = keyof Omit<TArgs, SkipOrLimit> extends never
+  ? void | Record<string, never>
+  : Omit<TArgs, SkipOrLimit>;
+
+type UseSkipLimitReturnValue<TArgs, TItem> =
+  | {
+      readonly kind: 'Complete';
+      readonly fetchMore: (args: OmitSkipLimit<TArgs>, count: number) => void;
+      readonly results: ReadonlyArray<TItem>;
+    }
+  | {
+      readonly kind: 'Pending';
+      readonly results: ReadonlyArray<TItem>;
+      readonly pendingFragment: FragmentReference<any, ReadonlyArray<TItem>>;
+    };
+
+type ArrayFragmentReference<TItem> = FragmentReference<
+  any,
+  ReadonlyArray<TItem>
+>;
+
+type LoadedFragmentReferences<TItem> = ReadonlyArray<
+  ItemCleanupPair<ReferenceCountedPointer<ArrayFragmentReference<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;
+}
+
+/**
+ * accepts a loadableField that accepts skip and limit arguments
+ * and returns:
+ * - a fetchMore function that, when called, triggers a network
+ *   request for additional data, and
+ * - the data received so far.
+ *
+ * This hook will suspend if any network request is in flight.
+ *
+ * Calling fetchMore before the hook mounts is a no-op.
+ */
+export function useSkipLimitPagination<
+  TArgs extends {
+    skip: number | void | null;
+    limit: number | void | null;
+  },
+  TItem,
+>(
+  loadableField: LoadableField<TArgs, Array<TItem>>,
+): UseSkipLimitReturnValue<TArgs, TItem> {
+  const networkRequestOptions = {
+    suspendIfInFlight: true,
+    throwOnNetworkError: true,
+  };
+  const { state, setState } =
+    useUpdatableDisposableState<LoadedFragmentReferences<TItem>>();
+
+  const environment = useIsographEnvironment();
+
+  function readCompletedFragmentReferences(
+    completedReferences: ReadonlyArray<
+      ItemCleanupPair<ReferenceCountedPointer<ArrayFragmentReference<TItem>>>
+    >,
+  ) {
+    // In general, this will not suspend. But it could, if there is missing data.
+    // A better version of this hook would not do any reading here.
+    const results = completedReferences.map(([pointer]) => {
+      const fragmentReference = pointer.getItemIfNotDisposed();
+      if (fragmentReference == null) {
+        throw new Error(
+          'FragmentReference is unexpectedly disposed. \
+        This is indicative of a bug in Isograph.',
+        );
+      }
+
+      maybeUnwrapNetworkRequest(
+        fragmentReference.networkRequest,
+        networkRequestOptions,
+      );
+      const data = readButDoNotEvaluate(
+        environment,
+        fragmentReference,
+        networkRequestOptions,
+      );
+
+      const readerWithRefetchQueries = readPromise(
+        fragmentReference.readerWithRefetchQueries,
+      );
+
+      return readerWithRefetchQueries.readerArtifact.resolver(
+        data.item,
+        undefined,
+      ) as ReadonlyArray<any>;
+    });
+
+    const items = flatten(results);
+    return items;
+  }
+
+  const getFetchMore =
+    (loadedSoFar: number) =>
+    (args: OmitSkipLimit<TArgs>, count: number): void => {
+      // @ts-expect-error
+      const loadedField = loadableField({
+        ...args,
+        skip: loadedSoFar,
+        limit: count,
+      })[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<ArrayFragmentReference<TItem>>
+          >
+        >
+      > = [
+        clonedPointers,
+        () => {
+          clonedPointers.forEach(([, dispose]) => {
+            dispose();
+          });
+        },
+      ];
+
+      setState(totalItemCleanupPair);
+    };
+
+  const loadedReferences = state === UNASSIGNED_STATE ? [] : state;
+  if (loadedReferences.length === 0) {
+    return {
+      kind: 'Complete',
+      fetchMore: getFetchMore(0),
+      results: [],
+    };
+  }
+
+  const mostRecentItem = loadedReferences[loadedReferences.length - 1];
+  const mostRecentFragmentReference = mostRecentItem[0].getItemIfNotDisposed();
+  if (mostRecentFragmentReference === null) {
+    throw new Error(
+      'FragmentReference is unexpectedly disposed. \
+        This is indicative of a bug in Isograph.',
+    );
+  }
+
+  const networkRequestStatus = getPromiseState(
+    mostRecentFragmentReference.networkRequest,
+  );
+  switch (networkRequestStatus.kind) {
+    case 'Pending': {
+      const completedFragmentReferences = loadedReferences.slice(
+        0,
+        loadedReferences.length - 1,
+      );
+      return {
+        kind: 'Pending',
+        pendingFragment: mostRecentFragmentReference,
+        results: readCompletedFragmentReferences(completedFragmentReferences),
+      };
+    }
+    case 'Err': {
+      throw networkRequestStatus.error;
+    }
+    case 'Ok': {
+      const results = readCompletedFragmentReferences(loadedReferences);
+      return {
+        kind: 'Complete',
+        results,
+        fetchMore: getFetchMore(results.length),
+      };
+    }
+  }
+}

package/dist/loadable-hooks/useSuspensefulSkipLimitPagination.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSuspensefulSkipLimitPagination = void 0;
-const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
-const useResult_1 = require("../react/useResult");
-const read_1 = require("../core/read");
-const react_disposable_state_1 = require("@isograph/react-disposable-state");
-const reference_counted_pointer_1 = require("@isograph/reference-counted-pointer");
-const PromiseWrapper_1 = require("../core/PromiseWrapper");
-function flatten(arr) {
-    let outArray = [];
-    for (const subarr of arr) {
-        for (const item of subarr) {
-            outArray.push(item);
-        }
-    }
-    return outArray;
-}
-/**
- * accepts a loadableField that accepts skip and limit arguments
- * and returns:
- * - a fetchMore function that, when called, triggers a network
- *   request for additional data, and
- * - the data received so far.
- *
- * This hook will suspend if any network request is in flight.
- *
- * Calling fetchMore before the hook mounts is a no-op.
- */
-function useSuspensefulSkipLimitPagination(loadableField) {
-    const networkRequestOptions = {
-        suspendIfInFlight: true,
-        throwOnNetworkError: true,
-    };
-    const { state, setState } = (0, react_disposable_state_1.useUpdatableDisposableState)();
-    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
-    const loadedReferences = state === react_disposable_state_1.UNASSIGNED_STATE ? [] : state;
-    const results = loadedReferences.map(([pointer]) => {
-        const fragmentReference = pointer.getItemIfNotDisposed();
-        if (fragmentReference == null) {
-            throw new Error('FragmentReference is unexpectedly disposed. \
-        This is indicative of a bug in Isograph.');
-        }
-        (0, useResult_1.maybeUnwrapNetworkRequest)(fragmentReference.networkRequest, networkRequestOptions);
-        const data = (0, read_1.readButDoNotEvaluate)(environment, fragmentReference, networkRequestOptions);
-        const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
-        return readerWithRefetchQueries.readerArtifact.resolver(data.item, undefined);
-    });
-    const items = flatten(results);
-    const loadedSoFar = items.length;
-    return {
-        fetchMore: (args, count) => {
-            // @ts-expect-error
-            const loadedField = loadableField(Object.assign(Object.assign({}, args), { skip: loadedSoFar, limit: count }))[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 useSuspensefulSkipLimitPagination.');
-                    }
-                    return clonedRefCountedPointer;
-                }),
-            ];
-            const allPointers = [...clonedPointers, newPointer];
-            const totalItemCleanupPair = [
-                allPointers,
-                () => {
-                    allPointers.forEach(([, dispose]) => {
-                        dispose();
-                    });
-                },
-            ];
-            setState(totalItemCleanupPair);
-        },
-        results: items,
-    };
-}
-exports.useSuspensefulSkipLimitPagination = useSuspensefulSkipLimitPagination;

package/src/loadable-hooks/useSuspensefulSkipLimitPagination.ts

@@ -1,153 +0,0 @@
-import { LoadableField } from '../core/reader';
-import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
-import { ItemCleanupPair } from '@isograph/disposable-types';
-import { FragmentReference } from '../core/FragmentReference';
-import { maybeUnwrapNetworkRequest } from '../react/useResult';
-import { readButDoNotEvaluate } from '../core/read';
-import {
-  UNASSIGNED_STATE,
-  useUpdatableDisposableState,
-} from '@isograph/react-disposable-state';
-import {
-  createReferenceCountedPointer,
-  ReferenceCountedPointer,
-} from '@isograph/reference-counted-pointer';
-import { readPromise } from '../core/PromiseWrapper';
-
-type SkipOrLimit = 'skip' | 'limit';
-type OmitSkipLimit<TArgs> = keyof Omit<TArgs, SkipOrLimit> extends never
-  ? void | Record<string, never>
-  : Omit<TArgs, SkipOrLimit>;
-
-type UseSkipLimitReturnValue<TArgs, TItem> = {
-  readonly fetchMore: (args: OmitSkipLimit<TArgs>, count: number) => void;
-  readonly results: ReadonlyArray<TItem>;
-};
-
-type ArrayFragmentReference<TItem> = FragmentReference<
-  any,
-  ReadonlyArray<TItem>
->;
-
-type LoadedFragmentReferences<TItem> = ReadonlyArray<
-  ItemCleanupPair<ReferenceCountedPointer<ArrayFragmentReference<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;
-}
-
-/**
- * accepts a loadableField that accepts skip and limit arguments
- * and returns:
- * - a fetchMore function that, when called, triggers a network
- *   request for additional data, and
- * - the data received so far.
- *
- * This hook will suspend if any network request is in flight.
- *
- * Calling fetchMore before the hook mounts is a no-op.
- */
-export function useSuspensefulSkipLimitPagination<
-  TArgs extends {
-    skip: number | void | null;
-    limit: number | void | null;
-  },
-  TItem,
->(
-  loadableField: LoadableField<TArgs, Array<TItem>>,
-): UseSkipLimitReturnValue<TArgs, TItem> {
-  const networkRequestOptions = {
-    suspendIfInFlight: true,
-    throwOnNetworkError: true,
-  };
-  const { state, setState } =
-    useUpdatableDisposableState<LoadedFragmentReferences<TItem>>();
-
-  const environment = useIsographEnvironment();
-
-  const loadedReferences = state === UNASSIGNED_STATE ? [] : state;
-
-  const results = loadedReferences.map(([pointer]) => {
-    const fragmentReference = pointer.getItemIfNotDisposed();
-    if (fragmentReference == null) {
-      throw new Error(
-        'FragmentReference is unexpectedly disposed. \
-        This is indicative of a bug in Isograph.',
-      );
-    }
-
-    maybeUnwrapNetworkRequest(
-      fragmentReference.networkRequest,
-      networkRequestOptions,
-    );
-    const data = readButDoNotEvaluate(
-      environment,
-      fragmentReference,
-      networkRequestOptions,
-    );
-
-    const readerWithRefetchQueries = readPromise(
-      fragmentReference.readerWithRefetchQueries,
-    );
-
-    return readerWithRefetchQueries.readerArtifact.resolver(
-      data.item,
-      undefined,
-    ) as ReadonlyArray<any>;
-  });
-
-  const items = flatten(results);
-  const loadedSoFar = items.length;
-
-  return {
-    fetchMore: (args, count) => {
-      // @ts-expect-error
-      const loadedField = loadableField({
-        ...args,
-        skip: loadedSoFar,
-        limit: count,
-      })[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 useSuspensefulSkipLimitPagination.',
-            );
-          }
-          return clonedRefCountedPointer;
-        }),
-      ];
-
-      const allPointers = [...clonedPointers, newPointer];
-
-      const totalItemCleanupPair: ItemCleanupPair<
-        ReadonlyArray<
-          ItemCleanupPair<
-            ReferenceCountedPointer<ArrayFragmentReference<TItem>>
-          >
-        >
-      > = [
-        allPointers,
-        () => {
-          allPointers.forEach(([, dispose]) => {
-            dispose();
-          });
-        },
-      ];
-
-      setState(totalItemCleanupPair);
-    },
-    results: items,
-  };
-}