@isograph/react 0.0.0-main-3779371d → 0.0.0-main-adc27d88

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

@@ -0,0 +1,43 @@
+import type {IsographEntrypoint, NormalizationAst, RefetchQueryArtifactWrapper} from '@isograph/react';
+import type {Query__meName__param, Query__meName__outputType} from './reader';
+import readerResolver from './reader';
+const nestedRefetchQueries: RefetchQueryArtifactWrapper[] = [];
+
+const queryText = 'query meName  {\
+  me {\
+    id,\
+    name,\
+  },\
+}';
+
+const normalizationAst: NormalizationAst = [
+  {
+    kind: "Linked",
+    fieldName: "me",
+    arguments: null,
+    selections: [
+      {
+        kind: "Scalar",
+        fieldName: "id",
+        arguments: null,
+      },
+      {
+        kind: "Scalar",
+        fieldName: "name",
+        arguments: null,
+      },
+    ],
+  },
+];
+const artifact: IsographEntrypoint<
+  Query__meName__param,
+  Query__meName__outputType
+> = {
+  kind: "Entrypoint",
+  queryText,
+  normalizationAst,
+  nestedRefetchQueries,
+  readerArtifact: readerResolver,
+};
+
+export default artifact;

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

@@ -0,0 +1,40 @@
+import type {ReaderArtifact, ReaderAst, 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>;
+
+const readerAst: ReaderAst<Query__meName__param> = [
+  {
+    kind: "Linked",
+    fieldName: "me",
+    alias: null,
+    arguments: null,
+    selections: [
+      {
+        kind: "Scalar",
+        fieldName: "name",
+        alias: null,
+        arguments: null,
+      },
+    ],
+  },
+];
+
+export type Query__meName__param = {
+  me: {
+    name: string,
+  },
+};
+
+const artifact: ReaderArtifact<
+  Query__meName__param,
+  Query__meName__outputType
+> = {
+  kind: "ReaderArtifact",
+  resolver: resolver as any,
+  readerAst,
+  variant: { kind: "Eager" },
+};
+
+export default artifact;

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

@@ -0,0 +1,79 @@
+import type {IsographEntrypoint, NormalizationAst, RefetchQueryArtifactWrapper} from '@isograph/react';
+import type {Query__meNameSuccessor__param, Query__meNameSuccessor__outputType} from './reader';
+import readerResolver from './reader';
+const nestedRefetchQueries: RefetchQueryArtifactWrapper[] = [];
+
+const queryText = 'query meNameSuccessor  {\
+  me {\
+    id,\
+    name,\
+    successor {\
+      id,\
+      successor {\
+        id,\
+        name,\
+      },\
+    },\
+  },\
+}';
+
+const normalizationAst: NormalizationAst = [
+  {
+    kind: "Linked",
+    fieldName: "me",
+    arguments: null,
+    selections: [
+      {
+        kind: "Scalar",
+        fieldName: "id",
+        arguments: null,
+      },
+      {
+        kind: "Scalar",
+        fieldName: "name",
+        arguments: null,
+      },
+      {
+        kind: "Linked",
+        fieldName: "successor",
+        arguments: null,
+        selections: [
+          {
+            kind: "Scalar",
+            fieldName: "id",
+            arguments: null,
+          },
+          {
+            kind: "Linked",
+            fieldName: "successor",
+            arguments: null,
+            selections: [
+              {
+                kind: "Scalar",
+                fieldName: "id",
+                arguments: null,
+              },
+              {
+                kind: "Scalar",
+                fieldName: "name",
+                arguments: null,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const artifact: IsographEntrypoint<
+  Query__meNameSuccessor__param,
+  Query__meNameSuccessor__outputType
+> = {
+  kind: "Entrypoint",
+  queryText,
+  normalizationAst,
+  nestedRefetchQueries,
+  readerArtifact: readerResolver,
+};
+
+export default artifact;

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

@@ -0,0 +1,67 @@
+import type {ReaderArtifact, ReaderAst, 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>;
+
+const readerAst: ReaderAst<Query__meNameSuccessor__param> = [
+  {
+    kind: "Linked",
+    fieldName: "me",
+    alias: null,
+    arguments: null,
+    selections: [
+      {
+        kind: "Scalar",
+        fieldName: "name",
+        alias: null,
+        arguments: null,
+      },
+      {
+        kind: "Linked",
+        fieldName: "successor",
+        alias: null,
+        arguments: null,
+        selections: [
+          {
+            kind: "Linked",
+            fieldName: "successor",
+            alias: null,
+            arguments: null,
+            selections: [
+              {
+                kind: "Scalar",
+                fieldName: "name",
+                alias: null,
+                arguments: null,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export type Query__meNameSuccessor__param = {
+  me: {
+    name: string,
+    successor: ({
+      successor: ({
+        name: string,
+      } | null),
+    } | null),
+  },
+};
+
+const artifact: ReaderArtifact<
+  Query__meNameSuccessor__param,
+  Query__meNameSuccessor__outputType
+> = {
+  kind: "ReaderArtifact",
+  resolver: resolver as any,
+  readerAst,
+  variant: { kind: "Eager" },
+};
+
+export default artifact;