@isograph/react 0.0.0-main-0a7c1aef → 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,20 +1,30 @@
 /// <reference types="react" />
 import { ParentCache } from '@isograph/react-disposable-state';
 import { RetainedQuery } from './garbageCollection';
-type ComponentName = string;
-type StringifiedArgs = string;
+import { WithEncounteredRecords } from './read';
+import { FragmentReference } from './FragmentReference';
+export type ComponentOrFieldName = string;
+export type StringifiedArgs = string;
 type ComponentCache = {
     [key: DataId]: {
-        [key: ComponentName]: {
+        [key: ComponentOrFieldName]: {
             [key: StringifiedArgs]: React.FC<any>;
         };
     };
 };
-type CallbackAndRecords = {
-    callback: () => void;
-    records: 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 Subscriptions = Set<CallbackAndRecords>;
+type AnyRecordSubscription = {
+    readonly kind: 'AnyRecords';
+    readonly callback: () => void;
+};
+type Subscription = FragmentSubscription<Object> | AnyRecordSubscription;
+type Subscriptions = Set<Subscription>;
 type SuspenseCache = {
     [index: string]: ParentCache<any>;
 };

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[]): import("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,33 +2,32 @@
 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;
+    // 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;
-    const stringifiedArgs = JSON.stringify((0, cache_1.stableCopy)(variables));
-    cachedComponentsById[rootId] = (_a = cachedComponentsById[rootId]) !== null && _a !== void 0 ? _a : {};
-    const componentsByName = cachedComponentsById[rootId];
+    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,
-                });
-                (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`;
+            Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
             return Component;
         })();
     return byArgs[stringifiedArgs];

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

@@ -4,5 +4,4 @@ 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>): WithEncounteredRecords<TReadFromStore>;

package/dist/read.js

@@ -1,37 +1,9 @@
 "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) {
     var _a;
     const mutableEncounteredRecords = new Set();
@@ -164,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',
@@ -192,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',
@@ -235,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/reader.d.ts

@@ -1,6 +1,8 @@
+import { ComponentOrFieldName } from './IsographEnvironment';
 import { Arguments } from './util';
 export type ReaderArtifact<TReadFromStore extends Object, TClientFieldValue> = {
     kind: 'ReaderArtifact';
+    fieldName: ComponentOrFieldName;
     readerAst: ReaderAst<TReadFromStore>;
     resolver: (data: TReadFromStore, runtimeProps: any) => TClientFieldValue;
     variant: ReaderResolverVariant;

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-0a7c1aef",
+  "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-0a7c1aef",
-    "@isograph/react-disposable-state": "0.0.0-main-0a7c1aef",
+    "@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[];
 };

package/src/IsographEnvironment.tsx

@@ -1,19 +1,32 @@
 import { ParentCache } from '@isograph/react-disposable-state';
 import { RetainedQuery } from './garbageCollection';
+import { WithEncounteredRecords } from './read';
+import { FragmentReference } from './FragmentReference';
 
-type ComponentName = string;
-type StringifiedArgs = string;
+export type ComponentOrFieldName = string;
+export type StringifiedArgs = string;
 type ComponentCache = {
   [key: DataId]: {
-    [key: ComponentName]: { [key: StringifiedArgs]: React.FC<any> };
+    [key: ComponentOrFieldName]: { [key: StringifiedArgs]: React.FC<any> };
   };
 };
 
-type CallbackAndRecords = {
-  callback: () => void;
-  records: 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 Subscriptions = Set<CallbackAndRecords>;
+type AnyRecordSubscription = {
+  readonly kind: 'AnyRecords';
+  readonly callback: () => void;
+};
+
+type Subscription = FragmentSubscription<Object> | AnyRecordSubscription;
+type Subscriptions = Set<Subscription>;
 type SuspenseCache = { [index: string]: ParentCache<any> };
 
 export type IsographEnvironment = {

package/src/areEqualWithDeepComparison.ts

@@ -0,0 +1,78 @@
+export function areEqualWithDeepComparison(
+  oldItem: unknown,
+  newItem: unknown,
+): boolean {
+  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;
+}
+
+export function areEqualArraysWithDeepComparison(
+  oldItems: ReadonlyArray<unknown>,
+  newItems: ReadonlyArray<unknown>,
+): boolean {
+  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;
+}
+
+export function areEqualObjectsWithDeepComparison(
+  oldItemObject: object,
+  newItemObject: object,
+): boolean {
+  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;
+}

package/src/cache.ts

@@ -28,6 +28,9 @@ import {
 } from './entrypoint';
 import { ReaderLinkedField, ReaderScalarField } from './reader';
 import { Argument, ArgumentValue } from './util';
+import { WithEncounteredRecords, readButDoNotEvaluate } from './read';
+import { FragmentReference } from './FragmentReference';
+import { areEqualObjectsWithDeepComparison } from './areEqualWithDeepComparison';
 
 declare global {
   interface Window {
@@ -222,22 +225,41 @@ function normalizeData(
   return encounteredIds;
 }
 
-export function subscribe(
+export function subscribeToAnyChange(
   environment: IsographEnvironment,
-  encounteredRecords: Set<DataId> | null,
   callback: () => void,
 ): () => void {
-  const callbackAndRecords = {
+  const subscription = {
+    kind: 'AnyRecords',
     callback,
-    records: encounteredRecords,
-  };
-  environment.subscriptions.add(callbackAndRecords);
-  return () => environment.subscriptions.delete(callbackAndRecords);
+  } as const;
+  environment.subscriptions.add(subscription);
+  return () => environment.subscriptions.delete(subscription);
+}
+
+export function subscribe<TReadFromStore extends Object>(
+  environment: IsographEnvironment,
+  encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  fragmentReference: FragmentReference<TReadFromStore, any>,
+  callback: (
+    newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  ) => void,
+): () => void {
+  const fragmentSubscription = {
+    kind: 'FragmentSubscription',
+    callback,
+    encounteredDataAndRecords,
+    fragmentReference,
+  } as const;
+  // @ts-expect-error
+  environment.subscriptions.add(fragmentSubscription);
+  // @ts-expect-error
+  return () => environment.subscriptions.delete(fragmentSubscription);
 }
 
 export function onNextChange(environment: IsographEnvironment): Promise<void> {
   return new Promise((resolve) => {
-    const unsubscribe = subscribe(environment, null, () => {
+    const unsubscribe = subscribeToAnyChange(environment, () => {
       unsubscribe();
       resolve();
     });
@@ -248,11 +270,57 @@ function callSubscriptions(
   environment: IsographEnvironment,
   recordsEncounteredWhenNormalizing: Set<DataId>,
 ) {
-  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 = readButDoNotEvaluate(
+            environment,
+            subscription.fragmentReference,
+          );
+
+          if (
+            !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 _: never = subscription;
+        throw new Error('Unexpected case');
+      }
     }
   });
 }

package/src/componentCache.ts

@@ -1,51 +1,49 @@
 import { stableCopy } from './cache';
-import { RefetchQueryArtifactWrapper } from './entrypoint';
-import { IsographEnvironment, DataId } from './IsographEnvironment';
-import { readButDoNotEvaluate } from './read';
-import { ReaderArtifact } from './reader';
-import { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
+import { IsographEnvironment } from './IsographEnvironment';
+import { FragmentReference } from './FragmentReference';
+import { useReadAndSubscribe } from './useReadAndSubscribe';
 
 export function getOrCreateCachedComponent(
   environment: IsographEnvironment,
-  rootId: DataId,
   componentName: string,
-  readerArtifact: ReaderArtifact<any, any>,
-  variables: { [key: string]: string },
-  resolverRefetchQueries: RefetchQueryArtifactWrapper[],
-) {
+  fragmentReference: FragmentReference<any, any>,
+): React.FC<any> {
+  // 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;
-  const stringifiedArgs = JSON.stringify(stableCopy(variables));
-  cachedComponentsById[rootId] = cachedComponentsById[rootId] ?? {};
-  const componentsByName = cachedComponentsById[rootId];
+
+  cachedComponentsById[fragmentReference.root] =
+    cachedComponentsById[fragmentReference.root] ?? {};
+  const componentsByName = cachedComponentsById[fragmentReference.root];
+
   componentsByName[componentName] = componentsByName[componentName] ?? {};
   const byArgs = componentsByName[componentName];
+
+  const stringifiedArgs = JSON.stringify(
+    stableCopy(fragmentReference.variables),
+  );
   byArgs[stringifiedArgs] =
     byArgs[stringifiedArgs] ??
     (() => {
       function Component(additionalRuntimeProps: { [key: string]: any }) {
-        const { item: data, encounteredRecords } = readButDoNotEvaluate(
-          environment,
-          {
-            kind: 'FragmentReference',
-            readerArtifact: readerArtifact,
-            root: rootId,
-            variables,
-            nestedRefetchQueries: resolverRefetchQueries,
-          },
-        );
-
-        useRerenderWhenEncounteredRecordChanges(
-          environment,
-          encounteredRecords,
-        );
+        const data = 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`;
+      Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
       return Component;
     })();
   return byArgs[stringifiedArgs];

package/src/index.ts

@@ -47,7 +47,7 @@ export {
   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';
@@ -58,4 +58,4 @@ export {
   ArgumentValue,
   Arguments,
 } from './util';
-export { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
+export { useRerenderOnChange } from './useRerenderOnChange';

package/src/read.ts

@@ -15,48 +15,6 @@ export type WithEncounteredRecords<T> = {
   item: T;
 };
 
-export function read<TReadFromStore extends Object, TClientFieldValue>(
-  environment: IsographEnvironment,
-  fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
-): WithEncounteredRecords<TClientFieldValue> {
-  const variant = fragmentReference.readerArtifact.variant;
-  if (variant.kind === 'Eager') {
-    const mutableEncounteredRecords = new Set<DataId>();
-    const data = readData(
-      environment,
-      fragmentReference.readerArtifact.readerAst,
-      fragmentReference.root,
-      fragmentReference.variables ?? {},
-      fragmentReference.nestedRefetchQueries,
-      mutableEncounteredRecords,
-    );
-    if (data.kind === 'MissingData') {
-      throw 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: getOrCreateCachedComponent(
-        environment,
-        fragmentReference.root,
-        variant.componentName,
-        fragmentReference.readerArtifact,
-        fragmentReference.variables ?? {},
-        fragmentReference.nestedRefetchQueries,
-      ),
-      encounteredRecords: new Set(),
-    };
-  }
-  // Why can't Typescript realize that this is unreachable??
-  throw new Error('This is unreachable');
-}
-
 export function readButDoNotEvaluate<TReadFromStore extends Object>(
   environment: IsographEnvironment,
   reference: FragmentReference<TReadFromStore, unknown>,
@@ -245,9 +203,6 @@ function readData<TReadFromStore>(
           [],
           mutableEncounteredRecords,
         );
-        if (typeof window !== 'undefined' && window.__LOG) {
-          console.log('refetch field data', data, field);
-        }
         if (data.kind === 'MissingData') {
           return {
             kind: 'MissingData',
@@ -288,9 +243,6 @@ function readData<TReadFromStore>(
           [],
           mutableEncounteredRecords,
         );
-        if (typeof window !== 'undefined' && window.__LOG) {
-          console.log('refetch field data', data, field);
-        }
         if (data.kind === 'MissingData') {
           return {
             kind: 'MissingData',
@@ -345,11 +297,14 @@ function readData<TReadFromStore>(
         } else if (variant.kind === 'Component') {
           target[field.alias] = getOrCreateCachedComponent(
             environment,
-            root,
             variant.componentName,
-            field.readerArtifact,
-            variables,
-            resolverRefetchQueries,
+            {
+              kind: 'FragmentReference',
+              readerArtifact: field.readerArtifact,
+              root,
+              variables,
+              nestedRefetchQueries: resolverRefetchQueries,
+            } as const,
           );
         }
         break;

package/src/reader.ts

@@ -1,10 +1,13 @@
+import { ComponentOrFieldName } from './IsographEnvironment';
 import { Arguments } from './util';
 
 // TODO this should probably be at least three distinct types, for @component,
 // non-@component and refetch resolvers
 export type ReaderArtifact<TReadFromStore extends Object, TClientFieldValue> = {
   kind: 'ReaderArtifact';
+  fieldName: ComponentOrFieldName;
   readerAst: ReaderAst<TReadFromStore>;
+  // TODO move resolver into the variant
   resolver: (data: TReadFromStore, runtimeProps: any) => TClientFieldValue;
   variant: ReaderResolverVariant;
 };

package/src/tests/__isograph/Query/meName/reader.ts

@@ -25,6 +25,7 @@ const artifact: ReaderArtifact<
   Query__meName__outputType
 > = {
   kind: "ReaderArtifact",
+  fieldName: "meName",
   resolver: resolver as any,
   readerAst,
   variant: { kind: "Eager" },

package/src/tests/__isograph/Query/meNameSuccessor/reader.ts

@@ -47,6 +47,7 @@ const artifact: ReaderArtifact<
   Query__meNameSuccessor__outputType
 > = {
   kind: "ReaderArtifact",
+  fieldName: "meNameSuccessor",
   resolver: resolver as any,
   readerAst,
   variant: { kind: "Eager" },

package/src/tests/__isograph/Query/nodeField/reader.ts

@@ -30,6 +30,7 @@ const artifact: ReaderArtifact<
   Query__nodeField__outputType
 > = {
   kind: "ReaderArtifact",
+  fieldName: "nodeField",
   resolver: resolver as any,
   readerAst,
   variant: { kind: "Eager" },

package/src/useReadAndSubscribe.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { FragmentReference } from './FragmentReference';
+import { IsographEnvironment } from './IsographEnvironment';
+import { readButDoNotEvaluate } from './read';
+import { useRerenderOnChange } from './useRerenderOnChange';
+
+/**
+ * Read the data from a fragment reference and subscribe to updates.
+ * Does not pass the data to the fragment reference's resolver function.
+ */
+export function useReadAndSubscribe<TReadFromStore extends Object>(
+  environment: IsographEnvironment,
+  fragmentReference: FragmentReference<TReadFromStore, any>,
+): TReadFromStore {
+  const [readOutDataAndRecords, setReadOutDataAndRecords] = useState(() =>
+    readButDoNotEvaluate(environment, fragmentReference),
+  );
+  useRerenderOnChange(
+    environment,
+    readOutDataAndRecords,
+    fragmentReference,
+    setReadOutDataAndRecords,
+  );
+  return readOutDataAndRecords.item;
+}

package/src/useRerenderOnChange.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { IsographEnvironment } from './IsographEnvironment';
+import { subscribe } from './cache';
+import { WithEncounteredRecords } from './read';
+import { FragmentReference } from './FragmentReference';
+
+// 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>(
+  environment: IsographEnvironment,
+  encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  fragmentReference: FragmentReference<any, any>,
+  setEncounteredDataAndRecords: (
+    data: WithEncounteredRecords<TReadFromStore>,
+  ) => void,
+) {
+  useEffect(() => {
+    return 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
+  }, []);
+}

package/src/useResult.ts

@@ -1,19 +1,26 @@
 import { useIsographEnvironment } from './IsographEnvironmentProvider';
-import { read } from './read';
 import { FragmentReference } from './FragmentReference';
-import { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
+import { getOrCreateCachedComponent } from './componentCache';
+import { useReadAndSubscribe } from './useReadAndSubscribe';
 
 export function useResult<TReadFromStore extends Object, TClientFieldValue>(
   fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
 ): TClientFieldValue {
   const environment = useIsographEnvironment();
 
-  const { item: data, encounteredRecords } = read(
-    environment,
-    fragmentReference,
-  );
-
-  useRerenderWhenEncounteredRecordChanges(environment, encounteredRecords);
-
-  return data;
+  switch (fragmentReference.readerArtifact.variant.kind) {
+    case 'Component': {
+      // @ts-expect-error
+      return getOrCreateCachedComponent(
+        environment,
+        fragmentReference.readerArtifact.variant.componentName,
+        fragmentReference,
+      );
+    }
+    case 'Eager': {
+      const data = useReadAndSubscribe(environment, fragmentReference);
+      // @ts-expect-error resolver is incorrectly typed in ReaderArtifact
+      return fragmentReference.readerArtifact.resolver(data);
+    }
+  }
 }

package/dist/useRerenderWhenEncounteredRecordChanges.d.ts

@@ -1,2 +0,0 @@
-import { DataId, IsographEnvironment } from './IsographEnvironment';
-export declare function useRerenderWhenEncounteredRecordChanges(environment: IsographEnvironment, encounteredRecords: Set<DataId>): void;

package/dist/useRerenderWhenEncounteredRecordChanges.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRerenderWhenEncounteredRecordChanges = void 0;
-const react_1 = require("react");
-const cache_1 = require("./cache");
-function useRerenderWhenEncounteredRecordChanges(environment, encounteredRecords) {
-    const [, setState] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        return (0, cache_1.subscribe)(environment, encounteredRecords, () => {
-            return setState({});
-        });
-        // TODO this is probably buggy — we should re-evaluate the effect when
-        // encounteredRecords changes. However, it is not a stable object, so...
-        // how?
-    }, []);
-}
-exports.useRerenderWhenEncounteredRecordChanges = useRerenderWhenEncounteredRecordChanges;

package/src/useRerenderWhenEncounteredRecordChanges.ts

@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-import { DataId, IsographEnvironment } from './IsographEnvironment';
-import { subscribe } from './cache';
-
-export function useRerenderWhenEncounteredRecordChanges(
-  environment: IsographEnvironment,
-  encounteredRecords: Set<DataId>,
-) {
-  const [, setState] = useState<object | void>();
-  useEffect(() => {
-    return subscribe(environment, encounteredRecords, () => {
-      return setState({});
-    });
-    // TODO this is probably buggy — we should re-evaluate the effect when
-    // encounteredRecords changes. However, it is not a stable object, so...
-    // how?
-  }, []);
-}