@isograph/react 0.0.0-main-d319cfe5 → 0.0.0-main-b72868e3

package/dist/FragmentReference.d.ts

@@ -2,12 +2,13 @@ import { DataId } from './IsographEnvironment';
 import { RefetchQueryArtifactWrapper } from './entrypoint';
 import { ReaderArtifact } from './reader';
 export type Variable = any;
+export type Variables = {
+    readonly [index: string]: Variable;
+};
 export type FragmentReference<TReadFromStore extends Object, TClientFieldValue> = {
     kind: 'FragmentReference';
     readerArtifact: ReaderArtifact<TReadFromStore, TClientFieldValue>;
     root: DataId;
-    variables: {
-        [index: string]: Variable;
-    } | null;
+    variables: Variables | null;
     nestedRefetchQueries: RefetchQueryArtifactWrapper[];
 };

package/dist/IsographEnvironment.d.ts

@@ -1,24 +1,30 @@
 /// <reference types="react" />
 import { ParentCache } from '@isograph/react-disposable-state';
 import { RetainedQuery } from './garbageCollection';
+import { WithEncounteredRecords } from './read';
+import { FragmentReference } from './FragmentReference';
 export type ComponentOrFieldName = string;
-type StringifiedArgs = string;
-type ComponentAndEncounteredRecordsCache = {
+export type StringifiedArgs = string;
+type ComponentCache = {
     [key: DataId]: {
         [key: ComponentOrFieldName]: {
-            [key: StringifiedArgs]: ComponentAndEncounteredRecords;
+            [key: StringifiedArgs]: React.FC<any>;
         };
     };
 };
-export type ComponentAndEncounteredRecords = {
-    component: React.FC<any>;
-    encounteredRecordsDuringLastRead: Set<DataId> | null;
+type FragmentSubscription<TReadFromStore extends Object> = {
+    readonly kind: 'FragmentSubscription';
+    readonly callback: (newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>) => void;
+    /** The value read out from the previous call to readButDoNotEvaluate */
+    readonly encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>;
+    readonly fragmentReference: FragmentReference<TReadFromStore, any>;
 };
-type CallbackAndRecords = {
-    callback: () => void;
-    records: Set<DataId> | null;
+type AnyRecordSubscription = {
+    readonly kind: 'AnyRecords';
+    readonly callback: () => void;
 };
-type Subscriptions = Set<CallbackAndRecords>;
+type Subscription = FragmentSubscription<Object> | AnyRecordSubscription;
+type Subscriptions = Set<Subscription>;
 type SuspenseCache = {
     [index: string]: ParentCache<any>;
 };
@@ -26,12 +32,12 @@ export type IsographEnvironment = {
     store: IsographStore;
     networkFunction: IsographNetworkFunction;
     missingFieldHandler: MissingFieldHandler | null;
+    componentCache: ComponentCache;
     subscriptions: Subscriptions;
+    suspenseCache: SuspenseCache;
     retainedQueries: Set<RetainedQuery>;
     gcBuffer: Array<RetainedQuery>;
     gcBufferSize: number;
-    componentAndEncounteredRecordsCache: ComponentAndEncounteredRecordsCache;
-    suspenseCache: SuspenseCache;
 };
 export type MissingFieldHandler = (storeRecord: StoreRecord, root: DataId, fieldName: string, arguments_: {
     [index: string]: any;

package/dist/IsographEnvironment.js

@@ -8,7 +8,7 @@ function createIsographEnvironment(store, networkFunction, missingFieldHandler)
         store,
         networkFunction,
         missingFieldHandler: missingFieldHandler !== null && missingFieldHandler !== void 0 ? missingFieldHandler : null,
-        componentAndEncounteredRecordsCache: {},
+        componentCache: {},
         subscriptions: new Set(),
         suspenseCache: {},
         retainedQueries: new Set(),

package/dist/areEqualWithDeepComparison.d.ts

@@ -0,0 +1,3 @@
+export declare function areEqualWithDeepComparison(oldItem: unknown, newItem: unknown): boolean;
+export declare function areEqualArraysWithDeepComparison(oldItems: ReadonlyArray<unknown>, newItems: ReadonlyArray<unknown>): boolean;
+export declare function areEqualObjectsWithDeepComparison(oldItemObject: object, newItemObject: object): boolean;

package/dist/areEqualWithDeepComparison.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areEqualObjectsWithDeepComparison = exports.areEqualArraysWithDeepComparison = exports.areEqualWithDeepComparison = void 0;
+function areEqualWithDeepComparison(oldItem, newItem) {
+    if (newItem === null) {
+        return oldItem === null;
+    }
+    if (newItem === undefined) {
+        return oldItem === undefined;
+    }
+    if (Array.isArray(newItem)) {
+        if (!Array.isArray(oldItem)) {
+            return false;
+        }
+        return areEqualArraysWithDeepComparison(oldItem, newItem);
+    }
+    if (typeof newItem === 'object') {
+        if (typeof oldItem !== 'object') {
+            return false;
+        }
+        if (oldItem === null) {
+            return false;
+        }
+        return areEqualObjectsWithDeepComparison(oldItem, newItem);
+    }
+    return newItem === oldItem;
+}
+exports.areEqualWithDeepComparison = areEqualWithDeepComparison;
+function areEqualArraysWithDeepComparison(oldItems, newItems) {
+    if (newItems.length !== oldItems.length) {
+        return false;
+    }
+    for (let i = 0; i < newItems.length; i++) {
+        if (!areEqualWithDeepComparison(oldItems[i], newItems[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+exports.areEqualArraysWithDeepComparison = areEqualArraysWithDeepComparison;
+function areEqualObjectsWithDeepComparison(oldItemObject, newItemObject) {
+    const oldKeys = Object.keys(oldItemObject);
+    const newKeys = Object.keys(newItemObject);
+    if (oldKeys.length !== newKeys.length) {
+        return false;
+    }
+    for (const oldKey of oldKeys) {
+        if (!(oldKey in newItemObject)) {
+            return false;
+        }
+        // @ts-expect-error
+        const oldValue = oldItemObject[oldKey];
+        // @ts-expect-error
+        const newValue = newItemObject[oldKey];
+        if (!areEqualWithDeepComparison(oldValue, newValue)) {
+            return false;
+        }
+    }
+    return true;
+}
+exports.areEqualObjectsWithDeepComparison = areEqualObjectsWithDeepComparison;

package/dist/cache.d.ts

@@ -1,8 +1,10 @@
 import { ItemCleanupPair, ParentCache } from '@isograph/react-disposable-state';
 import { PromiseWrapper } from './PromiseWrapper';
-import { DataId, type IsographEnvironment } from './IsographEnvironment';
+import { type IsographEnvironment } from './IsographEnvironment';
 import { IsographEntrypoint, NormalizationLinkedField, NormalizationScalarField } from './entrypoint';
 import { ReaderLinkedField, ReaderScalarField } from './reader';
+import { WithEncounteredRecords } from './read';
+import { FragmentReference } from './FragmentReference';
 declare global {
     interface Window {
         __LOG: boolean;
@@ -17,7 +19,8 @@ export declare function stableCopy<T>(value: T): T;
 type IsoResolver = IsographEntrypoint<any, any>;
 export declare function getOrCreateCacheForArtifact<TReadFromStore extends Object, TClientFieldValue>(environment: IsographEnvironment, artifact: IsographEntrypoint<TReadFromStore, TClientFieldValue>, variables: object): ParentCache<PromiseWrapper<TClientFieldValue>>;
 export declare function makeNetworkRequest<T>(environment: IsographEnvironment, artifact: IsoResolver, variables: object): ItemCleanupPair<PromiseWrapper<T>>;
-export declare function subscribe(environment: IsographEnvironment, encounteredRecords: Set<DataId> | null, callback: () => void): () => void;
+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): () => void;
 export declare function onNextChange(environment: IsographEnvironment): Promise<void>;
 export declare function getParentRecordKey(astNode: NormalizationLinkedField | NormalizationScalarField | ReaderLinkedField | ReaderScalarField, variables: {
     [index: string]: string;

package/dist/cache.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SECOND_SPLIT_KEY = exports.FIRST_SPLIT_KEY = exports.getParentRecordKey = exports.onNextChange = exports.subscribe = exports.makeNetworkRequest = exports.getOrCreateCacheForArtifact = exports.stableCopy = void 0;
+exports.SECOND_SPLIT_KEY = exports.FIRST_SPLIT_KEY = exports.getParentRecordKey = exports.onNextChange = exports.subscribe = exports.subscribeToAnyChange = exports.makeNetworkRequest = exports.getOrCreateCacheForArtifact = exports.stableCopy = void 0;
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
 const PromiseWrapper_1 = require("./PromiseWrapper");
 const IsographEnvironment_1 = require("./IsographEnvironment");
 const garbageCollection_1 = require("./garbageCollection");
+const read_1 = require("./read");
+const areEqualWithDeepComparison_1 = require("./areEqualWithDeepComparison");
 function getOrCreateCache(environment, index, factory) {
     if (typeof window !== 'undefined' && window.__LOG) {
         console.log('getting cache for', {
@@ -108,18 +110,31 @@ function normalizeData(environment, normalizationAst, networkResponse, variables
     callSubscriptions(environment, encounteredIds);
     return encounteredIds;
 }
-function subscribe(environment, encounteredRecords, callback) {
-    const callbackAndRecords = {
+function subscribeToAnyChange(environment, callback) {
+    const subscription = {
+        kind: 'AnyRecords',
         callback,
-        records: encounteredRecords,
     };
-    environment.subscriptions.add(callbackAndRecords);
-    return () => environment.subscriptions.delete(callbackAndRecords);
+    environment.subscriptions.add(subscription);
+    return () => environment.subscriptions.delete(subscription);
+}
+exports.subscribeToAnyChange = subscribeToAnyChange;
+function subscribe(environment, encounteredDataAndRecords, fragmentReference, callback) {
+    const fragmentSubscription = {
+        kind: 'FragmentSubscription',
+        callback,
+        encounteredDataAndRecords,
+        fragmentReference,
+    };
+    // @ts-expect-error
+    environment.subscriptions.add(fragmentSubscription);
+    // @ts-expect-error
+    return () => environment.subscriptions.delete(fragmentSubscription);
 }
 exports.subscribe = subscribe;
 function onNextChange(environment) {
     return new Promise((resolve) => {
-        const unsubscribe = subscribe(environment, null, () => {
+        const unsubscribe = subscribeToAnyChange(environment, () => {
             unsubscribe();
             resolve();
         });
@@ -127,12 +142,44 @@ function onNextChange(environment) {
 }
 exports.onNextChange = onNextChange;
 function callSubscriptions(environment, recordsEncounteredWhenNormalizing) {
-    environment.subscriptions.forEach(({ callback, records }) => {
-        if (records === null) {
-            callback();
-        }
-        else if (hasOverlappingIds(recordsEncounteredWhenNormalizing, records)) {
-            callback();
+    environment.subscriptions.forEach((subscription) => {
+        switch (subscription.kind) {
+            case 'FragmentSubscription': {
+                // TODO if there are multiple components subscribed to the same
+                // fragment, we will call readButNotEvaluate multiple times. We
+                // should fix that.
+                if (hasOverlappingIds(recordsEncounteredWhenNormalizing, subscription.encounteredDataAndRecords.encounteredRecords)) {
+                    const newEncounteredDataAndRecords = (0, read_1.readButDoNotEvaluate)(environment, subscription.fragmentReference);
+                    if (!(0, areEqualWithDeepComparison_1.areEqualObjectsWithDeepComparison)(subscription.encounteredDataAndRecords.item, newEncounteredDataAndRecords.item)) {
+                        if (typeof window !== 'undefined' && window.__LOG) {
+                            console.log('Deep equality - No', {
+                                fragmentReference: subscription.fragmentReference,
+                                old: subscription.encounteredDataAndRecords.item,
+                                new: newEncounteredDataAndRecords.item,
+                            });
+                        }
+                        // TODO deep compare values
+                        subscription.callback(newEncounteredDataAndRecords);
+                    }
+                    else {
+                        if (typeof window !== 'undefined' && window.__LOG) {
+                            console.log('Deep equality - Yes', {
+                                fragmentReference: subscription.fragmentReference,
+                                old: subscription.encounteredDataAndRecords.item,
+                            });
+                        }
+                    }
+                }
+                return;
+            }
+            case 'AnyRecords': {
+                return subscription.callback();
+            }
+            default: {
+                // @ts-expect-error(6133)
+                const _ = subscription;
+                throw new Error('Unexpected case');
+            }
         }
     });
 }

package/dist/componentCache.d.ts

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-import { RefetchQueryArtifactWrapper } from './entrypoint';
-import { IsographEnvironment, DataId } from './IsographEnvironment';
-import { ReaderArtifact } from './reader';
-export declare function getOrCreateCachedComponent(environment: IsographEnvironment, rootId: DataId, componentName: string, readerArtifact: ReaderArtifact<any, any>, variables: {
-    [key: string]: string;
-}, resolverRefetchQueries: RefetchQueryArtifactWrapper[]): React.FC<any>;
+import { IsographEnvironment } from './IsographEnvironment';
+import { FragmentReference } from './FragmentReference';
+export declare function getOrCreateCachedComponent(environment: IsographEnvironment, componentName: string, fragmentReference: FragmentReference<any, any>): React.FC<any>;

package/dist/componentCache.js

@@ -2,38 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOrCreateCachedComponent = void 0;
 const cache_1 = require("./cache");
-const read_1 = require("./read");
-const useRerenderWhenEncounteredRecordChanges_1 = require("./useRerenderWhenEncounteredRecordChanges");
-function getOrCreateCachedComponent(environment, rootId, componentName, readerArtifact, variables, resolverRefetchQueries) {
+const useReadAndSubscribe_1 = require("./useReadAndSubscribe");
+function getOrCreateCachedComponent(environment, componentName, fragmentReference) {
     var _a, _b, _c;
-    const cachedComponentsById = environment.componentAndEncounteredRecordsCache;
-    const stringifiedArgs = JSON.stringify((0, cache_1.stableCopy)(variables));
-    cachedComponentsById[rootId] = (_a = cachedComponentsById[rootId]) !== null && _a !== void 0 ? _a : {};
-    const componentsByName = cachedComponentsById[rootId];
+    // cachedComponentsById is a three layer cache: id, then component name, then
+    // stringified args. These three, together, uniquely identify a read at a given
+    // time.
+    const cachedComponentsById = environment.componentCache;
+    cachedComponentsById[fragmentReference.root] =
+        (_a = cachedComponentsById[fragmentReference.root]) !== null && _a !== void 0 ? _a : {};
+    const componentsByName = cachedComponentsById[fragmentReference.root];
     componentsByName[componentName] = (_b = componentsByName[componentName]) !== null && _b !== void 0 ? _b : {};
     const byArgs = componentsByName[componentName];
+    const stringifiedArgs = JSON.stringify((0, cache_1.stableCopy)(fragmentReference.variables));
     byArgs[stringifiedArgs] =
         (_c = byArgs[stringifiedArgs]) !== null && _c !== void 0 ? _c : (() => {
             function Component(additionalRuntimeProps) {
-                const { item: data, encounteredRecords } = (0, read_1.readButDoNotEvaluate)(environment, {
-                    kind: 'FragmentReference',
-                    readerArtifact: readerArtifact,
-                    root: rootId,
-                    variables,
-                    nestedRefetchQueries: resolverRefetchQueries,
-                }, byArgs[stringifiedArgs]);
-                (0, useRerenderWhenEncounteredRecordChanges_1.useRerenderWhenEncounteredRecordChanges)(environment, encounteredRecords);
+                const data = (0, useReadAndSubscribe_1.useReadAndSubscribe)(environment, fragmentReference);
                 if (typeof window !== 'undefined' && window.__LOG) {
-                    console.log('Component re-rendered: ' + componentName + ' ' + rootId);
+                    console.log('Component re-rendered: ' +
+                        componentName +
+                        ' ' +
+                        fragmentReference.root);
                 }
-                return readerArtifact.resolver(data, additionalRuntimeProps);
+                return fragmentReference.readerArtifact.resolver(data, additionalRuntimeProps);
             }
-            Component.displayName = `${componentName} (id: ${rootId}) @component`;
-            return {
-                component: Component,
-                encounteredRecordsDuringLastRead: null,
-            };
+            Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
+            return Component;
         })();
-    return byArgs[stringifiedArgs].component;
+    return byArgs[stringifiedArgs];
 }
 exports.getOrCreateCachedComponent = getOrCreateCachedComponent;

package/dist/index.d.ts

@@ -7,9 +7,9 @@ export { useImperativeReference } from './useImperativeReference';
 export { EntrypointReader } from './EntrypointReader';
 export { type ReaderArtifact, ReaderAst, ReaderAstNode, ReaderLinkedField, ReaderMutationField, ReaderRefetchField, ReaderResolverField, ReaderResolverVariant, ReaderScalarField, } from './reader';
 export { NormalizationAst, NormalizationAstNode, NormalizationLinkedField, NormalizationScalarField, IsographEntrypoint, assertIsEntrypoint, RefetchQueryArtifact, RefetchQueryArtifactWrapper, } from './entrypoint';
-export { read, readButDoNotEvaluate } from './read';
+export { readButDoNotEvaluate } from './read';
 export { useResult } from './useResult';
 export { type FragmentReference } from './FragmentReference';
 export { useLazyReference } from './useLazyReference';
 export { ExtractSecondParam, Argument, ArgumentName, ArgumentValue, Arguments, } from './util';
-export { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
+export { useRerenderOnChange } from './useRerenderOnChange';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRerenderWhenEncounteredRecordChanges = exports.useLazyReference = exports.useResult = exports.readButDoNotEvaluate = exports.read = exports.assertIsEntrypoint = exports.EntrypointReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.subscribe = exports.makeNetworkRequest = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
+exports.useRerenderOnChange = exports.useLazyReference = exports.useResult = exports.readButDoNotEvaluate = exports.assertIsEntrypoint = exports.EntrypointReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.subscribe = exports.makeNetworkRequest = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
 var garbageCollection_1 = require("./garbageCollection");
 Object.defineProperty(exports, "retainQuery", { enumerable: true, get: function () { return garbageCollection_1.retainQuery; } });
 Object.defineProperty(exports, "unretainQuery", { enumerable: true, get: function () { return garbageCollection_1.unretainQuery; } });
@@ -23,11 +23,10 @@ Object.defineProperty(exports, "EntrypointReader", { enumerable: true, get: func
 var entrypoint_1 = require("./entrypoint");
 Object.defineProperty(exports, "assertIsEntrypoint", { enumerable: true, get: function () { return entrypoint_1.assertIsEntrypoint; } });
 var read_1 = require("./read");
-Object.defineProperty(exports, "read", { enumerable: true, get: function () { return read_1.read; } });
 Object.defineProperty(exports, "readButDoNotEvaluate", { enumerable: true, get: function () { return read_1.readButDoNotEvaluate; } });
 var useResult_1 = require("./useResult");
 Object.defineProperty(exports, "useResult", { enumerable: true, get: function () { return useResult_1.useResult; } });
 var useLazyReference_1 = require("./useLazyReference");
 Object.defineProperty(exports, "useLazyReference", { enumerable: true, get: function () { return useLazyReference_1.useLazyReference; } });
-var useRerenderWhenEncounteredRecordChanges_1 = require("./useRerenderWhenEncounteredRecordChanges");
-Object.defineProperty(exports, "useRerenderWhenEncounteredRecordChanges", { enumerable: true, get: function () { return useRerenderWhenEncounteredRecordChanges_1.useRerenderWhenEncounteredRecordChanges; } });
+var useRerenderOnChange_1 = require("./useRerenderOnChange");
+Object.defineProperty(exports, "useRerenderOnChange", { enumerable: true, get: function () { return useRerenderOnChange_1.useRerenderOnChange; } });

package/dist/read.d.ts

@@ -1,8 +1,7 @@
 import { FragmentReference } from './FragmentReference';
-import { ComponentAndEncounteredRecords, DataId, IsographEnvironment } from './IsographEnvironment';
+import { DataId, IsographEnvironment } from './IsographEnvironment';
 export type WithEncounteredRecords<T> = {
     encounteredRecords: Set<DataId>;
     item: T;
 };
-export declare function read<TReadFromStore extends Object, TClientFieldValue>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>): WithEncounteredRecords<TClientFieldValue>;
-export declare function readButDoNotEvaluate<TReadFromStore extends Object>(environment: IsographEnvironment, reference: FragmentReference<TReadFromStore, unknown>, encounteredRecordCache: ComponentAndEncounteredRecords): WithEncounteredRecords<TReadFromStore>;
+export declare function readButDoNotEvaluate<TReadFromStore extends Object>(environment: IsographEnvironment, reference: FragmentReference<TReadFromStore, unknown>): WithEncounteredRecords<TReadFromStore>;

package/dist/read.js

@@ -1,38 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.readButDoNotEvaluate = exports.read = void 0;
+exports.readButDoNotEvaluate = void 0;
 const cache_1 = require("./cache");
 const componentCache_1 = require("./componentCache");
 const IsographEnvironment_1 = require("./IsographEnvironment");
-function read(environment, fragmentReference) {
-    var _a, _b;
-    const variant = fragmentReference.readerArtifact.variant;
-    if (variant.kind === 'Eager') {
-        const mutableEncounteredRecords = new Set();
-        const data = readData(environment, fragmentReference.readerArtifact.readerAst, fragmentReference.root, (_a = fragmentReference.variables) !== null && _a !== void 0 ? _a : {}, fragmentReference.nestedRefetchQueries, mutableEncounteredRecords);
-        if (data.kind === 'MissingData') {
-            throw (0, cache_1.onNextChange)(environment);
-        }
-        else {
-            return {
-                encounteredRecords: mutableEncounteredRecords,
-                // @ts-expect-error This not properly typed yet
-                item: fragmentReference.readerArtifact.resolver(data.data),
-            };
-        }
-    }
-    else if (variant.kind === 'Component') {
-        return {
-            // @ts-ignore
-            item: (0, componentCache_1.getOrCreateCachedComponent)(environment, fragmentReference.root, variant.componentName, fragmentReference.readerArtifact, (_b = fragmentReference.variables) !== null && _b !== void 0 ? _b : {}, fragmentReference.nestedRefetchQueries),
-            encounteredRecords: new Set(),
-        };
-    }
-    // Why can't Typescript realize that this is unreachable??
-    throw new Error('This is unreachable');
-}
-exports.read = read;
-function readButDoNotEvaluate(environment, reference, encounteredRecordCache) {
+function readButDoNotEvaluate(environment, reference) {
     var _a;
     const mutableEncounteredRecords = new Set();
     const response = readData(environment, reference.readerArtifact.readerAst, reference.root, (_a = reference.variables) !== null && _a !== void 0 ? _a : {}, reference.nestedRefetchQueries, mutableEncounteredRecords);
@@ -43,33 +15,13 @@ function readButDoNotEvaluate(environment, reference, encounteredRecordCache) {
         throw (0, cache_1.onNextChange)(environment);
     }
     else {
-        const encounteredRecords = compareAndUpdateEncounteredRecords(encounteredRecordCache, mutableEncounteredRecords);
         return {
-            encounteredRecords,
+            encounteredRecords: mutableEncounteredRecords,
             item: response.data,
         };
     }
 }
 exports.readButDoNotEvaluate = readButDoNotEvaluate;
-function compareAndUpdateEncounteredRecords(encounteredRecordCache, newEncounteredRecords) {
-    const { encounteredRecordsDuringLastRead } = encounteredRecordCache;
-    if (encounteredRecordsDuringLastRead == null ||
-        encounteredRecordsDuringLastRead.size != newEncounteredRecords.size) {
-        encounteredRecordCache.encounteredRecordsDuringLastRead =
-            newEncounteredRecords;
-        return newEncounteredRecords;
-    }
-    else {
-        for (const item of newEncounteredRecords) {
-            if (!encounteredRecordsDuringLastRead.has(item)) {
-                encounteredRecordCache.encounteredRecordsDuringLastRead =
-                    newEncounteredRecords;
-                return newEncounteredRecords;
-            }
-        }
-        return encounteredRecordsDuringLastRead;
-    }
-}
 function readData(environment, ast, root, variables, nestedRefetchQueries, mutableEncounteredRecords) {
     var _a, _b, _c, _d, _e;
     mutableEncounteredRecords.add(root);
@@ -184,9 +136,6 @@ function readData(environment, ast, root, variables, nestedRefetchQueries, mutab
                 const data = readData(environment, field.readerArtifact.readerAst, root, variables, 
                 // Refetch fields just read the id, and don't need refetch query artifacts
                 [], mutableEncounteredRecords);
-                if (typeof window !== 'undefined' && window.__LOG) {
-                    console.log('refetch field data', data, field);
-                }
                 if (data.kind === 'MissingData') {
                     return {
                         kind: 'MissingData',
@@ -212,9 +161,6 @@ function readData(environment, ast, root, variables, nestedRefetchQueries, mutab
                 const data = readData(environment, field.readerArtifact.readerAst, root, variables, 
                 // Mutation don't need refetch query artifacts
                 [], mutableEncounteredRecords);
-                if (typeof window !== 'undefined' && window.__LOG) {
-                    console.log('refetch field data', data, field);
-                }
                 if (data.kind === 'MissingData') {
                     return {
                         kind: 'MissingData',
@@ -255,7 +201,13 @@ function readData(environment, ast, root, variables, nestedRefetchQueries, mutab
                     }
                 }
                 else if (variant.kind === 'Component') {
-                    target[field.alias] = (0, componentCache_1.getOrCreateCachedComponent)(environment, root, variant.componentName, field.readerArtifact, variables, resolverRefetchQueries);
+                    target[field.alias] = (0, componentCache_1.getOrCreateCachedComponent)(environment, variant.componentName, {
+                        kind: 'FragmentReference',
+                        readerArtifact: field.readerArtifact,
+                        root,
+                        variables,
+                        nestedRefetchQueries: resolverRefetchQueries,
+                    });
                 }
                 break;
             }

package/dist/useReadAndSubscribe.d.ts

@@ -0,0 +1,7 @@
+import { FragmentReference } from './FragmentReference';
+import { IsographEnvironment } from './IsographEnvironment';
+/**
+ * Read the data from a fragment reference and subscribe to updates.
+ * Does not pass the data to the fragment reference's resolver function.
+ */
+export declare function useReadAndSubscribe<TReadFromStore extends Object>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, any>): TReadFromStore;

package/dist/useReadAndSubscribe.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReadAndSubscribe = void 0;
+const react_1 = require("react");
+const read_1 = require("./read");
+const useRerenderOnChange_1 = require("./useRerenderOnChange");
+/**
+ * Read the data from a fragment reference and subscribe to updates.
+ * Does not pass the data to the fragment reference's resolver function.
+ */
+function useReadAndSubscribe(environment, fragmentReference) {
+    const [readOutDataAndRecords, setReadOutDataAndRecords] = (0, react_1.useState)(() => (0, read_1.readButDoNotEvaluate)(environment, fragmentReference));
+    (0, useRerenderOnChange_1.useRerenderOnChange)(environment, readOutDataAndRecords, fragmentReference, setReadOutDataAndRecords);
+    return readOutDataAndRecords.item;
+}
+exports.useReadAndSubscribe = useReadAndSubscribe;

package/dist/useRerenderOnChange.d.ts

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

package/dist/useRerenderOnChange.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRerenderOnChange = void 0;
+const react_1 = require("react");
+const cache_1 = require("./cache");
+// TODO add unit tests for this. Add integration tests that test
+// behavior when the encounteredRecords underneath a fragment change.
+function useRerenderOnChange(environment, encounteredDataAndRecords, fragmentReference, setEncounteredDataAndRecords) {
+    (0, react_1.useEffect)(() => {
+        return (0, cache_1.subscribe)(environment, encounteredDataAndRecords, fragmentReference, (newEncounteredDataAndRecords) => {
+            setEncounteredDataAndRecords(newEncounteredDataAndRecords);
+        });
+        // 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
+        //   environment
+        // - though maybe we need to include setEncounteredDataAndRecords in
+        //   the dependency array
+    }, []);
+}
+exports.useRerenderOnChange = useRerenderOnChange;

package/dist/useResult.js

@@ -2,12 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResult = void 0;
 const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
-const read_1 = require("./read");
-const useRerenderWhenEncounteredRecordChanges_1 = require("./useRerenderWhenEncounteredRecordChanges");
+const componentCache_1 = require("./componentCache");
+const useReadAndSubscribe_1 = require("./useReadAndSubscribe");
 function useResult(fragmentReference) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
-    const { item: data, encounteredRecords } = (0, read_1.read)(environment, fragmentReference);
-    (0, useRerenderWhenEncounteredRecordChanges_1.useRerenderWhenEncounteredRecordChanges)(environment, encounteredRecords);
-    return data;
+    switch (fragmentReference.readerArtifact.variant.kind) {
+        case 'Component': {
+            // @ts-expect-error
+            return (0, componentCache_1.getOrCreateCachedComponent)(environment, fragmentReference.readerArtifact.variant.componentName, fragmentReference);
+        }
+        case 'Eager': {
+            const data = (0, useReadAndSubscribe_1.useReadAndSubscribe)(environment, fragmentReference);
+            // @ts-expect-error resolver is incorrectly typed in ReaderArtifact
+            return fragmentReference.readerArtifact.resolver(data);
+        }
+    }
 }
 exports.useResult = useResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-d319cfe5",
+  "version": "0.0.0-main-b72868e3",
   "description": "Use Isograph with React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -16,8 +16,8 @@
     "prepack": "yarn run test && yarn run compile"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-d319cfe5",
-    "@isograph/react-disposable-state": "0.0.0-main-d319cfe5",
+    "@isograph/disposable-types": "0.0.0-main-b72868e3",
+    "@isograph/react-disposable-state": "0.0.0-main-b72868e3",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/src/FragmentReference.ts

@@ -5,6 +5,8 @@ import { ReaderArtifact } from './reader';
 // TODO type this better
 export type Variable = any;
 
+export type Variables = { readonly [index: string]: Variable };
+
 export type FragmentReference<
   TReadFromStore extends Object,
   TClientFieldValue,
@@ -12,7 +14,7 @@ export type FragmentReference<
   kind: 'FragmentReference';
   readerArtifact: ReaderArtifact<TReadFromStore, TClientFieldValue>;
   root: DataId;
-  variables: { [index: string]: Variable } | null;
+  variables: Variables | null;
   // TODO: We should instead have ReaderAst<TClientFieldProps>
   nestedRefetchQueries: RefetchQueryArtifactWrapper[];
 };