@isograph/react 0.0.0-main-6b81bb01 → 0.0.0-main-d629a5be

package/dist/IsographEnvironment.d.ts

@@ -10,7 +10,11 @@ type ComponentCache = {
         };
     };
 };
-export type Subscriptions = Set<() => void>;
+type CallbackAndRecords = {
+    callback: () => void;
+    records: Set<DataId> | null;
+};
+type Subscriptions = Set<CallbackAndRecords>;
 type SuspenseCache = {
     [index: string]: ParentCache<any>;
 };
@@ -55,4 +59,5 @@ export declare function defaultMissingFieldHandler(_storeRecord: StoreRecord, _r
     [index: string]: any;
 } | null): Link | undefined;
 export declare function assertLink(link: DataTypeValue): Link | null | undefined;
+export declare function getLink(maybeLink: DataTypeValue): Link | null;
 export {};

package/dist/IsographEnvironment.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertLink = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = void 0;
+exports.getLink = exports.assertLink = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = void 0;
 exports.ROOT_ID = '__ROOT';
 const DEFAULT_GC_BUFFER_SIZE = 10;
 function createIsographEnvironment(store, networkFunction, missingFieldHandler) {
@@ -47,3 +47,13 @@ function assertLink(link) {
     throw new Error('Invalid link');
 }
 exports.assertLink = assertLink;
+function getLink(maybeLink) {
+    if (maybeLink != null &&
+        typeof maybeLink === 'object' &&
+        // @ts-expect-error this is safe
+        maybeLink.__link != null) {
+        return maybeLink;
+    }
+    return null;
+}
+exports.getLink = getLink;

package/dist/cache.d.ts

@@ -1,6 +1,6 @@
 import { ItemCleanupPair, ParentCache } from '@isograph/react-disposable-state';
 import { PromiseWrapper } from './PromiseWrapper';
-import { type IsographEnvironment } from './IsographEnvironment';
+import { DataId, type IsographEnvironment } from './IsographEnvironment';
 import { IsographEntrypoint, NormalizationLinkedField, NormalizationScalarField } from './entrypoint';
 import { ReaderLinkedField, ReaderScalarField } from './reader';
 declare global {
@@ -17,7 +17,7 @@ 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, callback: () => void): () => void;
+export declare function subscribe(environment: IsographEnvironment, encounteredRecords: Set<DataId> | null, callback: () => 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

@@ -100,45 +100,74 @@ function normalizeData(environment, normalizationAst, networkResponse, variables
     }
     normalizeDataIntoRecord(environment, normalizationAst, networkResponse, environment.store.__ROOT, IsographEnvironment_1.ROOT_ID, variables, nestedRefetchQueries, encounteredIds);
     if (typeof window !== 'undefined' && window.__LOG) {
-        console.log('after normalization', { store: environment.store });
+        console.log('after normalization', {
+            store: environment.store,
+            encounteredIds,
+        });
     }
-    callSubscriptions(environment);
+    callSubscriptions(environment, encounteredIds);
     return encounteredIds;
 }
-function subscribe(environment, callback) {
-    environment.subscriptions.add(callback);
-    return () => environment.subscriptions.delete(callback);
+function subscribe(environment, encounteredRecords, callback) {
+    const callbackAndRecords = {
+        callback,
+        records: encounteredRecords,
+    };
+    environment.subscriptions.add(callbackAndRecords);
+    return () => environment.subscriptions.delete(callbackAndRecords);
 }
 exports.subscribe = subscribe;
 function onNextChange(environment) {
     return new Promise((resolve) => {
-        const unsubscribe = subscribe(environment, () => {
+        const unsubscribe = subscribe(environment, null, () => {
             unsubscribe();
             resolve();
         });
     });
 }
 exports.onNextChange = onNextChange;
-function callSubscriptions(environment) {
-    environment.subscriptions.forEach((callback) => callback());
+function callSubscriptions(environment, recordsEncounteredWhenNormalizing) {
+    environment.subscriptions.forEach(({ callback, records }) => {
+        if (records === null) {
+            callback();
+        }
+        else if (hasOverlappingIds(recordsEncounteredWhenNormalizing, records)) {
+            callback();
+        }
+    });
+}
+function hasOverlappingIds(set1, set2) {
+    for (const id of set1) {
+        if (set2.has(id)) {
+            return true;
+        }
+    }
+    return false;
 }
 /**
  * Mutate targetParentRecord according to the normalizationAst and networkResponseParentRecord.
  */
 function normalizeDataIntoRecord(environment, normalizationAst, networkResponseParentRecord, targetParentRecord, targetParentRecordId, variables, nestedRefetchQueries, mutableEncounteredIds) {
-    mutableEncounteredIds.add(targetParentRecordId);
+    let recordHasBeenUpdated = false;
     for (const normalizationNode of normalizationAst) {
         switch (normalizationNode.kind) {
             case 'Scalar': {
-                normalizeScalarField(normalizationNode, networkResponseParentRecord, targetParentRecord, variables);
+                const scalarFieldResultedInChange = normalizeScalarField(normalizationNode, networkResponseParentRecord, targetParentRecord, variables);
+                recordHasBeenUpdated =
+                    recordHasBeenUpdated || scalarFieldResultedInChange;
                 break;
             }
             case 'Linked': {
-                normalizeLinkedField(environment, normalizationNode, networkResponseParentRecord, targetParentRecord, targetParentRecordId, variables, nestedRefetchQueries, mutableEncounteredIds);
+                const linkedFieldResultedInChange = normalizeLinkedField(environment, normalizationNode, networkResponseParentRecord, targetParentRecord, targetParentRecordId, variables, nestedRefetchQueries, mutableEncounteredIds);
+                recordHasBeenUpdated =
+                    recordHasBeenUpdated || linkedFieldResultedInChange;
                 break;
             }
         }
     }
+    if (recordHasBeenUpdated) {
+        mutableEncounteredIds.add(targetParentRecordId);
+    }
 }
 function normalizeScalarField(astNode, networkResponseParentRecord, targetStoreRecord, variables) {
     const networkResponseKey = getNetworkResponseKey(astNode);
@@ -146,7 +175,9 @@ function normalizeScalarField(astNode, networkResponseParentRecord, targetStoreR
     const parentRecordKey = getParentRecordKey(astNode, variables);
     if (networkResponseData == null ||
         isScalarOrEmptyArray(networkResponseData)) {
+        const existingValue = targetStoreRecord[parentRecordKey];
         targetStoreRecord[parentRecordKey] = networkResponseData;
+        return existingValue !== networkResponseData;
     }
     else {
         throw new Error('Unexpected object array when normalizing scalar');
@@ -159,9 +190,10 @@ function normalizeLinkedField(environment, astNode, networkResponseParentRecord,
     const networkResponseKey = getNetworkResponseKey(astNode);
     const networkResponseData = networkResponseParentRecord[networkResponseKey];
     const parentRecordKey = getParentRecordKey(astNode, variables);
+    const existingValue = targetParentRecord[parentRecordKey];
     if (networkResponseData == null) {
         targetParentRecord[parentRecordKey] = null;
-        return;
+        return existingValue !== null;
     }
     if (isScalarButNotEmptyArray(networkResponseData)) {
         throw new Error('Unexpected scalar network response when normalizing a linked field');
@@ -175,12 +207,34 @@ function normalizeLinkedField(environment, astNode, networkResponseParentRecord,
             dataIds.push({ __link: newStoreRecordId });
         }
         targetParentRecord[parentRecordKey] = dataIds;
+        return !dataIdsAreTheSame(existingValue, dataIds);
     }
     else {
         const newStoreRecordId = normalizeNetworkResponseObject(environment, astNode, networkResponseData, targetParentRecordId, variables, null, nestedRefetchQueries, mutableEncounteredIds);
         targetParentRecord[parentRecordKey] = {
             __link: newStoreRecordId,
         };
+        const link = (0, IsographEnvironment_1.getLink)(existingValue);
+        return (link === null || link === void 0 ? void 0 : link.__link) !== newStoreRecordId;
+    }
+}
+function dataIdsAreTheSame(existingValue, newDataIds) {
+    if (Array.isArray(existingValue)) {
+        if (newDataIds.length !== existingValue.length) {
+            return false;
+        }
+        for (let i = 0; i < newDataIds.length; i++) {
+            const maybeLink = (0, IsographEnvironment_1.getLink)(existingValue[i]);
+            if (maybeLink !== null) {
+                if (newDataIds[i].__link !== maybeLink.__link) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    else {
+        return false;
     }
 }
 function normalizeNetworkResponseObject(environment, astNode, networkResponseData, targetParentRecordId, variables, index, nestedRefetchQueries, mutableEncounteredIds) {

package/dist/componentCache.d.ts

@@ -2,6 +2,6 @@
 import { RefetchQueryArtifactWrapper } from './entrypoint';
 import { IsographEnvironment, DataId } from './IsographEnvironment';
 import { ReaderArtifact } from './reader';
-export declare function getOrCreateCachedComponent(environment: IsographEnvironment, root: DataId, componentName: string, readerArtifact: ReaderArtifact<any, any>, variables: {
+export declare function getOrCreateCachedComponent(environment: IsographEnvironment, rootId: DataId, componentName: string, readerArtifact: ReaderArtifact<any, any>, variables: {
     [key: string]: string;
 }, resolverRefetchQueries: RefetchQueryArtifactWrapper[]): import("react").FC<any>;

package/dist/componentCache.js

@@ -3,27 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOrCreateCachedComponent = void 0;
 const cache_1 = require("./cache");
 const read_1 = require("./read");
-function getOrCreateCachedComponent(environment, root, componentName, readerArtifact, variables, resolverRefetchQueries) {
+const useRerenderWhenEncounteredRecordChanges_1 = require("./useRerenderWhenEncounteredRecordChanges");
+function getOrCreateCachedComponent(environment, rootId, componentName, readerArtifact, variables, resolverRefetchQueries) {
     var _a, _b, _c;
     const cachedComponentsById = environment.componentCache;
     const stringifiedArgs = JSON.stringify((0, cache_1.stableCopy)(variables));
-    cachedComponentsById[root] = (_a = cachedComponentsById[root]) !== null && _a !== void 0 ? _a : {};
-    const componentsByName = cachedComponentsById[root];
+    cachedComponentsById[rootId] = (_a = cachedComponentsById[rootId]) !== null && _a !== void 0 ? _a : {};
+    const componentsByName = cachedComponentsById[rootId];
     componentsByName[componentName] = (_b = componentsByName[componentName]) !== null && _b !== void 0 ? _b : {};
     const byArgs = componentsByName[componentName];
     byArgs[stringifiedArgs] =
         (_c = byArgs[stringifiedArgs]) !== null && _c !== void 0 ? _c : (() => {
             function Component(additionalRuntimeProps) {
-                const data = (0, read_1.readButDoNotEvaluate)(environment, {
+                const { item: data, encounteredRecords } = (0, read_1.readButDoNotEvaluate)(environment, {
                     kind: 'FragmentReference',
                     readerArtifact: readerArtifact,
-                    root,
+                    root: rootId,
                     variables,
                     nestedRefetchQueries: resolverRefetchQueries,
                 });
+                (0, useRerenderWhenEncounteredRecordChanges_1.useRerenderWhenEncounteredRecordChanges)(environment, encounteredRecords);
+                if (typeof window !== 'undefined' && window.__LOG) {
+                    console.log('Component re-rendered: ' + componentName + ' ' + rootId);
+                }
                 return readerArtifact.resolver(data, additionalRuntimeProps);
             }
-            Component.displayName = `${componentName} (id: ${root}) @component`;
+            Component.displayName = `${componentName} (id: ${rootId}) @component`;
             return Component;
         })();
     return byArgs[stringifiedArgs];

package/dist/index.d.ts

@@ -12,3 +12,4 @@ 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';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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;
 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; } });
@@ -29,3 +29,5 @@ 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; } });

package/dist/read.d.ts

@@ -1,4 +1,8 @@
 import { FragmentReference } from './FragmentReference';
-import { IsographEnvironment } from './IsographEnvironment';
-export declare function read<TReadFromStore extends Object, TClientFieldValue>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>): TClientFieldValue;
-export declare function readButDoNotEvaluate<TReadFromStore extends Object>(environment: IsographEnvironment, reference: FragmentReference<TReadFromStore, unknown>): TReadFromStore;
+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>): WithEncounteredRecords<TReadFromStore>;

package/dist/read.js

@@ -8,18 +8,25 @@ function read(environment, fragmentReference) {
     var _a, _b;
     const variant = fragmentReference.readerArtifact.variant;
     if (variant.kind === 'Eager') {
-        const data = readData(environment, fragmentReference.readerArtifact.readerAst, fragmentReference.root, (_a = fragmentReference.variables) !== null && _a !== void 0 ? _a : {}, fragmentReference.nestedRefetchQueries);
+        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 {
-            // @ts-expect-error This not properly typed yet
-            return fragmentReference.readerArtifact.resolver(data.data);
+            return {
+                encounteredRecords: mutableEncounteredRecords,
+                // @ts-expect-error This not properly typed yet
+                item: fragmentReference.readerArtifact.resolver(data.data),
+            };
         }
     }
     else if (variant.kind === 'Component') {
-        // @ts-ignore
-        return (0, componentCache_1.getOrCreateCachedComponent)(environment, fragmentReference.root, variant.componentName, fragmentReference.readerArtifact, (_b = fragmentReference.variables) !== null && _b !== void 0 ? _b : {}, fragmentReference.nestedRefetchQueries);
+        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');
@@ -27,7 +34,8 @@ function read(environment, fragmentReference) {
 exports.read = read;
 function readButDoNotEvaluate(environment, reference) {
     var _a;
-    const response = readData(environment, reference.readerArtifact.readerAst, reference.root, (_a = reference.variables) !== null && _a !== void 0 ? _a : {}, reference.nestedRefetchQueries);
+    const mutableEncounteredRecords = new Set();
+    const response = readData(environment, reference.readerArtifact.readerAst, reference.root, (_a = reference.variables) !== null && _a !== void 0 ? _a : {}, reference.nestedRefetchQueries, mutableEncounteredRecords);
     if (typeof window !== 'undefined' && window.__LOG) {
         console.log('done reading', { response });
     }
@@ -35,18 +43,29 @@ function readButDoNotEvaluate(environment, reference) {
         throw (0, cache_1.onNextChange)(environment);
     }
     else {
-        return response.data;
+        return {
+            encounteredRecords: mutableEncounteredRecords,
+            item: response.data,
+        };
     }
 }
 exports.readButDoNotEvaluate = readButDoNotEvaluate;
-function readData(environment, ast, root, variables, nestedRefetchQueries) {
+function readData(environment, ast, root, variables, nestedRefetchQueries, mutableEncounteredRecords) {
     var _a, _b, _c, _d, _e;
+    mutableEncounteredRecords.add(root);
     let storeRecord = environment.store[root];
     if (storeRecord === undefined) {
-        return { kind: 'MissingData', reason: 'No record for root ' + root };
+        return {
+            kind: 'MissingData',
+            reason: 'No record for root ' + root,
+        };
     }
     if (storeRecord === null) {
-        return { kind: 'Success', data: null };
+        return {
+            kind: 'Success',
+            data: null,
+            encounteredRecords: mutableEncounteredRecords,
+        };
     }
     let target = {};
     for (const field of ast) {
@@ -87,7 +106,7 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
                             results.push(null);
                             continue;
                         }
-                        const result = readData(environment, field.selections, link.__link, variables, nestedRefetchQueries);
+                        const result = readData(environment, field.selections, link.__link, variables, nestedRefetchQueries, mutableEncounteredRecords);
                         if (result.kind === 'MissingData') {
                             return {
                                 kind: 'MissingData',
@@ -130,7 +149,7 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
                     break;
                 }
                 const targetId = link.__link;
-                const data = readData(environment, field.selections, targetId, variables, nestedRefetchQueries);
+                const data = readData(environment, field.selections, targetId, variables, nestedRefetchQueries, mutableEncounteredRecords);
                 if (data.kind === 'MissingData') {
                     return {
                         kind: 'MissingData',
@@ -144,7 +163,7 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
             case 'RefetchField': {
                 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);
                 }
@@ -171,8 +190,8 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
             }
             case 'MutationField': {
                 const data = readData(environment, field.readerArtifact.readerAst, root, variables, 
-                // Refetch fields just read the id, and don't need refetch query artifacts
-                []);
+                // Mutation don't need refetch query artifacts
+                [], mutableEncounteredRecords);
                 if (typeof window !== 'undefined' && window.__LOG) {
                     console.log('refetch field data', data, field);
                 }
@@ -202,7 +221,7 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
                 const resolverRefetchQueries = usedRefetchQueries.map((index) => nestedRefetchQueries[index]);
                 const variant = field.readerArtifact.variant;
                 if (variant.kind === 'Eager') {
-                    const data = readData(environment, field.readerArtifact.readerAst, root, variables, resolverRefetchQueries);
+                    const data = readData(environment, field.readerArtifact.readerAst, root, variables, resolverRefetchQueries, mutableEncounteredRecords);
                     if (data.kind === 'MissingData') {
                         return {
                             kind: 'MissingData',
@@ -222,7 +241,11 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
             }
         }
     }
-    return { kind: 'Success', data: target };
+    return {
+        kind: 'Success',
+        data: target,
+        encounteredRecords: mutableEncounteredRecords,
+    };
 }
 function filterVariables(variables, allowedVariables) {
     const result = {};

package/dist/useRerenderWhenEncounteredRecordChanges.d.ts

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

package/dist/useRerenderWhenEncounteredRecordChanges.js

@@ -0,0 +1,14 @@
+"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({});
+        });
+    }, []);
+}
+exports.useRerenderWhenEncounteredRecordChanges = useRerenderWhenEncounteredRecordChanges;

package/dist/useResult.js

@@ -1,18 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResult = void 0;
-const react_1 = require("react");
 const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
-const cache_1 = require("./cache");
 const read_1 = require("./read");
+const useRerenderWhenEncounteredRecordChanges_1 = require("./useRerenderWhenEncounteredRecordChanges");
 function useResult(fragmentReference) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
-    const [, setState] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        return (0, cache_1.subscribe)(environment, () => {
-            return setState({});
-        });
-    }, []);
-    return (0, read_1.read)(environment, fragmentReference);
+    const { item: data, encounteredRecords } = (0, read_1.read)(environment, fragmentReference);
+    (0, useRerenderWhenEncounteredRecordChanges_1.useRerenderWhenEncounteredRecordChanges)(environment, encounteredRecords);
+    return data;
 }
 exports.useResult = useResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-6b81bb01",
+  "version": "0.0.0-main-d629a5be",
   "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-6b81bb01",
-    "@isograph/react-disposable-state": "0.0.0-main-6b81bb01",
+    "@isograph/disposable-types": "0.0.0-main-d629a5be",
+    "@isograph/react-disposable-state": "0.0.0-main-d629a5be",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/src/IsographEnvironment.tsx

@@ -9,7 +9,11 @@ type ComponentCache = {
   };
 };
 
-export type Subscriptions = Set<() => void>;
+type CallbackAndRecords = {
+  callback: () => void;
+  records: Set<DataId> | null;
+};
+type Subscriptions = Set<CallbackAndRecords>;
 type SuspenseCache = { [index: string]: ParentCache<any> };
 
 export type IsographEnvironment = {
@@ -126,3 +130,15 @@ export function assertLink(link: DataTypeValue): Link | null | undefined {
   }
   throw new Error('Invalid link');
 }
+
+export function getLink(maybeLink: DataTypeValue): Link | null {
+  if (
+    maybeLink != null &&
+    typeof maybeLink === 'object' &&
+    // @ts-expect-error this is safe
+    maybeLink.__link != null
+  ) {
+    return maybeLink as any;
+  }
+  return null;
+}

package/src/cache.ts

@@ -10,6 +10,8 @@ import {
   StoreRecord,
   Link,
   type IsographEnvironment,
+  DataTypeValue,
+  getLink,
 } from './IsographEnvironment';
 import {
   RetainedQuery,
@@ -211,31 +213,57 @@ function normalizeData(
     encounteredIds,
   );
   if (typeof window !== 'undefined' && window.__LOG) {
-    console.log('after normalization', { store: environment.store });
+    console.log('after normalization', {
+      store: environment.store,
+      encounteredIds,
+    });
   }
-  callSubscriptions(environment);
+  callSubscriptions(environment, encounteredIds);
   return encounteredIds;
 }
 
 export function subscribe(
   environment: IsographEnvironment,
+  encounteredRecords: Set<DataId> | null,
   callback: () => void,
 ): () => void {
-  environment.subscriptions.add(callback);
-  return () => environment.subscriptions.delete(callback);
+  const callbackAndRecords = {
+    callback,
+    records: encounteredRecords,
+  };
+  environment.subscriptions.add(callbackAndRecords);
+  return () => environment.subscriptions.delete(callbackAndRecords);
 }
 
 export function onNextChange(environment: IsographEnvironment): Promise<void> {
   return new Promise((resolve) => {
-    const unsubscribe = subscribe(environment, () => {
+    const unsubscribe = subscribe(environment, null, () => {
       unsubscribe();
       resolve();
     });
   });
 }
 
-function callSubscriptions(environment: IsographEnvironment) {
-  environment.subscriptions.forEach((callback) => callback());
+function callSubscriptions(
+  environment: IsographEnvironment,
+  recordsEncounteredWhenNormalizing: Set<DataId>,
+) {
+  environment.subscriptions.forEach(({ callback, records }) => {
+    if (records === null) {
+      callback();
+    } else if (hasOverlappingIds(recordsEncounteredWhenNormalizing, records)) {
+      callback();
+    }
+  });
+}
+
+function hasOverlappingIds(set1: Set<DataId>, set2: Set<DataId>): boolean {
+  for (const id of set1) {
+    if (set2.has(id)) {
+      return true;
+    }
+  }
+  return false;
 }
 
 /**
@@ -251,20 +279,22 @@ function normalizeDataIntoRecord(
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
   mutableEncounteredIds: Set<DataId>,
 ) {
-  mutableEncounteredIds.add(targetParentRecordId);
+  let recordHasBeenUpdated = false;
   for (const normalizationNode of normalizationAst) {
     switch (normalizationNode.kind) {
       case 'Scalar': {
-        normalizeScalarField(
+        const scalarFieldResultedInChange = normalizeScalarField(
           normalizationNode,
           networkResponseParentRecord,
           targetParentRecord,
           variables,
         );
+        recordHasBeenUpdated =
+          recordHasBeenUpdated || scalarFieldResultedInChange;
         break;
       }
       case 'Linked': {
-        normalizeLinkedField(
+        const linkedFieldResultedInChange = normalizeLinkedField(
           environment,
           normalizationNode,
           networkResponseParentRecord,
@@ -274,18 +304,24 @@ function normalizeDataIntoRecord(
           nestedRefetchQueries,
           mutableEncounteredIds,
         );
+        recordHasBeenUpdated =
+          recordHasBeenUpdated || linkedFieldResultedInChange;
         break;
       }
     }
   }
+  if (recordHasBeenUpdated) {
+    mutableEncounteredIds.add(targetParentRecordId);
+  }
 }
 
+type RecordHasBeenUpdated = boolean;
 function normalizeScalarField(
   astNode: NormalizationScalarField,
   networkResponseParentRecord: NetworkResponseObject,
   targetStoreRecord: StoreRecord,
   variables: { [index: string]: string },
-) {
+): RecordHasBeenUpdated {
   const networkResponseKey = getNetworkResponseKey(astNode);
   const networkResponseData = networkResponseParentRecord[networkResponseKey];
   const parentRecordKey = getParentRecordKey(astNode, variables);
@@ -294,7 +330,9 @@ function normalizeScalarField(
     networkResponseData == null ||
     isScalarOrEmptyArray(networkResponseData)
   ) {
+    const existingValue = targetStoreRecord[parentRecordKey];
     targetStoreRecord[parentRecordKey] = networkResponseData;
+    return existingValue !== networkResponseData;
   } else {
     throw new Error('Unexpected object array when normalizing scalar');
   }
@@ -312,14 +350,15 @@ function normalizeLinkedField(
   variables: { [index: string]: string },
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
   mutableEncounteredIds: Set<DataId>,
-) {
+): RecordHasBeenUpdated {
   const networkResponseKey = getNetworkResponseKey(astNode);
   const networkResponseData = networkResponseParentRecord[networkResponseKey];
   const parentRecordKey = getParentRecordKey(astNode, variables);
+  const existingValue = targetParentRecord[parentRecordKey];
 
   if (networkResponseData == null) {
     targetParentRecord[parentRecordKey] = null;
-    return;
+    return existingValue !== null;
   }
 
   if (isScalarButNotEmptyArray(networkResponseData)) {
@@ -347,6 +386,7 @@ function normalizeLinkedField(
       dataIds.push({ __link: newStoreRecordId });
     }
     targetParentRecord[parentRecordKey] = dataIds;
+    return !dataIdsAreTheSame(existingValue, dataIds);
   } else {
     const newStoreRecordId = normalizeNetworkResponseObject(
       environment,
@@ -358,9 +398,34 @@ function normalizeLinkedField(
       nestedRefetchQueries,
       mutableEncounteredIds,
     );
+
     targetParentRecord[parentRecordKey] = {
       __link: newStoreRecordId,
     };
+    const link = getLink(existingValue);
+    return link?.__link !== newStoreRecordId;
+  }
+}
+
+function dataIdsAreTheSame(
+  existingValue: DataTypeValue,
+  newDataIds: Link[],
+): boolean {
+  if (Array.isArray(existingValue)) {
+    if (newDataIds.length !== existingValue.length) {
+      return false;
+    }
+    for (let i = 0; i < newDataIds.length; i++) {
+      const maybeLink = getLink(existingValue[i]);
+      if (maybeLink !== null) {
+        if (newDataIds[i].__link !== maybeLink.__link) {
+          return false;
+        }
+      }
+    }
+    return true;
+  } else {
+    return false;
   }
 }
 

package/src/componentCache.ts

@@ -3,10 +3,11 @@ import { RefetchQueryArtifactWrapper } from './entrypoint';
 import { IsographEnvironment, DataId } from './IsographEnvironment';
 import { readButDoNotEvaluate } from './read';
 import { ReaderArtifact } from './reader';
+import { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
 
 export function getOrCreateCachedComponent(
   environment: IsographEnvironment,
-  root: DataId,
+  rootId: DataId,
   componentName: string,
   readerArtifact: ReaderArtifact<any, any>,
   variables: { [key: string]: string },
@@ -14,25 +15,37 @@ export function getOrCreateCachedComponent(
 ) {
   const cachedComponentsById = environment.componentCache;
   const stringifiedArgs = JSON.stringify(stableCopy(variables));
-  cachedComponentsById[root] = cachedComponentsById[root] ?? {};
-  const componentsByName = cachedComponentsById[root];
+  cachedComponentsById[rootId] = cachedComponentsById[rootId] ?? {};
+  const componentsByName = cachedComponentsById[rootId];
   componentsByName[componentName] = componentsByName[componentName] ?? {};
   const byArgs = componentsByName[componentName];
   byArgs[stringifiedArgs] =
     byArgs[stringifiedArgs] ??
     (() => {
       function Component(additionalRuntimeProps: { [key: string]: any }) {
-        const data = readButDoNotEvaluate(environment, {
-          kind: 'FragmentReference',
-          readerArtifact: readerArtifact,
-          root,
-          variables,
-          nestedRefetchQueries: resolverRefetchQueries,
-        });
+        const { item: data, encounteredRecords } = readButDoNotEvaluate(
+          environment,
+          {
+            kind: 'FragmentReference',
+            readerArtifact: readerArtifact,
+            root: rootId,
+            variables,
+            nestedRefetchQueries: resolverRefetchQueries,
+          },
+        );
+
+        useRerenderWhenEncounteredRecordChanges(
+          environment,
+          encounteredRecords,
+        );
+
+        if (typeof window !== 'undefined' && window.__LOG) {
+          console.log('Component re-rendered: ' + componentName + ' ' + rootId);
+        }
 
         return readerArtifact.resolver(data, additionalRuntimeProps);
       }
-      Component.displayName = `${componentName} (id: ${root}) @component`;
+      Component.displayName = `${componentName} (id: ${rootId}) @component`;
       return Component;
     })();
   return byArgs[stringifiedArgs];

package/src/index.ts

@@ -58,3 +58,4 @@ export {
   ArgumentValue,
   Arguments,
 } from './util';
+export { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';

package/src/read.ts

@@ -10,35 +10,48 @@ import {
 } from './IsographEnvironment';
 import { ReaderAst } from './reader';
 
+export type WithEncounteredRecords<T> = {
+  encounteredRecords: Set<DataId>;
+  item: T;
+};
+
 export function read<TReadFromStore extends Object, TClientFieldValue>(
   environment: IsographEnvironment,
   fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
-): 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 {
-      // @ts-expect-error This not properly typed yet
-      return fragmentReference.readerArtifact.resolver(data.data);
+      return {
+        encounteredRecords: mutableEncounteredRecords,
+        // @ts-expect-error This not properly typed yet
+        item: fragmentReference.readerArtifact.resolver(data.data),
+      };
     }
   } else if (variant.kind === 'Component') {
-    // @ts-ignore
-    return getOrCreateCachedComponent(
-      environment,
-      fragmentReference.root,
-      variant.componentName,
-      fragmentReference.readerArtifact,
-      fragmentReference.variables ?? {},
-      fragmentReference.nestedRefetchQueries,
-    );
+    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');
@@ -47,13 +60,15 @@ export function read<TReadFromStore extends Object, TClientFieldValue>(
 export function readButDoNotEvaluate<TReadFromStore extends Object>(
   environment: IsographEnvironment,
   reference: FragmentReference<TReadFromStore, unknown>,
-): TReadFromStore {
+): WithEncounteredRecords<TReadFromStore> {
+  const mutableEncounteredRecords = new Set<DataId>();
   const response = readData(
     environment,
     reference.readerArtifact.readerAst,
     reference.root,
     reference.variables ?? {},
     reference.nestedRefetchQueries,
+    mutableEncounteredRecords,
   );
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('done reading', { response });
@@ -61,7 +76,10 @@ export function readButDoNotEvaluate<TReadFromStore extends Object>(
   if (response.kind === 'MissingData') {
     throw onNextChange(environment);
   } else {
-    return response.data;
+    return {
+      encounteredRecords: mutableEncounteredRecords,
+      item: response.data,
+    };
   }
 }
 
@@ -69,6 +87,7 @@ type ReadDataResult<TReadFromStore> =
   | {
       kind: 'Success';
       data: TReadFromStore;
+      encounteredRecords: Set<DataId>;
     }
   | {
       kind: 'MissingData';
@@ -82,14 +101,23 @@ function readData<TReadFromStore>(
   root: DataId,
   variables: { [index: string]: string },
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
+  mutableEncounteredRecords: Set<DataId>,
 ): ReadDataResult<TReadFromStore> {
+  mutableEncounteredRecords.add(root);
   let storeRecord = environment.store[root];
   if (storeRecord === undefined) {
-    return { kind: 'MissingData', reason: 'No record for root ' + root };
+    return {
+      kind: 'MissingData',
+      reason: 'No record for root ' + root,
+    };
   }
 
   if (storeRecord === null) {
-    return { kind: 'Success', data: null as any };
+    return {
+      kind: 'Success',
+      data: null as any,
+      encounteredRecords: mutableEncounteredRecords,
+    };
   }
 
   let target: { [index: string]: any } = {};
@@ -138,6 +166,7 @@ function readData<TReadFromStore>(
               link.__link,
               variables,
               nestedRefetchQueries,
+              mutableEncounteredRecords,
             );
             if (result.kind === 'MissingData') {
               return {
@@ -194,6 +223,7 @@ function readData<TReadFromStore>(
           targetId,
           variables,
           nestedRefetchQueries,
+          mutableEncounteredRecords,
         );
         if (data.kind === 'MissingData') {
           return {
@@ -213,6 +243,7 @@ function readData<TReadFromStore>(
           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);
@@ -253,8 +284,9 @@ function readData<TReadFromStore>(
           field.readerArtifact.readerAst,
           root,
           variables,
-          // Refetch fields just read the id, and don't need refetch query artifacts
+          // Mutation don't need refetch query artifacts
           [],
+          mutableEncounteredRecords,
         );
         if (typeof window !== 'undefined' && window.__LOG) {
           console.log('refetch field data', data, field);
@@ -298,6 +330,7 @@ function readData<TReadFromStore>(
             root,
             variables,
             resolverRefetchQueries,
+            mutableEncounteredRecords,
           );
           if (data.kind === 'MissingData') {
             return {
@@ -323,7 +356,11 @@ function readData<TReadFromStore>(
       }
     }
   }
-  return { kind: 'Success', data: target as any };
+  return {
+    kind: 'Success',
+    data: target as any,
+    encounteredRecords: mutableEncounteredRecords,
+  };
 }
 
 function filterVariables(

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

@@ -1,5 +1,6 @@
 import type {IsographEntrypoint, NormalizationAst, RefetchQueryArtifactWrapper} from '@isograph/react';
-import type {Query__meName__param, Query__meName__outputType} from './reader';
+import {Query__meName__param} from './param_type';
+import {Query__meName__outputType} from './output_type';
 import readerResolver from './reader';
 const nestedRefetchQueries: RefetchQueryArtifactWrapper[] = [];
 

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

@@ -0,0 +1,4 @@
+import type {ExtractSecondParam} from '@isograph/react';
+import { meNameField as resolver } from '../../../garbageCollection.test.ts';
+// the type, when read out (either via useLazyReference or via graph)
+export type Query__meName__outputType = ReturnType<typeof resolver>;

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

@@ -0,0 +1,6 @@
+
+export type Query__meName__param = {
+  me: {
+    name: string,
+  },
+};

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

@@ -1,9 +1,8 @@
-import type {ReaderArtifact, ReaderAst, ExtractSecondParam} from '@isograph/react';
+import type {ReaderArtifact, ReaderAst} from '@isograph/react';
+import { Query__meName__param } from './param_type.ts';
+import { Query__meName__outputType } from './output_type.ts';
 import { meNameField as resolver } from '../../../garbageCollection.test.ts';
 
-// the type, when read out (either via useLazyReference or via graph)
-export type Query__meName__outputType = ReturnType<typeof resolver>;
-
 const readerAst: ReaderAst<Query__meName__param> = [
   {
     kind: "Linked",
@@ -21,12 +20,6 @@ const readerAst: ReaderAst<Query__meName__param> = [
   },
 ];
 
-export type Query__meName__param = {
-  me: {
-    name: string,
-  },
-};
-
 const artifact: ReaderArtifact<
   Query__meName__param,
   Query__meName__outputType

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

@@ -1,5 +1,6 @@
 import type {IsographEntrypoint, NormalizationAst, RefetchQueryArtifactWrapper} from '@isograph/react';
-import type {Query__meNameSuccessor__param, Query__meNameSuccessor__outputType} from './reader';
+import {Query__meNameSuccessor__param} from './param_type';
+import {Query__meNameSuccessor__outputType} from './output_type';
 import readerResolver from './reader';
 const nestedRefetchQueries: RefetchQueryArtifactWrapper[] = [];
 

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

@@ -0,0 +1,4 @@
+import type {ExtractSecondParam} from '@isograph/react';
+import { meNameField as resolver } from '../../../meNameSuccessor.ts';
+// the type, when read out (either via useLazyReference or via graph)
+export type Query__meNameSuccessor__outputType = ReturnType<typeof resolver>;

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

@@ -0,0 +1,11 @@
+
+export type Query__meNameSuccessor__param = {
+  me: {
+    name: string,
+    successor: ({
+      successor: ({
+        name: string,
+      } | null),
+    } | null),
+  },
+};

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

@@ -1,9 +1,8 @@
-import type {ReaderArtifact, ReaderAst, ExtractSecondParam} from '@isograph/react';
+import type {ReaderArtifact, ReaderAst} from '@isograph/react';
+import { Query__meNameSuccessor__param } from './param_type.ts';
+import { Query__meNameSuccessor__outputType } from './output_type.ts';
 import { meNameField as resolver } from '../../../meNameSuccessor.ts';
 
-// the type, when read out (either via useLazyReference or via graph)
-export type Query__meNameSuccessor__outputType = ReturnType<typeof resolver>;
-
 const readerAst: ReaderAst<Query__meNameSuccessor__param> = [
   {
     kind: "Linked",
@@ -43,17 +42,6 @@ const readerAst: ReaderAst<Query__meNameSuccessor__param> = [
   },
 ];
 
-export type Query__meNameSuccessor__param = {
-  me: {
-    name: string,
-    successor: ({
-      successor: ({
-        name: string,
-      } | null),
-    } | null),
-  },
-};
-
 const artifact: ReaderArtifact<
   Query__meNameSuccessor__param,
   Query__meNameSuccessor__outputType

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

@@ -1,5 +1,6 @@
 import type {IsographEntrypoint, NormalizationAst, RefetchQueryArtifactWrapper} from '@isograph/react';
-import type {Query__nodeField__param, Query__nodeField__outputType} from './reader';
+import {Query__nodeField__param} from './param_type';
+import {Query__nodeField__outputType} from './output_type';
 import readerResolver from './reader';
 const nestedRefetchQueries: RefetchQueryArtifactWrapper[] = [];
 

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

@@ -0,0 +1,4 @@
+import type {ExtractSecondParam} from '@isograph/react';
+import { nodeField as resolver } from '../../../nodeQuery.ts';
+// the type, when read out (either via useLazyReference or via graph)
+export type Query__nodeField__outputType = ReturnType<typeof resolver>;

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

@@ -0,0 +1,6 @@
+
+export type Query__nodeField__param = {
+  node: ({
+    id: string,
+  } | null),
+};

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

@@ -1,9 +1,8 @@
-import type {ReaderArtifact, ReaderAst, ExtractSecondParam} from '@isograph/react';
+import type {ReaderArtifact, ReaderAst} from '@isograph/react';
+import { Query__nodeField__param } from './param_type.ts';
+import { Query__nodeField__outputType } from './output_type.ts';
 import { nodeField as resolver } from '../../../nodeQuery.ts';
 
-// the type, when read out (either via useLazyReference or via graph)
-export type Query__nodeField__outputType = ReturnType<typeof resolver>;
-
 const readerAst: ReaderAst<Query__nodeField__param> = [
   {
     kind: "Linked",
@@ -26,12 +25,6 @@ const readerAst: ReaderAst<Query__nodeField__param> = [
   },
 ];
 
-export type Query__nodeField__param = {
-  node: ({
-    id: string,
-  } | null),
-};
-
 const artifact: ReaderArtifact<
   Query__nodeField__param,
   Query__nodeField__outputType

package/src/tests/__isograph/iso.ts

@@ -1,10 +1,10 @@
 import type {IsographEntrypoint} from '@isograph/react';
-import { Query__meNameSuccessor__param } from './Query/meNameSuccessor/reader'
-import { Query__meName__param } from './Query/meName/reader'
-import { Query__nodeField__param } from './Query/nodeField/reader'
-import entrypoint_Query__meNameSuccessor from '../__isograph/Query/meNameSuccessor/entrypoint'
-import entrypoint_Query__meName from '../__isograph/Query/meName/entrypoint'
-import entrypoint_Query__nodeField from '../__isograph/Query/nodeField/entrypoint'
+import { Query__meNameSuccessor__param } from './Query/meNameSuccessor/param_type';
+import { Query__meName__param } from './Query/meName/param_type';
+import { Query__nodeField__param } from './Query/nodeField/param_type';
+import entrypoint_Query__meNameSuccessor from '../__isograph/Query/meNameSuccessor/entrypoint';
+import entrypoint_Query__meName from '../__isograph/Query/meName/entrypoint';
+import entrypoint_Query__nodeField from '../__isograph/Query/nodeField/entrypoint';
 
 type IdentityWithParam<TParam> = <TResolverReturn>(
   x: (param: TParam) => TResolverReturn

package/src/useRerenderWhenEncounteredRecordChanges.ts

@@ -0,0 +1,15 @@
+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({});
+    });
+  }, []);
+}

package/src/useResult.ts

@@ -1,20 +1,19 @@
-import { useEffect, useState } from 'react';
 import { useIsographEnvironment } from './IsographEnvironmentProvider';
-import { subscribe } from './cache';
 import { read } from './read';
 import { FragmentReference } from './FragmentReference';
+import { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
 
 export function useResult<TReadFromStore extends Object, TClientFieldValue>(
   fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
 ): TClientFieldValue {
   const environment = useIsographEnvironment();
 
-  const [, setState] = useState<object | void>();
-  useEffect(() => {
-    return subscribe(environment, () => {
-      return setState({});
-    });
-  }, []);
+  const { item: data, encounteredRecords } = read(
+    environment,
+    fragmentReference,
+  );
 
-  return read(environment, fragmentReference);
+  useRerenderWhenEncounteredRecordChanges(environment, encounteredRecords);
+
+  return data;
 }