@isograph/react 0.2.0 → 0.3.1

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

@@ -1,33 +1,20 @@
+import { FetchOptions } from '../core/check';
+import { FragmentReference, type UnknownTReadFromStore } from '../core/FragmentReference';
 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> = {
+export type UseSkipLimitReturnValue<TReadFromStore extends UnknownTReadFromStore, TItem> = {
     readonly kind: 'Complete';
-    readonly fetchMore: (args: OmitSkipLimit<TArgs>, count: number) => void;
+    readonly fetchMore: (count: number, fetchOptions?: FetchOptions<ReadonlyArray<TItem>>) => 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>;
-export {};
+export type UseSkipLimitPaginationArgs = {
+    skip: number;
+    limit: number;
+};
+export declare function useSkipLimitPagination<TItem, TReadFromStore extends UnknownTReadFromStore>(loadableField: LoadableField<TReadFromStore, ReadonlyArray<TItem>, UseSkipLimitPaginationArgs>, initialState?: {
+    skip?: number | void | null;
+}): UseSkipLimitReturnValue<TReadFromStore, TItem>;
+//# 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":"AAWA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC3B,MAAM,2BAA2B,CAAC;AAMnC,OAAO,EAAE,aAAa,EAAkB,MAAM,gBAAgB,CAAC;AAM/D,MAAM,MAAM,uBAAuB,CACjC,cAAc,SAAS,qBAAqB,EAC5C,KAAK,IAEH;IACE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,CAClB,KAAK,EAAE,MAAM,EACb,YAAY,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAC9C,IAAI,CAAC;IACV,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,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,KAAK,EACL,cAAc,SAAS,qBAAqB,EAE5C,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,CA2OhD"}

package/dist/loadable-hooks/useSkipLimitPagination.js

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSkipLimitPagination = void 0;
-const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
-const useResult_1 = require("../react/useResult");
-const read_1 = require("../core/read");
+exports.useSkipLimitPagination = useSkipLimitPagination;
 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 startUpdate_1 = require("../core/startUpdate");
+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) {
@@ -16,54 +20,67 @@ 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 = Object.assign({ data, parameters: fragmentReference.variables }, (readerWithRefetchQueries.readerArtifact.hasUpdatable
+                ? {
+                    startUpdate: (0, startUpdate_1.getOrCreateCachedStartUpdate)(environment, fragmentReference, readerWithRefetchQueries.readerArtifact.kind),
+                }
+                : undefined));
+            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 +95,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 +141,7 @@ function useSkipLimitPagination(loadableField) {
             throw networkRequestStatus.error;
         }
         case 'Ok': {
-            const results = readCompletedFragmentReferences(loadedReferences);
+            const results = readCompletedFragmentReferences(completedFragmentReferences);
             return {
                 kind: 'Complete',
                 results,
@@ -115,4 +150,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,14 @@ 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;
+export 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>, any>>(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;
+//# 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;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAG3D,MAAM,MAAM,4BAA4B,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,mBAAmB,GAC3E,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,EAAE,GAAG,CAAC,EAElE,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,EAAiB,SAAS,EAAc,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,9 @@
-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>): {
-    fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue> | UnassignedState;
-    loadFragmentReference: (variables: Variables) => void;
+import { FetchOptions, type RequiredFetchOptions } from '../core/check';
+import { IsographEntrypoint, type NormalizationAst, type NormalizationAstLoader } from '../core/entrypoint';
+import { ExtractParameters, FragmentReference, type UnknownTReadFromStore } from '../core/FragmentReference';
+export type UseImperativeReferenceResult<TReadFromStore extends UnknownTReadFromStore, TClientFieldValue, TNormalizationAst extends NormalizationAst | NormalizationAstLoader> = {
+    fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue> | null;
+    loadFragmentReference: (variables: ExtractParameters<TReadFromStore>, ...[fetchOptions]: NormalizationAstLoader extends TNormalizationAst ? [fetchOptions: RequiredFetchOptions<TClientFieldValue>] : [fetchOptions?: FetchOptions<TClientFieldValue>]) => void;
 };
+export declare function useImperativeReference<TReadFromStore extends UnknownTReadFromStore, TClientFieldValue, TNormalizationAst extends NormalizationAst | NormalizationAstLoader>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>): UseImperativeReferenceResult<TReadFromStore, TClientFieldValue, TNormalizationAst>;
+//# 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":"AAIA,OAAO,EAAE,YAAY,EAAE,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EACL,kBAAkB,EAClB,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,qBAAqB,EAC3B,MAAM,2BAA2B,CAAC;AAMnC,MAAM,MAAM,4BAA4B,CACtC,cAAc,SAAS,qBAAqB,EAC5C,iBAAiB,EACjB,iBAAiB,SAAS,gBAAgB,GAAG,sBAAsB,IACjE;IACF,iBAAiB,EAAE,iBAAiB,CAClC,cAAc,EACd,iBAAiB,CAClB,GAAG,IAAI,CAAC;IACT,qBAAqB,EAAE,CACrB,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAAC,EAC5C,GAAG,CAAC,YAAY,CAAC,EAAE,sBAAsB,SAAS,iBAAiB,GAC/D,CAAC,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GACvD,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC,KACjD,IAAI,CAAC;CACX,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,cAAc,SAAS,qBAAqB,EAC5C,iBAAiB,EACjB,iBAAiB,SAAS,gBAAgB,GAAG,sBAAsB,EAEnE,UAAU,EAAE,kBAAkB,CAC5B,cAAc,EACd,iBAAiB,EACjB,iBAAiB,CAClB,GACA,4BAA4B,CAC7B,cAAc,EACd,iBAAiB,EACjB,iBAAiB,CAClB,CAqCA"}

package/dist/react/useImperativeReference.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImperativeReference = void 0;
+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
+const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
 function useImperativeReference(entrypoint) {
     const { state, setState } = (0, react_disposable_state_1.useUpdatableDisposableState)();
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
     return {
-        fragmentReference: state,
-        loadFragmentReference: (variables) => {
-            const [networkRequest, disposeNetworkRequest] = (0, makeNetworkRequest_1.makeNetworkRequest)(environment, entrypoint, variables);
+        fragmentReference: state !== react_disposable_state_1.UNASSIGNED_STATE ? state : null,
+        loadFragmentReference: (variables, fetchOptions) => {
+            const [networkRequest, disposeNetworkRequest] = (0, makeNetworkRequest_1.maybeMakeNetworkRequest)(environment, entrypoint, variables, fetchOptions);
             setState([
                 {
                     kind: 'FragmentReference',
@@ -22,7 +21,7 @@ function useImperativeReference(entrypoint) {
                         readerArtifact: entrypoint.readerWithRefetchQueries.readerArtifact,
                         nestedRefetchQueries: entrypoint.readerWithRefetchQueries.nestedRefetchQueries,
                     }),
-                    root: IsographEnvironment_1.ROOT_ID,
+                    root: { __link: IsographEnvironment_1.ROOT_ID, __typename: entrypoint.concreteType },
                     variables,
                     networkRequest,
                 },
@@ -33,4 +32,3 @@ function useImperativeReference(entrypoint) {
         },
     };
 }
-exports.useImperativeReference = useImperativeReference;

package/dist/react/useLazyReference.d.ts

@@ -1,5 +1,7 @@
-import { FragmentReference, Variables } from '../core/FragmentReference';
-import { IsographEntrypoint } from '../core/entrypoint';
-export declare function useLazyReference<TReadFromStore extends Object, TClientFieldValue>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>, variables: Variables): {
+import { FetchOptions, type RequiredFetchOptions } from '../core/check';
+import { IsographEntrypoint, type NormalizationAst, type NormalizationAstLoader } from '../core/entrypoint';
+import { ExtractParameters, FragmentReference, type UnknownTReadFromStore } from '../core/FragmentReference';
+export declare function useLazyReference<TReadFromStore extends UnknownTReadFromStore, TClientFieldValue, TNormalizationAst extends NormalizationAst | NormalizationAstLoader>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>, variables: ExtractParameters<TReadFromStore>, ...[fetchOptions]: TNormalizationAst extends NormalizationAstLoader ? [fetchOptions: RequiredFetchOptions<TClientFieldValue>] : [fetchOptions?: FetchOptions<TClientFieldValue>]): NormalizationAst | NormalizationAstLoader extends TNormalizationAst ? unknown : {
     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":"AAEA,OAAO,EAAE,YAAY,EAAE,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EACL,kBAAkB,EAClB,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,qBAAqB,EAC3B,MAAM,2BAA2B,CAAC;AAInC,wBAAgB,gBAAgB,CAC9B,cAAc,SAAS,qBAAqB,EAC5C,iBAAiB,EACjB,iBAAiB,SAAS,gBAAgB,GAAG,sBAAsB,EAEnE,UAAU,EAAE,kBAAkB,CAC5B,cAAc,EACd,iBAAiB,EACjB,iBAAiB,CAClB,EACD,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAAC,EAC5C,GAAG,CAAC,YAAY,CAAC,EAAE,iBAAiB,SAAS,sBAAsB,GAC/D,CAAC,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GACvD,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC,GACnD,gBAAgB,GAAG,sBAAsB,SAAS,iBAAiB,GAClE,OAAO,GACP;IACE,iBAAiB,EAAE,iBAAiB,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;CACzE,CAqBJ"}

package/dist/react/useLazyReference.js

@@ -1,14 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLazyReference = void 0;
-const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
-const cache_1 = require("../core/cache");
+exports.useLazyReference = useLazyReference;
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
-function useLazyReference(entrypoint, variables) {
+const cache_1 = require("../core/cache");
+const logging_1 = require("../core/logging");
+const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
+function useLazyReference(entrypoint, variables, ...[fetchOptions]) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
-    const cache = (0, cache_1.getOrCreateCacheForArtifact)(environment, entrypoint, variables);
+    if ((entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.kind) !== 'Entrypoint') {
+        // TODO have a separate error logger
+        (0, logging_1.logMessage)(environment, () => ({
+            kind: 'NonEntrypointReceived',
+            entrypoint,
+        }));
+    }
+    const cache = (0, cache_1.getOrCreateCacheForArtifact)(environment, entrypoint, variables, fetchOptions);
     return {
         fragmentReference: (0, react_disposable_state_1.useLazyDisposableState)(cache).state,
     };
 }
-exports.useLazyReference = useLazyReference;
+// @ts-ignore
+function tsTests() {
+    let withAst;
+    let withAstLoader;
+    let withAstOrLoader;
+    useLazyReference(withAst, {});
+    useLazyReference(withAst, {}, { shouldFetch: 'Yes' });
+    useLazyReference(withAst, {}, { shouldFetch: 'IfNecessary' });
+    // @ts-expect-error if there's no ast, require `shouldFetch` to be specified
+    useLazyReference(withAstLoader, {});
+    useLazyReference(withAstLoader, {}, { shouldFetch: 'Yes' });
+    // @ts-expect-error if there's no ast, `shouldFetch` can't be `IfNecessary`
+    useLazyReference(withAstLoader, {}, { shouldFetch: 'IfNecessary' });
+    // if the type is unknown there can be no ast so we should use the same rules
+    // but because of TS bugs with inference we just return unknown
+    // @ts-expect-error this returns unknown which doesn't satisfy the constraint
+    useLazyReference(withAstOrLoader, {});
+    // @ts-expect-error this returns unknown which doesn't satisfy the constraint
+    useLazyReference(withAstOrLoader, {}, { shouldFetch: 'Yes' });
+    useLazyReference(withAstOrLoader, {}, { shouldFetch: 'IfNecessary' });
+}

package/dist/react/useReadAndSubscribe.d.ts

@@ -1,11 +1,14 @@
-import { FragmentReference } from '../core/FragmentReference';
+import { ExtractData, FragmentReference, type UnknownTReadFromStore } from '../core/FragmentReference';
 import { NetworkRequestReaderOptions, WithEncounteredRecords } from '../core/read';
+import type { ReaderAst } from '../core/reader';
 /**
  * Read the data from a fragment reference and subscribe to updates.
  */
-export declare function useReadAndSubscribe<TReadFromStore extends Object>(fragmentReference: FragmentReference<TReadFromStore, any>, networkRequestOptions: NetworkRequestReaderOptions): TReadFromStore;
-export declare function useSubscribeToMultiple<TReadFromStore extends Object>(items: ReadonlyArray<{
+export declare function useReadAndSubscribe<TReadFromStore extends UnknownTReadFromStore>(fragmentReference: FragmentReference<TReadFromStore, any>, networkRequestOptions: NetworkRequestReaderOptions, readerAst: ReaderAst<TReadFromStore>): ExtractData<TReadFromStore>;
+export declare function useSubscribeToMultiple<TReadFromStore extends UnknownTReadFromStore>(items: ReadonlyArray<{
     records: WithEncounteredRecords<TReadFromStore>;
     callback: (updatedRecords: WithEncounteredRecords<TReadFromStore>) => void;
     fragmentReference: FragmentReference<TReadFromStore, any>;
+    readerAst: ReaderAst<TReadFromStore>;
 }>): void;
+//# sourceMappingURL=useReadAndSubscribe.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useReadAndSubscribe.d.ts","sourceRoot":"","sources":["../../src/react/useReadAndSubscribe.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EACX,iBAAiB,EAEjB,KAAK,qBAAqB,EAC3B,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,2BAA2B,EAE3B,sBAAsB,EACvB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,cAAc,SAAS,qBAAqB,EAE5C,iBAAiB,EAAE,iBAAiB,CAAC,cAAc,EAAE,GAAG,CAAC,EACzD,qBAAqB,EAAE,2BAA2B,EAClD,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,GACnC,WAAW,CAAC,cAAc,CAAC,CAY7B;AAED,wBAAgB,sBAAsB,CACpC,cAAc,SAAS,qBAAqB,EAE5C,KAAK,EAAE,aAAa,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC,cAAc,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,cAAc,EAAE,sBAAsB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,EAAE,iBAAiB,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;IAC1D,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACtC,CAAC,QAuCH"}

package/dist/react/useReadAndSubscribe.js

@@ -1,27 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSubscribeToMultiple = exports.useReadAndSubscribe = void 0;
+exports.useReadAndSubscribe = useReadAndSubscribe;
+exports.useSubscribeToMultiple = useSubscribeToMultiple;
 const react_1 = require("react");
+const cache_1 = require("../core/cache");
 const FragmentReference_1 = require("../core/FragmentReference");
+const PromiseWrapper_1 = require("../core/PromiseWrapper");
 const read_1 = require("../core/read");
-const useRerenderOnChange_1 = require("./useRerenderOnChange");
 const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
-const cache_1 = require("../core/cache");
+const useRerenderOnChange_1 = require("./useRerenderOnChange");
 /**
  * Read the data from a fragment reference and subscribe to updates.
  */
-function useReadAndSubscribe(fragmentReference, networkRequestOptions) {
+function useReadAndSubscribe(fragmentReference, networkRequestOptions, readerAst) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
     const [readOutDataAndRecords, setReadOutDataAndRecords] = (0, react_1.useState)(() => (0, read_1.readButDoNotEvaluate)(environment, fragmentReference, networkRequestOptions));
-    (0, useRerenderOnChange_1.useRerenderOnChange)(readOutDataAndRecords, fragmentReference, setReadOutDataAndRecords);
+    (0, useRerenderOnChange_1.useRerenderOnChange)(readOutDataAndRecords, fragmentReference, setReadOutDataAndRecords, readerAst);
     return readOutDataAndRecords.item;
 }
-exports.useReadAndSubscribe = useReadAndSubscribe;
 function useSubscribeToMultiple(items) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
     (0, react_1.useEffect)(() => {
-        const cleanupFns = items.map(({ records, callback, fragmentReference }) => {
-            return (0, cache_1.subscribe)(environment, records, fragmentReference, callback);
+        const cleanupFns = items.map(({ records, callback, fragmentReference, readerAst }) => {
+            return (0, cache_1.subscribe)(environment, records, fragmentReference, callback, readerAst);
         });
         return () => {
             cleanupFns.forEach((loader) => {
@@ -34,8 +35,10 @@ function useSubscribeToMultiple(items) {
     // TODO find out
     [
         items
-            .map(({ fragmentReference }) => (0, FragmentReference_1.stableIdForFragmentReference)(fragmentReference))
+            .map(({ fragmentReference }) => {
+            const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
+            (0, FragmentReference_1.stableIdForFragmentReference)(fragmentReference, readerWithRefetchQueries.readerArtifact.fieldName);
+        })
             .join('.'),
     ]);
 }
-exports.useSubscribeToMultiple = useSubscribeToMultiple;

package/dist/react/useRerenderOnChange.d.ts

@@ -1,3 +1,8 @@
-import { WithEncounteredRecords } from '../core/read';
 import { FragmentReference } from '../core/FragmentReference';
-export declare function useRerenderOnChange<TReadFromStore extends Object>(encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>, fragmentReference: FragmentReference<any, any>, setEncounteredDataAndRecords: (data: WithEncounteredRecords<TReadFromStore>) => void): void;
+import { WithEncounteredRecords } from '../core/read';
+import type { ReaderAst } from '../core/reader';
+export declare function useRerenderOnChange<TReadFromStore extends {
+    parameters: object;
+    data: object;
+}>(encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>, fragmentReference: FragmentReference<any, any>, setEncounteredDataAndRecords: (data: WithEncounteredRecords<TReadFromStore>) => void, readerAst: ReaderAst<TReadFromStore>): void;
+//# sourceMappingURL=useRerenderOnChange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRerenderOnChange.d.ts","sourceRoot":"","sources":["../../src/react/useRerenderOnChange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAKhD,wBAAgB,mBAAmB,CACjC,cAAc,SAAS;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAE3D,yBAAyB,EAAE,sBAAsB,CAAC,cAAc,CAAC,EACjE,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,EAAE,GAAG,CAAC,EAC9C,4BAA4B,EAAE,CAC5B,IAAI,EAAE,sBAAsB,CAAC,cAAc,CAAC,KACzC,IAAI,EACT,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,QAoBrC"}

package/dist/react/useRerenderOnChange.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRerenderOnChange = void 0;
+exports.useRerenderOnChange = useRerenderOnChange;
 const react_1 = require("react");
 const cache_1 = require("../core/cache");
 const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
 // TODO add unit tests for this. Add integration tests that test
 // behavior when the encounteredRecords underneath a fragment change.
-function useRerenderOnChange(encounteredDataAndRecords, fragmentReference, setEncounteredDataAndRecords) {
+function useRerenderOnChange(encounteredDataAndRecords, fragmentReference, setEncounteredDataAndRecords, readerAst) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
     (0, react_1.useEffect)(() => {
         return (0, cache_1.subscribe)(environment, encounteredDataAndRecords, fragmentReference, (newEncounteredDataAndRecords) => {
             setEncounteredDataAndRecords(newEncounteredDataAndRecords);
-        });
+        }, readerAst);
         // Note: this is an empty array on purpose:
         // - the fragment reference is stable for the life of the component
         // - ownership of encounteredDataAndRecords is transferred into the
@@ -20,4 +20,3 @@ function useRerenderOnChange(encounteredDataAndRecords, fragmentReference, setEn
         //   the dependency array
     }, []);
 }
-exports.useRerenderOnChange = useRerenderOnChange;

package/dist/react/useResult.d.ts

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