@isograph/react 0.0.0-main-366b2007 → 0.0.0-main-5046aeef

package/dist/core/FragmentReference.d.ts

@@ -5,7 +5,7 @@ export type VariableValue = string | number | boolean | null | object;
 export type Variables = {
     readonly [index: string]: VariableValue;
 };
-export type FragmentReference<TReadFromStore extends Object, TClientFieldValue> = {
+export type FragmentReference<TReadFromStore extends object, TClientFieldValue> = {
     readonly kind: 'FragmentReference';
     readonly readerWithRefetchQueries: PromiseWrapper<ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>>;
     readonly root: DataId;

package/dist/core/IsographEnvironment.d.ts

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

package/dist/core/cache.d.ts

@@ -4,14 +4,14 @@ import { IsographEntrypoint, NormalizationAst, NormalizationLinkedField, Normali
 import { ReaderLinkedField, ReaderScalarField, type ReaderAst } from './reader';
 import { WithEncounteredRecords } from './read';
 import { FragmentReference, Variables } from './FragmentReference';
-export declare function getOrCreateItemInSuspenseCache<TReadFromStore extends Object, TClientFieldValue>(environment: IsographEnvironment, index: string, factory: Factory<FragmentReference<TReadFromStore, TClientFieldValue>>): ParentCache<FragmentReference<TReadFromStore, TClientFieldValue>>;
+export declare function getOrCreateItemInSuspenseCache<TReadFromStore extends object, TClientFieldValue>(environment: IsographEnvironment, index: string, factory: Factory<FragmentReference<TReadFromStore, TClientFieldValue>>): ParentCache<FragmentReference<TReadFromStore, TClientFieldValue>>;
 /**
  * Creates a copy of the provided value, ensuring any nested objects have their
  * keys sorted such that equivalent values would have identical JSON.stringify
  * results.
  */
 export declare function stableCopy<T>(value: T): T;
-export declare function getOrCreateCacheForArtifact<TReadFromStore extends Object, TClientFieldValue>(environment: IsographEnvironment, entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>, variables: Variables): ParentCache<FragmentReference<TReadFromStore, TClientFieldValue>>;
+export declare function getOrCreateCacheForArtifact<TReadFromStore extends object, TClientFieldValue>(environment: IsographEnvironment, entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>, variables: Variables): ParentCache<FragmentReference<TReadFromStore, TClientFieldValue>>;
 type NetworkResponseScalarValue = string | number | boolean;
 type NetworkResponseValue = NetworkResponseScalarValue | null | NetworkResponseObject | NetworkResponseObject[] | NetworkResponseScalarValue[];
 type NetworkResponseObject = {
@@ -20,7 +20,7 @@ type NetworkResponseObject = {
 };
 export declare function normalizeData(environment: IsographEnvironment, normalizationAst: NormalizationAst, networkResponse: NetworkResponseObject, variables: Variables, nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[]): Set<DataId>;
 export declare function subscribeToAnyChange(environment: IsographEnvironment, callback: () => void): () => void;
-export declare function subscribe<TReadFromStore extends Object>(environment: IsographEnvironment, encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>, fragmentReference: FragmentReference<TReadFromStore, any>, callback: (newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>) => void, readerAst: ReaderAst<TReadFromStore>): () => void;
+export declare function subscribe<TReadFromStore extends object>(environment: IsographEnvironment, encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>, fragmentReference: FragmentReference<TReadFromStore, any>, callback: (newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>) => void, readerAst: ReaderAst<TReadFromStore>): () => void;
 export declare function onNextChange(environment: IsographEnvironment): Promise<void>;
 export declare function getParentRecordKey(astNode: NormalizationLinkedField | NormalizationScalarField | ReaderLinkedField | ReaderScalarField, variables: Variables): string;
 export declare const FIRST_SPLIT_KEY = "____";

package/dist/core/entrypoint.d.ts

@@ -1,18 +1,18 @@
 /// <reference types="react" />
 import { TopLevelReaderArtifact } from './reader';
 import { Arguments } from './util';
-export type ReaderWithRefetchQueries<TReadFromStore extends Object, TClientFieldValue> = {
+export type ReaderWithRefetchQueries<TReadFromStore extends object, TClientFieldValue> = {
     readonly kind: 'ReaderWithRefetchQueries';
     readonly readerArtifact: TopLevelReaderArtifact<TReadFromStore, TClientFieldValue, any>;
     readonly nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[];
 };
-export type IsographEntrypoint<TReadFromStore extends Object, TClientFieldValue> = {
+export type IsographEntrypoint<TReadFromStore extends object, TClientFieldValue> = {
     readonly kind: 'Entrypoint';
     readonly queryText: string;
     readonly normalizationAst: NormalizationAst;
     readonly readerWithRefetchQueries: ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>;
 };
-export type IsographEntrypointLoader<TReadFromStore extends Object, TClientFieldValue> = {
+export type IsographEntrypointLoader<TReadFromStore extends object, TClientFieldValue> = {
     readonly kind: 'EntrypointLoader';
     readonly typeAndField: string;
     readonly loader: () => Promise<IsographEntrypoint<TReadFromStore, TClientFieldValue>>;
@@ -44,7 +44,7 @@ export type RefetchQueryNormalizationArtifactWrapper = {
     readonly artifact: RefetchQueryNormalizationArtifact;
     readonly allowedVariables: string[];
 };
-export declare function assertIsEntrypoint<TReadFromStore extends Object, TClientFieldValue>(value: IsographEntrypoint<TReadFromStore, TClientFieldValue> | ((_: any) => any) | any): asserts value is IsographEntrypoint<TReadFromStore, TClientFieldValue>;
+export declare function assertIsEntrypoint<TReadFromStore extends object, TClientFieldValue>(value: IsographEntrypoint<TReadFromStore, TClientFieldValue> | ((_: any) => any) | any): asserts value is IsographEntrypoint<TReadFromStore, TClientFieldValue>;
 export type ExtractReadFromStore<Type> = Type extends IsographEntrypoint<infer X, any> ? X : never;
 export type ExtractResolverResult<Type> = Type extends IsographEntrypoint<any, infer X> ? X : never;
 export type ExtractProps<Type> = Type extends React.FC<infer X> ? X : never;

package/dist/core/read.d.ts

@@ -4,7 +4,7 @@ export type WithEncounteredRecords<T> = {
     readonly encounteredRecords: Set<DataId>;
     readonly item: T;
 };
-export declare function readButDoNotEvaluate<TReadFromStore extends Object>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, unknown>, networkRequestOptions: NetworkRequestReaderOptions): WithEncounteredRecords<TReadFromStore>;
+export declare function readButDoNotEvaluate<TReadFromStore extends object>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, unknown>, networkRequestOptions: NetworkRequestReaderOptions): WithEncounteredRecords<TReadFromStore>;
 export type NetworkRequestReaderOptions = {
     suspendIfInFlight: boolean;
     throwOnNetworkError: boolean;

package/dist/core/reader.d.ts

@@ -4,19 +4,19 @@ import { FragmentReference, Variables } from './FragmentReference';
 import { ComponentOrFieldName, DataId, IsographEnvironment } from './IsographEnvironment';
 import { IsographEntrypoint, IsographEntrypointLoader, RefetchQueryNormalizationArtifact, RefetchQueryNormalizationArtifactWrapper } from './entrypoint';
 import { Arguments } from './util';
-export type TopLevelReaderArtifact<TReadFromStore extends Object, TClientFieldValue, TComponentProps extends Record<string, never>, TVariables = Variables> = EagerReaderArtifact<TReadFromStore, TClientFieldValue, TVariables> | ComponentReaderArtifact<TReadFromStore, TComponentProps, TVariables>;
-export type EagerReaderArtifact<TReadFromStore extends Object, TClientFieldValue, TVariables = Variables> = {
+export type TopLevelReaderArtifact<TReadFromStore extends object, TClientFieldValue, TComponentProps extends Record<string, never>, TVariables = Variables> = EagerReaderArtifact<TReadFromStore, TClientFieldValue, TVariables> | ComponentReaderArtifact<TReadFromStore, TComponentProps, TVariables>;
+export type EagerReaderArtifact<TReadFromStore extends object, TClientFieldValue, TVariables = Variables> = {
     readonly kind: 'EagerReaderArtifact';
     readonly readerAst: ReaderAst<TReadFromStore>;
     readonly resolver: (data: ResolverFirstParameter<TReadFromStore, TVariables>) => TClientFieldValue;
 };
-export type ComponentReaderArtifact<TReadFromStore extends Object, TComponentProps extends Record<string, unknown> = Record<string, never>, TVariables = Variables> = {
+export type ComponentReaderArtifact<TReadFromStore extends object, TComponentProps extends Record<string, unknown> = Record<string, never>, TVariables = Variables> = {
     readonly kind: 'ComponentReaderArtifact';
     readonly componentName: ComponentOrFieldName;
     readonly readerAst: ReaderAst<TReadFromStore>;
     readonly resolver: (data: ResolverFirstParameter<TReadFromStore, TVariables>, runtimeProps: TComponentProps) => React.ReactNode;
 };
-export type ResolverFirstParameter<TReadFromStore extends Object, TVariables = Variables> = {
+export type ResolverFirstParameter<TReadFromStore extends object, TVariables = Variables> = {
     readonly data: TReadFromStore;
     readonly parameters: TVariables;
 };

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

@@ -3,6 +3,6 @@ import { LoadableField } from '../core/reader';
 export declare function useClientSideDefer<TResult>(loadableField: LoadableField<void, TResult>): {
     fragmentReference: FragmentReference<Record<string, never>, TResult>;
 };
-export declare function useClientSideDefer<TArgs extends Object, TResult>(loadableField: LoadableField<TArgs, TResult>, args: TArgs): {
+export declare function useClientSideDefer<TArgs extends object, TResult>(loadableField: LoadableField<TArgs, TResult>, args: TArgs): {
     fragmentReference: FragmentReference<TArgs, TResult>;
 };

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

@@ -11,13 +11,8 @@ type UseSkipLimitReturnValue<TArgs, TItem> = {
     readonly results: ReadonlyArray<TItem>;
     readonly pendingFragment: FragmentReference<any, ReadonlyArray<TItem>>;
 };
-/**
- * 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, TReadFromStore extends Object>(loadableField: LoadableField<TArgs, ReadonlyArray<TItem>>): UseSkipLimitReturnValue<TArgs, TItem>;
+}, TItem, TReadFromStore extends object>(loadableField: LoadableField<TArgs, ReadonlyArray<TItem>>): UseSkipLimitReturnValue<TArgs, TItem>;
 export {};

package/dist/loadable-hooks/useSkipLimitPagination.js

@@ -9,6 +9,7 @@ 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) {
@@ -18,11 +19,6 @@ function flatten(arr) {
     }
     return outArray;
 }
-/**
- * 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) {
     const networkRequestOptions = {
         suspendIfInFlight: true,
@@ -33,19 +29,10 @@ function useSkipLimitPagination(loadableField) {
     // 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) => {
             const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
             const firstParameter = {
-                data: data.item,
+                data: readOutDataAndRecords[i].item,
                 parameters: fragmentReference.variables,
             };
             if (readerWithRefetchQueries.readerArtifact.kind !== 'EagerReaderArtifact') {
@@ -56,6 +43,20 @@ function useSkipLimitPagination(loadableField) {
         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);
+            return {
+                fragmentReference,
+                readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+                records: readOutDataAndRecords[i],
+                callback(_data) {
+                    rerender({});
+                },
+            };
+        });
+    }
     const getFetchMore = (loadedSoFar) => (args, count) => {
         // @ts-expect-error
         const loadedField = loadableField(Object.assign(Object.assign({}, args), { skip: loadedSoFar, limit: count }))[1]();
@@ -81,23 +82,36 @@ function useSkipLimitPagination(loadableField) {
     };
     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),
             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({});
@@ -112,7 +126,7 @@ function useSkipLimitPagination(loadableField) {
             throw networkRequestStatus.error;
         }
         case 'Ok': {
-            const results = readCompletedFragmentReferences(loadedReferences);
+            const results = readCompletedFragmentReferences(completedFragmentReferences);
             return {
                 kind: 'Complete',
                 results,

package/dist/react/useImperativeReference.d.ts

@@ -1,7 +1,7 @@
 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>): {
+export declare function useImperativeReference<TReadFromStore extends object, TClientFieldValue>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>): {
     fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue> | UnassignedState;
     loadFragmentReference: (variables: Variables) => void;
 };

package/dist/react/useLazyReference.d.ts

@@ -1,5 +1,5 @@
 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): {
+export declare function useLazyReference<TReadFromStore extends object, TClientFieldValue>(entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>, variables: Variables): {
     fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>;
 };

package/dist/react/useReadAndSubscribe.d.ts

@@ -4,8 +4,8 @@ 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, readerAst: ReaderAst<TReadFromStore>): TReadFromStore;
-export declare function useSubscribeToMultiple<TReadFromStore extends Object>(items: ReadonlyArray<{
+export declare function useReadAndSubscribe<TReadFromStore extends object>(fragmentReference: FragmentReference<TReadFromStore, any>, networkRequestOptions: NetworkRequestReaderOptions, readerAst: ReaderAst<TReadFromStore>): TReadFromStore;
+export declare function useSubscribeToMultiple<TReadFromStore extends object>(items: ReadonlyArray<{
     records: WithEncounteredRecords<TReadFromStore>;
     callback: (updatedRecords: WithEncounteredRecords<TReadFromStore>) => void;
     fragmentReference: FragmentReference<TReadFromStore, any>;

package/dist/react/useRerenderOnChange.d.ts

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

package/dist/react/useResult.d.ts

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

package/package.json

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

package/src/core/FragmentReference.ts

@@ -8,7 +8,7 @@ export type VariableValue = string | number | boolean | null | object;
 export type Variables = { readonly [index: string]: VariableValue };
 
 export type FragmentReference<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 > = {
   readonly kind: 'FragmentReference';

package/src/core/IsographEnvironment.ts

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

package/src/core/cache.ts

@@ -32,7 +32,7 @@ import { wrapResolvedValue } from './PromiseWrapper';
 const TYPENAME_FIELD_NAME = '__typename';
 
 export function getOrCreateItemInSuspenseCache<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 >(
   environment: IsographEnvironment,
@@ -77,7 +77,7 @@ export function stableCopy<T>(value: T): T {
 }
 
 export function getOrCreateCacheForArtifact<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 >(
   environment: IsographEnvironment,
@@ -180,7 +180,7 @@ export function subscribeToAnyChange(
 }
 
 // TODO we should re-read and call callback if the value has changed
-export function subscribe<TReadFromStore extends Object>(
+export function subscribe<TReadFromStore extends object>(
   environment: IsographEnvironment,
   encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
   fragmentReference: FragmentReference<TReadFromStore, any>,

package/src/core/entrypoint.ts

@@ -2,7 +2,7 @@ import { TopLevelReaderArtifact } from './reader';
 import { Arguments } from './util';
 
 export type ReaderWithRefetchQueries<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 > = {
   readonly kind: 'ReaderWithRefetchQueries';
@@ -17,7 +17,7 @@ export type ReaderWithRefetchQueries<
 
 // This type should be treated as an opaque type.
 export type IsographEntrypoint<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 > = {
   readonly kind: 'Entrypoint';
@@ -30,7 +30,7 @@ export type IsographEntrypoint<
 };
 
 export type IsographEntrypointLoader<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 > = {
   readonly kind: 'EntrypointLoader';
@@ -79,7 +79,7 @@ export type RefetchQueryNormalizationArtifactWrapper = {
 };
 
 export function assertIsEntrypoint<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 >(
   value:

package/src/core/read.ts

@@ -29,7 +29,7 @@ export type WithEncounteredRecords<T> = {
   readonly item: T;
 };
 
-export function readButDoNotEvaluate<TReadFromStore extends Object>(
+export function readButDoNotEvaluate<TReadFromStore extends object>(
   environment: IsographEnvironment,
   fragmentReference: FragmentReference<TReadFromStore, unknown>,
   networkRequestOptions: NetworkRequestReaderOptions,

package/src/core/reader.ts

@@ -14,7 +14,7 @@ import {
 import { Arguments } from './util';
 
 export type TopLevelReaderArtifact<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
   TComponentProps extends Record<string, never>,
   TVariables = Variables,
@@ -23,7 +23,7 @@ export type TopLevelReaderArtifact<
   | ComponentReaderArtifact<TReadFromStore, TComponentProps, TVariables>;
 
 export type EagerReaderArtifact<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
   TVariables = Variables,
 > = {
@@ -35,7 +35,7 @@ export type EagerReaderArtifact<
 };
 
 export type ComponentReaderArtifact<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TComponentProps extends Record<string, unknown> = Record<string, never>,
   TVariables = Variables,
 > = {
@@ -49,7 +49,7 @@ export type ComponentReaderArtifact<
 };
 
 export type ResolverFirstParameter<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TVariables = Variables,
 > = {
   readonly data: TReadFromStore;

package/src/loadable-hooks/useClientSideDefer.ts

@@ -8,12 +8,12 @@ export function useClientSideDefer<TResult>(
   loadableField: LoadableField<void, TResult>,
 ): { fragmentReference: FragmentReference<Record<string, never>, TResult> };
 
-export function useClientSideDefer<TArgs extends Object, TResult>(
+export function useClientSideDefer<TArgs extends object, TResult>(
   loadableField: LoadableField<TArgs, TResult>,
   args: TArgs,
 ): { fragmentReference: FragmentReference<TArgs, TResult> };
 
-export function useClientSideDefer<TArgs extends Object, TResult>(
+export function useClientSideDefer<TArgs extends object, TResult>(
   loadableField: LoadableField<TArgs, TResult>,
   args?: TArgs,
 ): { fragmentReference: FragmentReference<TArgs, TResult> } {

package/src/loadable-hooks/useSkipLimitPagination.ts

@@ -1,4 +1,4 @@
-import { LoadableField } from '../core/reader';
+import { LoadableField, type ReaderAst } from '../core/reader';
 import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
 import { ItemCleanupPair } from '@isograph/disposable-types';
 import { FragmentReference } from '../core/FragmentReference';
@@ -15,6 +15,8 @@ import {
   ReferenceCountedPointer,
 } from '@isograph/reference-counted-pointer';
 import { getPromiseState, readPromise } from '../core/PromiseWrapper';
+import { type WithEncounteredRecords } from '../core/read';
+import { useSubscribeToMultiple } from '../react/useReadAndSubscribe';
 
 type SkipOrLimit = 'skip' | 'limit';
 type OmitSkipLimit<TArgs> = keyof Omit<TArgs, SkipOrLimit> extends never
@@ -34,17 +36,20 @@ type UseSkipLimitReturnValue<TArgs, TItem> =
     };
 
 type ArrayFragmentReference<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TItem,
 > = FragmentReference<TReadFromStore, ReadonlyArray<TItem>>;
 
 type LoadedFragmentReferences<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TItem,
-> = ReadonlyArray<
-  ItemCleanupPair<
-    ReferenceCountedPointer<ArrayFragmentReference<TReadFromStore, TItem>>
-  >
+> = ReadonlyArray<LoadedFragmentReference<TReadFromStore, TItem>>;
+
+type LoadedFragmentReference<
+  TReadFromStore extends object,
+  TItem,
+> = ItemCleanupPair<
+  ReferenceCountedPointer<ArrayFragmentReference<TReadFromStore, TItem>>
 >;
 
 function flatten<T>(arr: ReadonlyArray<ReadonlyArray<T>>): ReadonlyArray<T> {
@@ -57,18 +62,13 @@ function flatten<T>(arr: ReadonlyArray<ReadonlyArray<T>>): ReadonlyArray<T> {
   return outArray;
 }
 
-/**
- * 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 function useSkipLimitPagination<
   TArgs extends {
     skip: number | void | null;
     limit: number | void | null;
   },
   TItem,
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
 >(
   loadableField: LoadableField<TArgs, ReadonlyArray<TItem>>,
 ): UseSkipLimitReturnValue<TArgs, TItem> {
@@ -86,39 +86,15 @@ export function useSkipLimitPagination<
   // TODO move this out of useSkipLimitPagination, and pass environment and networkRequestOptions
   // as parameters (or recreate networkRequestOptions)
   function readCompletedFragmentReferences(
-    completedReferences: ReadonlyArray<
-      ItemCleanupPair<
-        ReferenceCountedPointer<ArrayFragmentReference<TReadFromStore, TItem>>
-      >
-    >,
+    completedReferences: ArrayFragmentReference<TReadFromStore, TItem>[],
   ) {
-    // In general, this will not suspend. But it could, if there is missing data.
-    // A better version of this hook would not do any reading here.
-    const results = completedReferences.map(([pointer]) => {
-      const fragmentReference = pointer.getItemIfNotDisposed();
-      if (fragmentReference == null) {
-        throw new Error(
-          'FragmentReference is unexpectedly disposed. \
-          This is indicative of a bug in Isograph.',
-        );
-      }
-
-      maybeUnwrapNetworkRequest(
-        fragmentReference.networkRequest,
-        networkRequestOptions,
-      );
-      const data = readButDoNotEvaluate(
-        environment,
-        fragmentReference,
-        networkRequestOptions,
-      );
-
+    const results = completedReferences.map((fragmentReference, i) => {
       const readerWithRefetchQueries = readPromise(
         fragmentReference.readerWithRefetchQueries,
       );
 
       const firstParameter = {
-        data: data.item,
+        data: readOutDataAndRecords[i].item,
         parameters: fragmentReference.variables,
       };
 
@@ -137,6 +113,42 @@ export function useSkipLimitPagination<
     return items;
   }
 
+  function subscribeCompletedFragmentReferences(
+    completedReferences: ArrayFragmentReference<TReadFromStore, TItem>[],
+  ) {
+    return completedReferences.map(
+      (
+        fragmentReference,
+        i,
+      ): {
+        records: WithEncounteredRecords<TReadFromStore>;
+        callback: (
+          updatedRecords: WithEncounteredRecords<TReadFromStore>,
+        ) => void;
+        fragmentReference: ArrayFragmentReference<TReadFromStore, TItem>;
+        readerAst: ReaderAst<TItem>;
+      } => {
+        maybeUnwrapNetworkRequest(
+          fragmentReference.networkRequest,
+          networkRequestOptions,
+        );
+
+        const readerWithRefetchQueries = readPromise(
+          fragmentReference.readerWithRefetchQueries,
+        );
+
+        return {
+          fragmentReference,
+          readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+          records: readOutDataAndRecords[i],
+          callback(_data) {
+            rerender({});
+          },
+        };
+      },
+    );
+  }
+
   const getFetchMore =
     (loadedSoFar: number) =>
     (args: OmitSkipLimit<TArgs>, count: number): void => {
@@ -182,33 +194,64 @@ export function useSkipLimitPagination<
   const [, rerender] = useState({});
 
   const loadedReferences = state === UNASSIGNED_STATE ? [] : state;
-  if (loadedReferences.length === 0) {
-    return {
-      kind: 'Complete',
-      fetchMore: getFetchMore(0),
-      results: [],
-    };
-  }
 
-  const mostRecentItem = loadedReferences[loadedReferences.length - 1];
-  const mostRecentFragmentReference = mostRecentItem[0].getItemIfNotDisposed();
-  if (mostRecentFragmentReference === null) {
+  const mostRecentItem: LoadedFragmentReference<TReadFromStore, TItem> | null =
+    loadedReferences[loadedReferences.length - 1];
+  const mostRecentFragmentReference =
+    mostRecentItem?.[0].getItemIfNotDisposed();
+
+  if (mostRecentItem && mostRecentFragmentReference === null) {
     throw new Error(
       'FragmentReference is unexpectedly disposed. \
       This is indicative of a bug in Isograph.',
     );
   }
 
-  const networkRequestStatus = getPromiseState(
-    mostRecentFragmentReference.networkRequest,
+  const networkRequestStatus =
+    mostRecentFragmentReference &&
+    getPromiseState(mostRecentFragmentReference.networkRequest);
+
+  const slicedFragmentReferences =
+    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) =>
+      readButDoNotEvaluate(
+        environment,
+        fragmentReference,
+        networkRequestOptions,
+      ),
+  );
+
+  useSubscribeToMultiple<TReadFromStore>(
+    subscribeCompletedFragmentReferences(completedFragmentReferences),
+  );
+
+  if (!networkRequestStatus) {
+    return {
+      kind: 'Complete',
+      fetchMore: getFetchMore(0),
+      results: [],
+    };
+  }
+
   switch (networkRequestStatus.kind) {
     case 'Pending': {
-      const completedFragmentReferences = loadedReferences.slice(
-        0,
-        loadedReferences.length - 1,
-      );
-
       const unsubscribe = subscribeToAnyChange(environment, () => {
         unsubscribe();
         rerender({});
@@ -224,7 +267,9 @@ export function useSkipLimitPagination<
       throw networkRequestStatus.error;
     }
     case 'Ok': {
-      const results = readCompletedFragmentReferences(loadedReferences);
+      const results = readCompletedFragmentReferences(
+        completedFragmentReferences,
+      );
       return {
         kind: 'Complete',
         results,

package/src/react/useImperativeReference.ts

@@ -12,7 +12,7 @@ import { wrapResolvedValue } from '../core/PromiseWrapper';
 // TODO rename this to useImperativelyLoadedEntrypoint
 
 export function useImperativeReference<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 >(
   entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>,

package/src/react/useLazyReference.ts

@@ -5,7 +5,7 @@ import { getOrCreateCacheForArtifact } from '../core/cache';
 import { useLazyDisposableState } from '@isograph/react-disposable-state';
 
 export function useLazyReference<
-  TReadFromStore extends Object,
+  TReadFromStore extends object,
   TClientFieldValue,
 >(
   entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>,

package/src/react/useReadAndSubscribe.ts

@@ -16,7 +16,7 @@ import type { ReaderAst } from '../core/reader';
 /**
  * Read the data from a fragment reference and subscribe to updates.
  */
-export function useReadAndSubscribe<TReadFromStore extends Object>(
+export function useReadAndSubscribe<TReadFromStore extends object>(
   fragmentReference: FragmentReference<TReadFromStore, any>,
   networkRequestOptions: NetworkRequestReaderOptions,
   readerAst: ReaderAst<TReadFromStore>,
@@ -34,7 +34,7 @@ export function useReadAndSubscribe<TReadFromStore extends Object>(
   return readOutDataAndRecords.item;
 }
 
-export function useSubscribeToMultiple<TReadFromStore extends Object>(
+export function useSubscribeToMultiple<TReadFromStore extends object>(
   items: ReadonlyArray<{
     records: WithEncounteredRecords<TReadFromStore>;
     callback: (updatedRecords: WithEncounteredRecords<TReadFromStore>) => void;

package/src/react/useRerenderOnChange.ts

@@ -7,7 +7,7 @@ import type { ReaderAst } from '../core/reader';
 
 // TODO add unit tests for this. Add integration tests that test
 // behavior when the encounteredRecords underneath a fragment change.
-export function useRerenderOnChange<TReadFromStore extends Object>(
+export function useRerenderOnChange<TReadFromStore extends object>(
   encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
   fragmentReference: FragmentReference<any, any>,
   setEncounteredDataAndRecords: (

package/src/react/useResult.ts

@@ -12,7 +12,7 @@ import {
   readPromise,
 } from '../core/PromiseWrapper';
 
-export function useResult<TReadFromStore extends Object, TClientFieldValue>(
+export function useResult<TReadFromStore extends object, TClientFieldValue>(
   fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
   partialNetworkRequestOptions?: Partial<NetworkRequestReaderOptions> | void,
 ): TClientFieldValue {

package/src/tests/__isograph/iso.ts

@@ -10,7 +10,7 @@ import entrypoint_Query__nodeField from '../__isograph/Query/nodeField/entrypoin
 // This means that the type of the exported iso literal is exactly
 // the type of the passed-in function, which takes one parameter
 // of type TParam.
-type IdentityWithParam<TParam extends Object> = <TClientFieldReturn, TVariables = Variables>(
+type IdentityWithParam<TParam extends object> = <TClientFieldReturn, TVariables = Variables>(
   clientField: (param: TParam) => TClientFieldReturn
 ) => (param: ResolverFirstParameter<TParam, TVariables>) => TClientFieldReturn;
 
@@ -21,7 +21,7 @@ type IdentityWithParam<TParam extends Object> = <TClientFieldReturn, TVariables
 //
 // TComponentProps becomes the types of the props you must pass
 // whenever the @component field is rendered.
-type IdentityWithParamComponent<TParam extends Object> = <
+type IdentityWithParamComponent<TParam extends object> = <
   TClientFieldReturn,
   TComponentProps = Record<string, never>,
   TVariables = Variables