@isograph/react 0.1.1 → 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

@@ -0,0 +1,6 @@
+type UseImperativeLoadableFieldReturn<TArgs> = {
+    loadField: (args: TArgs) => void;
+};
+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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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.
+function useImperativeExposedMutationField(exposedField) {
+    return {
+        loadField: (args) => {
+            const [_id, loader] = exposedField(args);
+            loader();
+        },
+    };
+}

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

@@ -0,0 +1,17 @@
+import { ExtractParameters, FragmentReference } from '../core/FragmentReference';
+import { UnassignedState } from '@isograph/react-disposable-state';
+import { LoadableField } from '../core/reader';
+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<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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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, fetchOptions) => {
+            const [_id, loader] = loadableField(args, fetchOptions !== null && fetchOptions !== void 0 ? fetchOptions : {});
+            setState(loader());
+        },
+        fragmentReference: state,
+    };
+}

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

@@ -0,0 +1,27 @@
+import { LoadableField } from '../core/reader';
+import { FragmentReference } from '../core/FragmentReference';
+import { FetchOptions } from '../core/check';
+type UseSkipLimitReturnValue<TReadFromStore extends {
+    data: object;
+    parameters: object;
+}, TItem> = {
+    readonly kind: 'Complete';
+    readonly fetchMore: (count: number, fetchOptions?: FetchOptions) => void;
+    readonly results: ReadonlyArray<TItem>;
+} | {
+    readonly kind: 'Pending';
+    readonly results: ReadonlyArray<TItem>;
+    readonly pendingFragment: FragmentReference<TReadFromStore, ReadonlyArray<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

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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) {
+        for (const item of subarr) {
+            outArray.push(item);
+        }
+    }
+    return outArray;
+}
+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) {
+        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);
+        return items;
+    }
+    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.');
+            }
+            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.skip) !== null && _a !== void 0 ? _a : 0),
+            results: [],
+        };
+    }
+    switch (networkRequestStatus.kind) {
+        case 'Pending': {
+            const unsubscribe = (0, cache_1.subscribeToAnyChange)(environment, () => {
+                unsubscribe();
+                rerender({});
+            });
+            return {
+                kind: 'Pending',
+                pendingFragment: mostRecentFragmentReference,
+                results: readCompletedFragmentReferences(completedFragmentReferences),
+            };
+        }
+        case 'Err': {
+            throw networkRequestStatus.error;
+        }
+        case 'Ok': {
+            const results = readCompletedFragmentReferences(completedFragmentReferences);
+            return {
+                kind: 'Complete',
+                results,
+                fetchMore: getFetchMore(results.length),
+            };
+        }
+    }
+}
+// @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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ExtractReadFromStore, IsographEntrypoint } from '../core/entrypoint';
+import { FragmentReference } from '../core/FragmentReference';
+import { NetworkRequestReaderOptions } from '../core/read';
+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: 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/{EntrypointReader.js → react/FragmentReader.js}

@@ -23,11 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntrypointReader = void 0;
+exports.FragmentReader = FragmentReader;
 const React = __importStar(require("react"));
-const index_1 = require("./index");
-function EntrypointReader(props) {
-    const Component = (0, index_1.useResult)(props.queryReference);
+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.EntrypointReader = EntrypointReader;

package/dist/react/IsographEnvironmentProvider.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { type IsographEnvironment } from '../core/IsographEnvironment';
+export declare const IsographEnvironmentContext: React.Context<IsographEnvironment | null>;
+export type IsographEnvironmentProviderProps = {
+    readonly environment: IsographEnvironment;
+    readonly children: ReactNode;
+};
+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/{IsographEnvironment.js → react/IsographEnvironmentProvider.js}

@@ -23,15 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createIsographStore = exports.createIsographEnvironment = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.ROOT_ID = exports.IsographEnvironmentContext = void 0;
-const react_1 = require("react");
+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);
-exports.ROOT_ID = '__ROOT';
 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) {
@@ -40,21 +40,3 @@ function useIsographEnvironment() {
     }
     return context;
 }
-exports.useIsographEnvironment = useIsographEnvironment;
-function createIsographEnvironment(store, networkFunction, missingFieldHandler) {
-    return {
-        store,
-        networkFunction,
-        missingFieldHandler: missingFieldHandler !== null && missingFieldHandler !== void 0 ? missingFieldHandler : null,
-        componentCache: {},
-        subscriptions: new Set(),
-        suspenseCache: {},
-    };
-}
-exports.createIsographEnvironment = createIsographEnvironment;
-function createIsographStore() {
-    return {
-        [exports.ROOT_ID]: {},
-    };
-}
-exports.createIsographStore = createIsographStore;

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

@@ -0,0 +1,12 @@
+import { UnassignedState } from '@isograph/react-disposable-state';
+import { IsographEntrypoint } from '../core/entrypoint';
+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: 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"}

package/dist/react/useImperativeReference.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImperativeReference = useImperativeReference;
+const react_disposable_state_1 = require("@isograph/react-disposable-state");
+const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
+const IsographEnvironment_1 = require("../core/IsographEnvironment");
+const makeNetworkRequest_1 = require("../core/makeNetworkRequest");
+const PromiseWrapper_1 = require("../core/PromiseWrapper");
+// TODO rename this to useImperativelyLoadedEntrypoint
+function useImperativeReference(entrypoint) {
+    const { state, setState } = (0, react_disposable_state_1.useUpdatableDisposableState)();
+    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    return {
+        fragmentReference: state,
+        loadFragmentReference: (variables, fetchOptions) => {
+            const [networkRequest, disposeNetworkRequest] = (0, makeNetworkRequest_1.maybeMakeNetworkRequest)(environment, entrypoint, variables, fetchOptions);
+            setState([
+                {
+                    kind: 'FragmentReference',
+                    readerWithRefetchQueries: (0, PromiseWrapper_1.wrapResolvedValue)({
+                        kind: 'ReaderWithRefetchQueries',
+                        readerArtifact: entrypoint.readerWithRefetchQueries.readerArtifact,
+                        nestedRefetchQueries: entrypoint.readerWithRefetchQueries.nestedRefetchQueries,
+                    }),
+                    root: { __link: IsographEnvironment_1.ROOT_ID, __typename: entrypoint.concreteType },
+                    variables,
+                    networkRequest,
+                },
+                () => {
+                    disposeNetworkRequest();
+                },
+            ]);
+        },
+    };
+}

package/dist/react/useLazyReference.d.ts

@@ -0,0 +1,10 @@
+import { FragmentReference, ExtractParameters } from '../core/FragmentReference';
+import { IsographEntrypoint } from '../core/entrypoint';
+import { FetchOptions } from '../core/check';
+export declare function useLazyReference<TReadFromStore extends {
+    parameters: object;
+    data: object;
+}, TClientFieldValue>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>, variables: ExtractParameters<TReadFromStore>, fetchOptions?: FetchOptions): {
+    fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>;
+};
+//# sourceMappingURL=useLazyReference.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLazyReference.d.ts","sourceRoot":"","sources":["../../src/react/useLazyReference.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,wBAAgB,gBAAgB,CAC9B,cAAc,SAAS;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC3D,iBAAiB,EAEjB,UAAU,EAAE,kBAAkB,CAAC,cAAc,EAAE,iBAAiB,CAAC,EACjE,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAAC,EAC5C,YAAY,CAAC,EAAE,YAAY,GAC1B;IACD,iBAAiB,EAAE,iBAAiB,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;CACzE,CAqBA"}