@isograph/react 0.0.0-main-c6a74674 → 0.0.0-main-edade9ce

package/dist/core/IsographEnvironment.d.ts

@@ -12,7 +12,7 @@ type ComponentCache = {
         };
     };
 };
-type FragmentSubscription<TReadFromStore extends Object> = {
+export type FragmentSubscription<TReadFromStore extends Object> = {
     readonly kind: 'FragmentSubscription';
     readonly callback: (newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>) => void;
     /** The value read out from the previous call to readButDoNotEvaluate */

package/dist/core/cache.js

@@ -59,6 +59,7 @@ function normalizeData(environment, normalizationAst, networkResponse, variables
         console.log('after normalization', {
             store: environment.store,
             encounteredIds,
+            environment,
         });
     }
     callSubscriptions(environment, encounteredIds);
@@ -74,6 +75,7 @@ function subscribeToAnyChange(environment, callback) {
     return () => environment.subscriptions.delete(subscription);
 }
 exports.subscribeToAnyChange = subscribeToAnyChange;
+// TODO we should re-read and call callback if the value has changed
 function subscribe(environment, encounteredDataAndRecords, fragmentReference, callback) {
     const fragmentSubscription = {
         kind: 'FragmentSubscription',
@@ -130,7 +132,10 @@ function callSubscriptions(environment, recordsEncounteredWhenNormalizing) {
                     // - consistency
                     // - it's also weird, this is called from makeNetworkRequest, where
                     //   we don't currently pass network request options
-                    {});
+                    {
+                        suspendIfInFlight: false,
+                        throwOnNetworkError: false,
+                    });
                     if (!(0, areEqualWithDeepComparison_1.areEqualObjectsWithDeepComparison)(subscription.encounteredDataAndRecords.item, newEncounteredDataAndRecords.item)) {
                         if (typeof window !== 'undefined' && window.__LOG) {
                             console.log('Deep equality - No', {

package/dist/core/read.d.ts

@@ -6,6 +6,7 @@ export type WithEncounteredRecords<T> = {
 };
 export declare function readButDoNotEvaluate<TReadFromStore extends Object>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, unknown>, networkRequestOptions: NetworkRequestReaderOptions): WithEncounteredRecords<TReadFromStore>;
 export type NetworkRequestReaderOptions = {
-    suspendIfInFlight?: boolean;
-    throwOnNetworkError?: boolean;
+    suspendIfInFlight: boolean;
+    throwOnNetworkError: boolean;
 };
+export declare function getNetworkRequestOptionsWithDefaults(networkRequestOptions?: Partial<NetworkRequestReaderOptions> | void): NetworkRequestReaderOptions;

package/dist/core/read.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.readButDoNotEvaluate = void 0;
+exports.getNetworkRequestOptionsWithDefaults = exports.readButDoNotEvaluate = void 0;
 const cache_1 = require("./cache");
 const componentCache_1 = require("./componentCache");
 const IsographEnvironment_1 = require("./IsographEnvironment");
@@ -329,6 +329,14 @@ function writeQueryArgsToVariables(targetVariables, queryArgs, variables) {
         }
     }
 }
+function getNetworkRequestOptionsWithDefaults(networkRequestOptions) {
+    var _a, _b;
+    return {
+        suspendIfInFlight: (_a = networkRequestOptions === null || networkRequestOptions === void 0 ? void 0 : networkRequestOptions.suspendIfInFlight) !== null && _a !== void 0 ? _a : false,
+        throwOnNetworkError: (_b = networkRequestOptions === null || networkRequestOptions === void 0 ? void 0 : networkRequestOptions.throwOnNetworkError) !== null && _b !== void 0 ? _b : true,
+    };
+}
+exports.getNetworkRequestOptionsWithDefaults = getNetworkRequestOptionsWithDefaults;
 // TODO use a description of the params for this?
 // TODO call stableStringifyArgs on the variable values, as well.
 // This doesn't matter for now, since we are just using primitive values

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { IsographEnvironmentProvider, useIsographEnvironment, type IsographEnvir
 export { useImperativeReference } from './react/useImperativeReference';
 export { FragmentReader } from './react/FragmentReader';
 export { useResult } from './react/useResult';
+export { useReadAndSubscribe, useSubscribeToMultiple, } from './react/useReadAndSubscribe';
 export { useLazyReference } from './react/useLazyReference';
 export { useRerenderOnChange } from './react/useRerenderOnChange';
 export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';
+export { useSuspensefulSkipLimitPagination } from './loadable-hooks/useSuspensefulSkipLimitPagination';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClientSideDefer = exports.useRerenderOnChange = exports.useLazyReference = 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.getPromiseState = exports.readPromise = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
+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.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; } });
@@ -33,9 +33,14 @@ var FragmentReader_1 = require("./react/FragmentReader");
 Object.defineProperty(exports, "FragmentReader", { enumerable: true, get: function () { return FragmentReader_1.FragmentReader; } });
 var useResult_1 = require("./react/useResult");
 Object.defineProperty(exports, "useResult", { enumerable: true, get: function () { return useResult_1.useResult; } });
+var useReadAndSubscribe_1 = require("./react/useReadAndSubscribe");
+Object.defineProperty(exports, "useReadAndSubscribe", { enumerable: true, get: function () { return useReadAndSubscribe_1.useReadAndSubscribe; } });
+Object.defineProperty(exports, "useSubscribeToMultiple", { enumerable: true, get: function () { return useReadAndSubscribe_1.useSubscribeToMultiple; } });
 var useLazyReference_1 = require("./react/useLazyReference");
 Object.defineProperty(exports, "useLazyReference", { enumerable: true, get: function () { return useLazyReference_1.useLazyReference; } });
 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; } });

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

@@ -0,0 +1,23 @@
+import { LoadableField } from '../core/reader';
+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>;
+};
+/**
+ * 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 declare function useSuspensefulSkipLimitPagination<TArgs extends {
+    skip: number | void | null;
+    limit: number | void | null;
+}, TItem>(loadableField: LoadableField<TArgs, Array<TItem>>): UseSkipLimitReturnValue<TArgs, TItem>;
+export {};

package/dist/loadable-hooks/useSuspensefulSkipLimitPagination.js

@@ -0,0 +1,78 @@
+"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");
+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);
+        return fragmentReference.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/dist/react/FragmentReader.d.ts

@@ -5,9 +5,9 @@ import { NetworkRequestReaderOptions } from '../core/read';
 export declare function FragmentReader<TProps extends Record<any, any>, TEntrypoint extends IsographEntrypoint<any, React.FC<TProps>>>(props: TProps extends Record<string, never> ? {
     fragmentReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, React.FC<{}>>;
     additionalProps?: TProps;
-    networkRequestOptions?: NetworkRequestReaderOptions;
+    networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
 } : {
     fragmentReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, React.FC<TProps>>;
     additionalProps: TProps;
-    networkRequestOptions?: NetworkRequestReaderOptions;
+    networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
 }): React.ReactNode;

package/dist/react/FragmentReader.js

@@ -27,8 +27,7 @@ exports.FragmentReader = void 0;
 const React = __importStar(require("react"));
 const useResult_1 = require("./useResult");
 function FragmentReader(props) {
-    var _a;
-    const Component = (0, useResult_1.useResult)(props.fragmentReference, (_a = props.networkRequestOptions) !== null && _a !== void 0 ? _a : {});
+    const Component = (0, useResult_1.useResult)(props.fragmentReference, props.networkRequestOptions);
     return React.createElement(Component, Object.assign({}, props.additionalProps));
 }
 exports.FragmentReader = FragmentReader;

package/dist/react/useResult.d.ts

@@ -1,5 +1,5 @@
 import { FragmentReference } from '../core/FragmentReference';
 import { NetworkRequestReaderOptions } from '../core/read';
 import { PromiseWrapper } from '../core/PromiseWrapper';
-export declare function useResult<TReadFromStore extends Object, TClientFieldValue>(fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>, networkRequestOptions: NetworkRequestReaderOptions): TClientFieldValue;
+export declare function useResult<TReadFromStore extends Object, TClientFieldValue>(fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>, partialNetworkRequestOptions?: Partial<NetworkRequestReaderOptions> | void): TClientFieldValue;
 export declare function maybeUnwrapNetworkRequest(networkRequest: PromiseWrapper<void, any>, networkRequestOptions: NetworkRequestReaderOptions): void;

package/dist/react/useResult.js

@@ -4,9 +4,11 @@ exports.maybeUnwrapNetworkRequest = exports.useResult = void 0;
 const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
 const componentCache_1 = require("../core/componentCache");
 const useReadAndSubscribe_1 = require("./useReadAndSubscribe");
+const read_1 = require("../core/read");
 const PromiseWrapper_1 = require("../core/PromiseWrapper");
-function useResult(fragmentReference, networkRequestOptions) {
+function useResult(fragmentReference, partialNetworkRequestOptions) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    const networkRequestOptions = (0, read_1.getNetworkRequestOptionsWithDefaults)(partialNetworkRequestOptions);
     maybeUnwrapNetworkRequest(fragmentReference.networkRequest, networkRequestOptions);
     switch (fragmentReference.readerArtifact.kind) {
         case 'ComponentReaderArtifact': {

package/package.json

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

package/src/core/IsographEnvironment.ts

@@ -11,7 +11,7 @@ type ComponentCache = {
   };
 };
 
-type FragmentSubscription<TReadFromStore extends Object> = {
+export type FragmentSubscription<TReadFromStore extends Object> = {
   readonly kind: 'FragmentSubscription';
   readonly callback: (
     newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,

package/src/core/cache.ts

@@ -8,6 +8,7 @@ import {
   type IsographEnvironment,
   DataTypeValue,
   getLink,
+  FragmentSubscription,
 } from './IsographEnvironment';
 import {
   IsographEntrypoint,
@@ -131,6 +132,7 @@ export function normalizeData(
     console.log('after normalization', {
       store: environment.store,
       encounteredIds,
+      environment,
     });
   }
   callSubscriptions(environment, encounteredIds);
@@ -149,6 +151,7 @@ export function subscribeToAnyChange(
   return () => environment.subscriptions.delete(subscription);
 }
 
+// TODO we should re-read and call callback if the value has changed
 export function subscribe<TReadFromStore extends Object>(
   environment: IsographEnvironment,
   encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
@@ -157,12 +160,12 @@ export function subscribe<TReadFromStore extends Object>(
     newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
   ) => void,
 ): () => void {
-  const fragmentSubscription = {
+  const fragmentSubscription: FragmentSubscription<TReadFromStore> = {
     kind: 'FragmentSubscription',
     callback,
     encounteredDataAndRecords,
     fragmentReference,
-  } as const;
+  };
   // @ts-expect-error
   environment.subscriptions.add(fragmentSubscription);
   // @ts-expect-error
@@ -223,7 +226,10 @@ function callSubscriptions(
               // - consistency
               // - it's also weird, this is called from makeNetworkRequest, where
               //   we don't currently pass network request options
-              {},
+              {
+                suspendIfInFlight: false,
+                throwOnNetworkError: false,
+              },
             );
 
             if (

package/src/core/read.ts

@@ -468,10 +468,19 @@ function writeQueryArgsToVariables(
 }
 
 export type NetworkRequestReaderOptions = {
-  suspendIfInFlight?: boolean;
-  throwOnNetworkError?: boolean;
+  suspendIfInFlight: boolean;
+  throwOnNetworkError: boolean;
 };
 
+export function getNetworkRequestOptionsWithDefaults(
+  networkRequestOptions?: Partial<NetworkRequestReaderOptions> | void,
+): NetworkRequestReaderOptions {
+  return {
+    suspendIfInFlight: networkRequestOptions?.suspendIfInFlight ?? false,
+    throwOnNetworkError: networkRequestOptions?.throwOnNetworkError ?? true,
+  };
+}
+
 // TODO use a description of the params for this?
 // TODO call stableStringifyArgs on the variable values, as well.
 // This doesn't matter for now, since we are just using primitive values

package/src/index.ts

@@ -71,7 +71,12 @@ export {
 export { useImperativeReference } from './react/useImperativeReference';
 export { FragmentReader } from './react/FragmentReader';
 export { useResult } from './react/useResult';
+export {
+  useReadAndSubscribe,
+  useSubscribeToMultiple,
+} from './react/useReadAndSubscribe';
 export { useLazyReference } from './react/useLazyReference';
 export { useRerenderOnChange } from './react/useRerenderOnChange';
 
 export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';
+export { useSuspensefulSkipLimitPagination } from './loadable-hooks/useSuspensefulSkipLimitPagination';

package/src/loadable-hooks/useSuspensefulSkipLimitPagination.ts

@@ -0,0 +1,147 @@
+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';
+
+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,
+    );
+    return fragmentReference.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,
+  };
+}

package/src/react/FragmentReader.tsx

@@ -15,7 +15,7 @@ export function FragmentReader<
           React.FC<{}>
         >;
         additionalProps?: TProps;
-        networkRequestOptions?: NetworkRequestReaderOptions;
+        networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
       }
     : {
         fragmentReference: FragmentReference<
@@ -23,12 +23,12 @@ export function FragmentReader<
           React.FC<TProps>
         >;
         additionalProps: TProps;
-        networkRequestOptions?: NetworkRequestReaderOptions;
+        networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
       },
 ): React.ReactNode {
   const Component = useResult(
     props.fragmentReference,
-    props.networkRequestOptions ?? {},
+    props.networkRequestOptions,
   );
   return <Component {...props.additionalProps} />;
 }

package/src/react/useResult.ts

@@ -2,14 +2,20 @@ import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
 import { FragmentReference } from '../core/FragmentReference';
 import { getOrCreateCachedComponent } from '../core/componentCache';
 import { useReadAndSubscribe } from './useReadAndSubscribe';
-import { NetworkRequestReaderOptions } from '../core/read';
+import {
+  getNetworkRequestOptionsWithDefaults,
+  NetworkRequestReaderOptions,
+} from '../core/read';
 import { getPromiseState, PromiseWrapper } from '../core/PromiseWrapper';
 
 export function useResult<TReadFromStore extends Object, TClientFieldValue>(
   fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
-  networkRequestOptions: NetworkRequestReaderOptions,
+  partialNetworkRequestOptions?: Partial<NetworkRequestReaderOptions> | void,
 ): TClientFieldValue {
   const environment = useIsographEnvironment();
+  const networkRequestOptions = getNetworkRequestOptionsWithDefaults(
+    partialNetworkRequestOptions,
+  );
 
   maybeUnwrapNetworkRequest(
     fragmentReference.networkRequest,