@isograph/react 0.0.0-main-0a7c1aef → 0.0.0-main-d319cfe5

package/dist/IsographEnvironment.d.ts

@@ -1,15 +1,19 @@
 /// <reference types="react" />
 import { ParentCache } from '@isograph/react-disposable-state';
 import { RetainedQuery } from './garbageCollection';
-type ComponentName = string;
+export type ComponentOrFieldName = string;
 type StringifiedArgs = string;
-type ComponentCache = {
+type ComponentAndEncounteredRecordsCache = {
     [key: DataId]: {
-        [key: ComponentName]: {
-            [key: StringifiedArgs]: React.FC<any>;
+        [key: ComponentOrFieldName]: {
+            [key: StringifiedArgs]: ComponentAndEncounteredRecords;
         };
     };
 };
+export type ComponentAndEncounteredRecords = {
+    component: React.FC<any>;
+    encounteredRecordsDuringLastRead: Set<DataId> | null;
+};
 type CallbackAndRecords = {
     callback: () => void;
     records: Set<DataId> | null;
@@ -22,12 +26,12 @@ export type IsographEnvironment = {
     store: IsographStore;
     networkFunction: IsographNetworkFunction;
     missingFieldHandler: MissingFieldHandler | null;
-    componentCache: ComponentCache;
     subscriptions: Subscriptions;
-    suspenseCache: SuspenseCache;
     retainedQueries: Set<RetainedQuery>;
     gcBuffer: Array<RetainedQuery>;
     gcBufferSize: number;
+    componentAndEncounteredRecordsCache: ComponentAndEncounteredRecordsCache;
+    suspenseCache: SuspenseCache;
 };
 export type MissingFieldHandler = (storeRecord: StoreRecord, root: DataId, fieldName: string, arguments_: {
     [index: string]: any;

package/dist/IsographEnvironment.js

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

package/dist/componentCache.d.ts

@@ -4,4 +4,4 @@ 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>;
+}, resolverRefetchQueries: RefetchQueryArtifactWrapper[]): React.FC<any>;

package/dist/componentCache.js

@@ -6,7 +6,7 @@ const read_1 = require("./read");
 const useRerenderWhenEncounteredRecordChanges_1 = require("./useRerenderWhenEncounteredRecordChanges");
 function getOrCreateCachedComponent(environment, rootId, componentName, readerArtifact, variables, resolverRefetchQueries) {
     var _a, _b, _c;
-    const cachedComponentsById = environment.componentCache;
+    const cachedComponentsById = environment.componentAndEncounteredRecordsCache;
     const stringifiedArgs = JSON.stringify((0, cache_1.stableCopy)(variables));
     cachedComponentsById[rootId] = (_a = cachedComponentsById[rootId]) !== null && _a !== void 0 ? _a : {};
     const componentsByName = cachedComponentsById[rootId];
@@ -21,7 +21,7 @@ function getOrCreateCachedComponent(environment, rootId, componentName, readerAr
                     root: rootId,
                     variables,
                     nestedRefetchQueries: resolverRefetchQueries,
-                });
+                }, byArgs[stringifiedArgs]);
                 (0, useRerenderWhenEncounteredRecordChanges_1.useRerenderWhenEncounteredRecordChanges)(environment, encounteredRecords);
                 if (typeof window !== 'undefined' && window.__LOG) {
                     console.log('Component re-rendered: ' + componentName + ' ' + rootId);
@@ -29,8 +29,11 @@ function getOrCreateCachedComponent(environment, rootId, componentName, readerAr
                 return readerArtifact.resolver(data, additionalRuntimeProps);
             }
             Component.displayName = `${componentName} (id: ${rootId}) @component`;
-            return Component;
+            return {
+                component: Component,
+                encounteredRecordsDuringLastRead: null,
+            };
         })();
-    return byArgs[stringifiedArgs];
+    return byArgs[stringifiedArgs].component;
 }
 exports.getOrCreateCachedComponent = getOrCreateCachedComponent;

package/dist/read.d.ts

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

package/dist/read.js

@@ -32,7 +32,7 @@ function read(environment, fragmentReference) {
     throw new Error('This is unreachable');
 }
 exports.read = read;
-function readButDoNotEvaluate(environment, reference) {
+function readButDoNotEvaluate(environment, reference, encounteredRecordCache) {
     var _a;
     const mutableEncounteredRecords = new Set();
     const response = readData(environment, reference.readerArtifact.readerAst, reference.root, (_a = reference.variables) !== null && _a !== void 0 ? _a : {}, reference.nestedRefetchQueries, mutableEncounteredRecords);
@@ -43,13 +43,33 @@ function readButDoNotEvaluate(environment, reference) {
         throw (0, cache_1.onNextChange)(environment);
     }
     else {
+        const encounteredRecords = compareAndUpdateEncounteredRecords(encounteredRecordCache, mutableEncounteredRecords);
         return {
-            encounteredRecords: mutableEncounteredRecords,
+            encounteredRecords,
             item: response.data,
         };
     }
 }
 exports.readButDoNotEvaluate = readButDoNotEvaluate;
+function compareAndUpdateEncounteredRecords(encounteredRecordCache, newEncounteredRecords) {
+    const { encounteredRecordsDuringLastRead } = encounteredRecordCache;
+    if (encounteredRecordsDuringLastRead == null ||
+        encounteredRecordsDuringLastRead.size != newEncounteredRecords.size) {
+        encounteredRecordCache.encounteredRecordsDuringLastRead =
+            newEncounteredRecords;
+        return newEncounteredRecords;
+    }
+    else {
+        for (const item of newEncounteredRecords) {
+            if (!encounteredRecordsDuringLastRead.has(item)) {
+                encounteredRecordCache.encounteredRecordsDuringLastRead =
+                    newEncounteredRecords;
+                return newEncounteredRecords;
+            }
+        }
+        return encounteredRecordsDuringLastRead;
+    }
+}
 function readData(environment, ast, root, variables, nestedRefetchQueries, mutableEncounteredRecords) {
     var _a, _b, _c, _d, _e;
     mutableEncounteredRecords.add(root);

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/useRerenderWhenEncounteredRecordChanges.js

@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRerenderWhenEncounteredRecordChanges = 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 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?
-    }, []);
+    }, [encounteredRecords]);
 }
 exports.useRerenderWhenEncounteredRecordChanges = useRerenderWhenEncounteredRecordChanges;

package/package.json

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

package/src/IsographEnvironment.tsx

@@ -1,14 +1,22 @@
 import { ParentCache } from '@isograph/react-disposable-state';
 import { RetainedQuery } from './garbageCollection';
 
-type ComponentName = string;
+export type ComponentOrFieldName = string;
 type StringifiedArgs = string;
-type ComponentCache = {
+type ComponentAndEncounteredRecordsCache = {
   [key: DataId]: {
-    [key: ComponentName]: { [key: StringifiedArgs]: React.FC<any> };
+    [key: ComponentOrFieldName]: {
+      [key: StringifiedArgs]: ComponentAndEncounteredRecords;
+    };
   };
 };
 
+export type ComponentAndEncounteredRecords = {
+  component: React.FC<any>;
+  // null if we have never read before
+  encounteredRecordsDuringLastRead: Set<DataId> | null;
+};
+
 type CallbackAndRecords = {
   callback: () => void;
   records: Set<DataId> | null;
@@ -20,12 +28,14 @@ export type IsographEnvironment = {
   store: IsographStore;
   networkFunction: IsographNetworkFunction;
   missingFieldHandler: MissingFieldHandler | null;
-  componentCache: ComponentCache;
   subscriptions: Subscriptions;
-  suspenseCache: SuspenseCache;
   retainedQueries: Set<RetainedQuery>;
   gcBuffer: Array<RetainedQuery>;
   gcBufferSize: number;
+
+  // These caches should be moved into the store somehow
+  componentAndEncounteredRecordsCache: ComponentAndEncounteredRecordsCache;
+  suspenseCache: SuspenseCache;
 };
 
 export type MissingFieldHandler = (
@@ -85,7 +95,7 @@ export function createIsographEnvironment(
     store,
     networkFunction,
     missingFieldHandler: missingFieldHandler ?? null,
-    componentCache: {},
+    componentAndEncounteredRecordsCache: {},
     subscriptions: new Set(),
     suspenseCache: {},
     retainedQueries: new Set(),

package/src/componentCache.ts

@@ -1,6 +1,10 @@
 import { stableCopy } from './cache';
 import { RefetchQueryArtifactWrapper } from './entrypoint';
-import { IsographEnvironment, DataId } from './IsographEnvironment';
+import {
+  IsographEnvironment,
+  DataId,
+  ComponentAndEncounteredRecords,
+} from './IsographEnvironment';
 import { readButDoNotEvaluate } from './read';
 import { ReaderArtifact } from './reader';
 import { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
@@ -12,8 +16,8 @@ export function getOrCreateCachedComponent(
   readerArtifact: ReaderArtifact<any, any>,
   variables: { [key: string]: string },
   resolverRefetchQueries: RefetchQueryArtifactWrapper[],
-) {
-  const cachedComponentsById = environment.componentCache;
+): React.FC<any> {
+  const cachedComponentsById = environment.componentAndEncounteredRecordsCache;
   const stringifiedArgs = JSON.stringify(stableCopy(variables));
   cachedComponentsById[rootId] = cachedComponentsById[rootId] ?? {};
   const componentsByName = cachedComponentsById[rootId];
@@ -21,7 +25,7 @@ export function getOrCreateCachedComponent(
   const byArgs = componentsByName[componentName];
   byArgs[stringifiedArgs] =
     byArgs[stringifiedArgs] ??
-    (() => {
+    ((): ComponentAndEncounteredRecords => {
       function Component(additionalRuntimeProps: { [key: string]: any }) {
         const { item: data, encounteredRecords } = readButDoNotEvaluate(
           environment,
@@ -32,6 +36,7 @@ export function getOrCreateCachedComponent(
             variables,
             nestedRefetchQueries: resolverRefetchQueries,
           },
+          byArgs[stringifiedArgs],
         );
 
         useRerenderWhenEncounteredRecordChanges(
@@ -46,7 +51,11 @@ export function getOrCreateCachedComponent(
         return readerArtifact.resolver(data, additionalRuntimeProps);
       }
       Component.displayName = `${componentName} (id: ${rootId}) @component`;
-      return Component;
+      return {
+        component: Component,
+        encounteredRecordsDuringLastRead: null,
+      };
     })();
-  return byArgs[stringifiedArgs];
+
+  return byArgs[stringifiedArgs].component;
 }

package/src/read.ts

@@ -4,6 +4,7 @@ import { RefetchQueryArtifactWrapper } from './entrypoint';
 import { FragmentReference } from './FragmentReference';
 import {
   assertLink,
+  ComponentAndEncounteredRecords,
   DataId,
   defaultMissingFieldHandler,
   IsographEnvironment,
@@ -60,6 +61,7 @@ export function read<TReadFromStore extends Object, TClientFieldValue>(
 export function readButDoNotEvaluate<TReadFromStore extends Object>(
   environment: IsographEnvironment,
   reference: FragmentReference<TReadFromStore, unknown>,
+  encounteredRecordCache: ComponentAndEncounteredRecords,
 ): WithEncounteredRecords<TReadFromStore> {
   const mutableEncounteredRecords = new Set<DataId>();
   const response = readData(
@@ -76,13 +78,42 @@ export function readButDoNotEvaluate<TReadFromStore extends Object>(
   if (response.kind === 'MissingData') {
     throw onNextChange(environment);
   } else {
+    const encounteredRecords = compareAndUpdateEncounteredRecords(
+      encounteredRecordCache,
+      mutableEncounteredRecords,
+    );
+
     return {
-      encounteredRecords: mutableEncounteredRecords,
+      encounteredRecords,
       item: response.data,
     };
   }
 }
 
+function compareAndUpdateEncounteredRecords(
+  encounteredRecordCache: ComponentAndEncounteredRecords,
+  newEncounteredRecords: Set<DataId>,
+): Set<DataId> {
+  const { encounteredRecordsDuringLastRead } = encounteredRecordCache;
+  if (
+    encounteredRecordsDuringLastRead == null ||
+    encounteredRecordsDuringLastRead.size != newEncounteredRecords.size
+  ) {
+    encounteredRecordCache.encounteredRecordsDuringLastRead =
+      newEncounteredRecords;
+    return newEncounteredRecords;
+  } else {
+    for (const item of newEncounteredRecords) {
+      if (!encounteredRecordsDuringLastRead.has(item)) {
+        encounteredRecordCache.encounteredRecordsDuringLastRead =
+          newEncounteredRecords;
+        return newEncounteredRecords;
+      }
+    }
+    return encounteredRecordsDuringLastRead;
+  }
+}
+
 type ReadDataResult<TReadFromStore> =
   | {
       kind: 'Success';

package/src/reader.ts

@@ -1,9 +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';
+  // The DataID of the parent + the fieldName + the variables are enough
+  // to uniquely identify a call to read(...) at a given time.
+  fieldName: ComponentOrFieldName;
   readerAst: ReaderAst<TReadFromStore>;
   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/useRerenderWhenEncounteredRecordChanges.ts

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import { DataId, IsographEnvironment } from './IsographEnvironment';
 import { subscribe } from './cache';
 
+// TODO add unit tests for this. Add integration tests that test
+// behavior when the encounteredRecords underneath a fragment change.
 export function useRerenderWhenEncounteredRecordChanges(
   environment: IsographEnvironment,
   encounteredRecords: Set<DataId>,
@@ -11,8 +13,5 @@ export function useRerenderWhenEncounteredRecordChanges(
     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?
-  }, []);
+  }, [encounteredRecords]);
 }