@isograph/react 0.2.0 → 0.3.0

package/dist/loadable-hooks/useConnectionSpecPagination.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectionSpecPagination = useConnectionSpecPagination;
+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, initialState) {
+    var _a, _b;
+    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) => {
+            var _a;
+            const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
+            // invariant: readOutDataAndRecords.length === completedReferences.length
+            const data = (_a = readOutDataAndRecords[i]) === null || _a === void 0 ? void 0 : _a.item;
+            if (data == null) {
+                throw new Error('Parameter data is unexpectedly null. This is indicative of a bug in Isograph.');
+            }
+            const firstParameter = {
+                data,
+                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);
+            const records = readOutDataAndRecords[i];
+            if (records == null) {
+                throw new Error('subscribeCompletedFragmentReferences records is unexpectedly null');
+            }
+            return {
+                fragmentReference,
+                readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+                records,
+                callback(_data) {
+                    rerender({});
+                },
+            };
+        });
+    }
+    const getFetchMore = (after) => (count, fetchOptions) => {
+        const loadedField = loadableField({
+            after: after,
+            first: count,
+        }, fetchOptions !== null && fetchOptions !== void 0 ? fetchOptions : {})[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((_a = initialState === null || initialState === void 0 ? void 0 : initialState.endCursor) !== null && _a !== void 0 ? _a : null),
+            results: [],
+            hasNextPage: (_b = initialState === null || initialState === void 0 ? void 0 : initialState.hasNextPage) !== null && _b !== void 0 ? _b : 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),
+            };
+        }
+    }
+}

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

@@ -3,3 +3,4 @@ type UseImperativeLoadableFieldReturn<TArgs> = {
 };
 export declare function useImperativeExposedMutationField<TArgs>(exposedField: (args: TArgs) => [string, () => void]): UseImperativeLoadableFieldReturn<TArgs>;
 export {};
+//# sourceMappingURL=useImperativeExposedMutationField.d.ts.map

package/dist/loadable-hooks/useImperativeExposedMutationField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImperativeExposedMutationField.d.ts","sourceRoot":"","sources":["../../src/loadable-hooks/useImperativeExposedMutationField.ts"],"names":[],"mappings":"AAAA,KAAK,gCAAgC,CAAC,KAAK,IAAI;IAC7C,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAKF,wBAAgB,iCAAiC,CAAC,KAAK,EACrD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,GAClD,gCAAgC,CAAC,KAAK,CAAC,CAOzC"}

package/dist/loadable-hooks/useImperativeExposedMutationField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImperativeExposedMutationField = void 0;
+exports.useImperativeExposedMutationField = useImperativeExposedMutationField;
 // Note: this function doesn't seem to work if there are additional arguments,
 // e.g. with set_pet_tagline. Why? This seems to straightforwardly call
 // exposedField(args)[1](); Odd.
@@ -12,4 +12,3 @@ function useImperativeExposedMutationField(exposedField) {
         },
     };
 }
-exports.useImperativeExposedMutationField = useImperativeExposedMutationField;

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

@@ -1,9 +1,17 @@
-import { FragmentReference } from '../core/FragmentReference';
+import { ExtractParameters, FragmentReference } from '../core/FragmentReference';
 import { UnassignedState } from '@isograph/react-disposable-state';
 import { LoadableField } from '../core/reader';
-type UseImperativeLoadableFieldReturn<TArgs, TResult> = {
-    fragmentReference: FragmentReference<any, TResult> | UnassignedState;
-    loadField: (args: TArgs) => void;
+import { FetchOptions } from '../core/check';
+type UseImperativeLoadableFieldReturn<TReadFromStore extends {
+    data: object;
+    parameters: object;
+}, TResult, TProvidedArgs extends object> = {
+    fragmentReference: FragmentReference<TReadFromStore, TResult> | UnassignedState;
+    loadField: (args: Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs> | void, fetchOptions?: FetchOptions) => void;
 };
-export declare function useImperativeLoadableField<TArgs, TResult>(loadableField: LoadableField<TArgs, TResult>): UseImperativeLoadableFieldReturn<TArgs, TResult>;
+export declare function useImperativeLoadableField<TReadFromStore extends {
+    data: object;
+    parameters: object;
+}, TResult, TProvidedArgs extends object>(loadableField: LoadableField<TReadFromStore, TResult, Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>>): UseImperativeLoadableFieldReturn<TReadFromStore, TResult, TProvidedArgs>;
 export {};
+//# sourceMappingURL=useImperativeLoadableField.d.ts.map

package/dist/loadable-hooks/useImperativeLoadableField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImperativeLoadableField.d.ts","sourceRoot":"","sources":["../../src/loadable-hooks/useImperativeLoadableField.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,eAAe,EAEhB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,KAAK,gCAAgC,CACnC,cAAc,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,EAC3D,OAAO,EACP,aAAa,SAAS,MAAM,IAC1B;IACF,iBAAiB,EACb,iBAAiB,CAAC,cAAc,EAAE,OAAO,CAAC,GAC1C,eAAe,CAAC;IACpB,SAAS,EAAE,CAGT,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,MAAM,aAAa,CAAC,GAAG,IAAI,EACzE,YAAY,CAAC,EAAE,YAAY,KACxB,IAAI,CAAC;CACX,CAAC;AAEF,wBAAgB,0BAA0B,CACxC,cAAc,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,EAC3D,OAAO,EACP,aAAa,SAAS,MAAM,EAE5B,aAAa,EAAE,aAAa,CAC1B,cAAc,EACd,OAAO,EACP,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,MAAM,aAAa,CAAC,CAC7D,GACA,gCAAgC,CAAC,cAAc,EAAE,OAAO,EAAE,aAAa,CAAC,CAc1E"}

package/dist/loadable-hooks/useImperativeLoadableField.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImperativeLoadableField = void 0;
+exports.useImperativeLoadableField = useImperativeLoadableField;
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
 function useImperativeLoadableField(loadableField) {
     const { state, setState } = (0, react_disposable_state_1.useUpdatableDisposableState)();
     return {
-        loadField: (args) => {
-            const [_id, loader] = loadableField(args);
+        loadField: (args, fetchOptions) => {
+            const [_id, loader] = loadableField(args, fetchOptions !== null && fetchOptions !== void 0 ? fetchOptions : {});
             setState(loader());
         },
         fragmentReference: state,
     };
 }
-exports.useImperativeLoadableField = useImperativeLoadableField;

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

@@ -1,33 +1,27 @@
 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> = {
+import { FetchOptions } from '../core/check';
+type UseSkipLimitReturnValue<TReadFromStore extends {
+    data: object;
+    parameters: object;
+}, TItem> = {
     readonly kind: 'Complete';
-    readonly fetchMore: (args: OmitSkipLimit<TArgs>, count: number) => void;
+    readonly fetchMore: (count: number, fetchOptions?: FetchOptions) => void;
     readonly results: ReadonlyArray<TItem>;
 } | {
     readonly kind: 'Pending';
     readonly results: ReadonlyArray<TItem>;
-    readonly pendingFragment: FragmentReference<any, ReadonlyArray<TItem>>;
+    readonly pendingFragment: FragmentReference<TReadFromStore, 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.
- *
- * NOTE: this hook does not subscribe to changes. This is a known
- * issue. If you are running into this issue, reach out on GitHub/
- * Twitter, and we'll fix the issue.
- */
-export declare function useSkipLimitPagination<TArgs extends {
-    skip: number | void | null;
-    limit: number | void | null;
-}, TItem>(loadableField: LoadableField<TArgs, Array<TItem>>): UseSkipLimitReturnValue<TArgs, TItem>;
+type UseSkipLimitPaginationArgs = {
+    skip: number;
+    limit: number;
+};
+export declare function useSkipLimitPagination<TItem, TReadFromStore extends {
+    parameters: object;
+    data: object;
+}>(loadableField: LoadableField<TReadFromStore, ReadonlyArray<TItem>, UseSkipLimitPaginationArgs>, initialState?: {
+    skip?: number | void | null;
+}): UseSkipLimitReturnValue<TReadFromStore, TItem>;
 export {};
+//# sourceMappingURL=useSkipLimitPagination.d.ts.map

package/dist/loadable-hooks/useSkipLimitPagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSkipLimitPagination.d.ts","sourceRoot":"","sources":["../../src/loadable-hooks/useSkipLimitPagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,gBAAgB,CAAC;AAG/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAgB9D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,KAAK,uBAAuB,CAC1B,cAAc,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,EAC3D,KAAK,IAEH;IACE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CACxC,GACD;IACE,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IACvC,QAAQ,CAAC,eAAe,EAAE,iBAAiB,CACzC,cAAc,EACd,aAAa,CAAC,KAAK,CAAC,CACrB,CAAC;CACH,CAAC;AA6BN,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,KAAK,EACL,cAAc,SAAS;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,EAED,aAAa,EAAE,aAAa,CAC1B,cAAc,EACd,aAAa,CAAC,KAAK,CAAC,EACpB,0BAA0B,CAC3B,EACD,YAAY,CAAC,EAAE;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAC7B,GACA,uBAAuB,CAAC,cAAc,EAAE,KAAK,CAAC,CA+NhD"}

package/dist/loadable-hooks/useSkipLimitPagination.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSkipLimitPagination = void 0;
+exports.useSkipLimitPagination = useSkipLimitPagination;
 const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
 const useResult_1 = require("../react/useResult");
 const read_1 = require("../core/read");
+const cache_1 = require("../core/cache");
+const react_1 = require("react");
 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");
+const useReadAndSubscribe_1 = require("../react/useReadAndSubscribe");
 function flatten(arr) {
     let outArray = [];
     for (const subarr of arr) {
@@ -16,54 +19,66 @@ function flatten(arr) {
     }
     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.
- *
- * NOTE: this hook does not subscribe to changes. This is a known
- * issue. If you are running into this issue, reach out on GitHub/
- * Twitter, and we'll fix the issue.
- */
-function useSkipLimitPagination(loadableField) {
+function useSkipLimitPagination(loadableField, initialState) {
+    var _a;
     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) {
-        // 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 results = completedReferences.map((fragmentReference, i) => {
+            var _a;
             const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
-            return readerWithRefetchQueries.readerArtifact.resolver(data.item, undefined);
+            // invariant: readOutDataAndRecords.length === completedReferences.length
+            const data = (_a = readOutDataAndRecords[i]) === null || _a === void 0 ? void 0 : _a.item;
+            if (data == null) {
+                throw new Error('Parameter data is unexpectedly null. This is indicative of a bug in Isograph.');
+            }
+            const firstParameter = {
+                data,
+                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);
         return items;
     }
-    const getFetchMore = (loadedSoFar) => (args, count) => {
-        // @ts-expect-error
-        const loadedField = loadableField(Object.assign(Object.assign({}, args), { skip: loadedSoFar, limit: count }))[1]();
+    function subscribeCompletedFragmentReferences(completedReferences) {
+        return completedReferences.map((fragmentReference, i) => {
+            (0, useResult_1.maybeUnwrapNetworkRequest)(fragmentReference.networkRequest, networkRequestOptions);
+            const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
+            const records = readOutDataAndRecords[i];
+            if (records == null) {
+                throw new Error('subscribeCompletedFragmentReferences records is unexpectedly null');
+            }
+            return {
+                fragmentReference,
+                readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+                records,
+                callback(_data) {
+                    rerender({});
+                },
+            };
+        });
+    }
+    const getFetchMore = (loadedSoFar) => (count, fetchOptions) => {
+        const loadedField = loadableField({
+            skip: loadedSoFar,
+            limit: count,
+        }, fetchOptions !== null && fetchOptions !== void 0 ? fetchOptions : {})[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.');
+            This is indicative of a bug in useSkipLimitPagination.');
             }
             return clonedRefCountedPointer;
         });
@@ -78,24 +93,42 @@ function useSkipLimitPagination(loadableField) {
         ];
         setState(totalItemCleanupPair);
     };
+    const [, rerender] = (0, react_1.useState)({});
     const loadedReferences = state === react_disposable_state_1.UNASSIGNED_STATE ? [] : state;
-    if (loadedReferences.length === 0) {
+    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(0),
+            fetchMore: getFetchMore((_a = initialState === null || initialState === void 0 ? void 0 : initialState.skip) !== null && _a !== void 0 ? _a : 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);
+            const unsubscribe = (0, cache_1.subscribeToAnyChange)(environment, () => {
+                unsubscribe();
+                rerender({});
+            });
             return {
                 kind: 'Pending',
                 pendingFragment: mostRecentFragmentReference,
@@ -106,7 +139,7 @@ function useSkipLimitPagination(loadableField) {
             throw networkRequestStatus.error;
         }
         case 'Ok': {
-            const results = readCompletedFragmentReferences(loadedReferences);
+            const results = readCompletedFragmentReferences(completedFragmentReferences);
             return {
                 kind: 'Complete',
                 results,
@@ -115,4 +148,15 @@ function useSkipLimitPagination(loadableField) {
         }
     }
 }
-exports.useSkipLimitPagination = useSkipLimitPagination;
+// @ts-ignore
+function tsTests() {
+    let basicLoadable;
+    useSkipLimitPagination(basicLoadable);
+    useSkipLimitPagination(basicLoadable, {});
+    useSkipLimitPagination(basicLoadable, { skip: 10 });
+    let unprovidedSearchLoadable;
+    // @ts-expect-error
+    useSkipLimitPagination(unprovidedSearchLoadable);
+    let providedSearchLoadable;
+    useSkipLimitPagination(providedSearchLoadable);
+}

package/dist/react/FragmentReader.d.ts

@@ -2,12 +2,15 @@ import * as React from 'react';
 import { ExtractReadFromStore, IsographEntrypoint } from '../core/entrypoint';
 import { FragmentReference } from '../core/FragmentReference';
 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;
+type IsExactlyIntrinsicAttributes<T> = T extends JSX.IntrinsicAttributes ? JSX.IntrinsicAttributes extends T ? true : false : false;
+export declare function FragmentReader<TProps extends Record<any, any>, TEntrypoint extends IsographEntrypoint<any, React.FC<TProps>>>(props: IsExactlyIntrinsicAttributes<TProps> extends true ? {
+    fragmentReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, React.FC<TProps>>;
+    additionalProps?: Record<PropertyKey, never>;
     networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
 } : {
     fragmentReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, React.FC<TProps>>;
-    additionalProps: TProps;
+    additionalProps: Omit<TProps, keyof JSX.IntrinsicAttributes>;
     networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
 }): React.ReactNode;
+export {};
+//# sourceMappingURL=FragmentReader.d.ts.map

package/dist/react/FragmentReader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FragmentReader.d.ts","sourceRoot":"","sources":["../../src/react/FragmentReader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAE3D,KAAK,4BAA4B,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,mBAAmB,GACpE,GAAG,CAAC,mBAAmB,SAAS,CAAC,GAC/B,IAAI,GACJ,KAAK,GACP,KAAK,CAAC;AAEV,wBAAgB,cAAc,CAC5B,MAAM,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,EAC/B,WAAW,SAAS,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAE7D,KAAK,EAAE,4BAA4B,CAAC,MAAM,CAAC,SAAS,IAAI,GACpD;IACE,iBAAiB,EAAE,iBAAiB,CAClC,oBAAoB,CAAC,WAAW,CAAC,EACjC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,CACjB,CAAC;IACF,eAAe,CAAC,EAAE,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC9D,GACD;IACE,iBAAiB,EAAE,iBAAiB,CAClC,oBAAoB,CAAC,WAAW,CAAC,EACjC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,CACjB,CAAC;IACF,eAAe,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC7D,qBAAqB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC9D,GACJ,KAAK,CAAC,SAAS,CASjB"}

package/dist/react/FragmentReader.js

@@ -23,11 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FragmentReader = void 0;
+exports.FragmentReader = FragmentReader;
 const React = __importStar(require("react"));
 const useResult_1 = require("./useResult");
 function FragmentReader(props) {
     const Component = (0, useResult_1.useResult)(props.fragmentReference, props.networkRequestOptions);
+    // TypeScript is not understanding that if additionalProps is Record<PropertyKey, never>,
+    // it means that TProps === JSX.IntrinsicAttributes.
+    // @ts-expect-error
     return React.createElement(Component, Object.assign({}, props.additionalProps));
 }
-exports.FragmentReader = FragmentReader;

package/dist/react/IsographEnvironmentProvider.d.ts

@@ -8,3 +8,4 @@ export type IsographEnvironmentProviderProps = {
 };
 export declare function IsographEnvironmentProvider({ environment, children, }: IsographEnvironmentProviderProps): React.ReactElement;
 export declare function useIsographEnvironment(): IsographEnvironment;
+//# sourceMappingURL=IsographEnvironmentProvider.d.ts.map

package/dist/react/IsographEnvironmentProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IsographEnvironmentProvider.d.ts","sourceRoot":"","sources":["../../src/react/IsographEnvironmentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,eAAO,MAAM,0BAA0B,2CACU,CAAC;AAElD,MAAM,MAAM,gCAAgC,GAAG;IAC7C,QAAQ,CAAC,WAAW,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAC1C,WAAW,EACX,QAAQ,GACT,EAAE,gCAAgC,GAAG,KAAK,CAAC,YAAY,CAMvD;AAED,wBAAgB,sBAAsB,IAAI,mBAAmB,CAS5D"}

package/dist/react/IsographEnvironmentProvider.js

@@ -23,14 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.IsographEnvironmentContext = void 0;
+exports.IsographEnvironmentContext = void 0;
+exports.IsographEnvironmentProvider = IsographEnvironmentProvider;
+exports.useIsographEnvironment = useIsographEnvironment;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 exports.IsographEnvironmentContext = (0, react_1.createContext)(null);
 function IsographEnvironmentProvider({ environment, children, }) {
     return (React.createElement(exports.IsographEnvironmentContext.Provider, { value: environment }, children));
 }
-exports.IsographEnvironmentProvider = IsographEnvironmentProvider;
 function useIsographEnvironment() {
     const context = (0, react_1.useContext)(exports.IsographEnvironmentContext);
     if (context == null) {
@@ -39,4 +40,3 @@ function useIsographEnvironment() {
     }
     return context;
 }
-exports.useIsographEnvironment = useIsographEnvironment;

package/dist/react/RenderAfterCommit__DO_NOT_USE.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This is a function that will render a component only after it commits.
+ * It should not be used in production. It's useful as a way to debug issues
+ * with NextJS, where an indefinite suspense causes the server to hang
+ * forever and never complete the original request.
+ */
+export declare function RenderAfterCommit__DO_NOT_USE({ children, }: {
+    children: React.ReactNode;
+}): import("react").ReactNode;
+//# sourceMappingURL=RenderAfterCommit__DO_NOT_USE.d.ts.map

package/dist/react/RenderAfterCommit__DO_NOT_USE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderAfterCommit__DO_NOT_USE.d.ts","sourceRoot":"","sources":["../../src/react/RenderAfterCommit__DO_NOT_USE.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,6BAIA"}

package/dist/react/RenderAfterCommit__DO_NOT_USE.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderAfterCommit__DO_NOT_USE = RenderAfterCommit__DO_NOT_USE;
+const react_1 = require("react");
+/**
+ * This is a function that will render a component only after it commits.
+ * It should not be used in production. It's useful as a way to debug issues
+ * with NextJS, where an indefinite suspense causes the server to hang
+ * forever and never complete the original request.
+ */
+function RenderAfterCommit__DO_NOT_USE({ children, }) {
+    const [show, setShow] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setShow(true), []);
+    return show ? children : null;
+}

package/dist/react/useImperativeReference.d.ts

@@ -1,7 +1,12 @@
 import { UnassignedState } from '@isograph/react-disposable-state';
 import { IsographEntrypoint } from '../core/entrypoint';
-import { FragmentReference, Variables } from '../core/FragmentReference';
-export declare function useImperativeReference<TReadFromStore extends Object, TClientFieldValue>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>): {
+import { FragmentReference, ExtractParameters } from '../core/FragmentReference';
+import { FetchOptions } from '../core/check';
+export declare function useImperativeReference<TReadFromStore extends {
+    parameters: object;
+    data: object;
+}, TClientFieldValue>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>): {
     fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue> | UnassignedState;
-    loadFragmentReference: (variables: Variables) => void;
+    loadFragmentReference: (variables: ExtractParameters<TReadFromStore>, fetchOptions?: FetchOptions) => void;
 };
+//# sourceMappingURL=useImperativeReference.d.ts.map

package/dist/react/useImperativeReference.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImperativeReference.d.ts","sourceRoot":"","sources":["../../src/react/useImperativeReference.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEhB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAKnC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,wBAAgB,sBAAsB,CACpC,cAAc,SAAS;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC3D,iBAAiB,EAEjB,UAAU,EAAE,kBAAkB,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAChE;IACD,iBAAiB,EACb,iBAAiB,CAAC,cAAc,EAAE,iBAAiB,CAAC,GACpD,eAAe,CAAC;IACpB,qBAAqB,EAAE,CACrB,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAAC,EAC5C,YAAY,CAAC,EAAE,YAAY,KACxB,IAAI,CAAC;CACX,CAqCA"}