@isograph/react 0.3.0 → 0.4.0

package/src/core/componentCache.ts

@@ -1,10 +1,13 @@
-import { stableCopy } from './cache';
-import { IsographEnvironment } from './IsographEnvironment';
-import { FragmentReference } from './FragmentReference';
 import { useReadAndSubscribe } from '../react/useReadAndSubscribe';
-import { NetworkRequestReaderOptions } from './read';
-import { readPromise } from './PromiseWrapper';
+import {
+  FragmentReference,
+  stableIdForFragmentReference,
+} from './FragmentReference';
+import { IsographEnvironment } from './IsographEnvironment';
 import { logMessage } from './logging';
+import { readPromise } from './PromiseWrapper';
+import { NetworkRequestReaderOptions } from './read';
+import { createStartUpdate } from './startUpdate';
 
 export function getOrCreateCachedComponent(
   environment: IsographEnvironment,
@@ -12,51 +15,45 @@ export function getOrCreateCachedComponent(
   fragmentReference: FragmentReference<any, any>,
   networkRequestOptions: NetworkRequestReaderOptions,
 ): 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 recordLink = fragmentReference.root.__link;
-
-  const componentsByName = (cachedComponentsById[recordLink] ??= {});
-
-  componentsByName[componentName] = componentsByName[componentName] ?? {};
-  const byArgs = componentsByName[componentName];
-
-  const stringifiedArgs = JSON.stringify(
-    stableCopy(fragmentReference.variables),
+  // We create startUpdate outside of component to make it stable
+  const startUpdate = createStartUpdate(
+    environment,
+    fragmentReference,
+    networkRequestOptions,
   );
-  byArgs[stringifiedArgs] =
-    byArgs[stringifiedArgs] ??
-    (() => {
-      function Component(additionalRuntimeProps: { [key: string]: any }) {
-        const readerWithRefetchQueries = readPromise(
-          fragmentReference.readerWithRefetchQueries,
-        );
-
-        const data = useReadAndSubscribe(
-          fragmentReference,
-          networkRequestOptions,
-          readerWithRefetchQueries.readerArtifact.readerAst,
-        );
-
-        logMessage(environment, {
-          kind: 'ComponentRerendered',
-          componentName,
-          rootLink: fragmentReference.root,
-        });
 
-        return readerWithRefetchQueries.readerArtifact.resolver(
-          {
-            data,
-            parameters: fragmentReference.variables,
-          },
-          additionalRuntimeProps,
-        );
-      }
-      Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
-      return Component;
-    })();
-  return byArgs[stringifiedArgs];
+  return (environment.componentCache[
+    stableIdForFragmentReference(fragmentReference, componentName)
+  ] ??= (() => {
+    function Component(additionalRuntimeProps: { [key: string]: any }) {
+      const readerWithRefetchQueries = readPromise(
+        fragmentReference.readerWithRefetchQueries,
+      );
+
+      const data = useReadAndSubscribe(
+        fragmentReference,
+        networkRequestOptions,
+        readerWithRefetchQueries.readerArtifact.readerAst,
+      );
+
+      logMessage(environment, () => ({
+        kind: 'ComponentRerendered',
+        componentName,
+        rootLink: fragmentReference.root,
+      }));
+
+      return readerWithRefetchQueries.readerArtifact.resolver(
+        {
+          data,
+          parameters: fragmentReference.variables,
+          startUpdate: readerWithRefetchQueries.readerArtifact.hasUpdatable
+            ? startUpdate
+            : undefined,
+        },
+        additionalRuntimeProps,
+      );
+    }
+    Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
+    return Component;
+  })());
 }

package/src/core/entrypoint.ts

@@ -1,9 +1,10 @@
+import type { UnknownTReadFromStore } from './FragmentReference';
 import type { TypeName } from './IsographEnvironment';
 import { TopLevelReaderArtifact } from './reader';
 import { Arguments } from './util';
 
 export type ReaderWithRefetchQueries<
-  TReadFromStore extends { parameters: object; data: object },
+  TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
 > = {
   readonly kind: 'ReaderWithRefetchQueries';
@@ -16,33 +17,61 @@ export type ReaderWithRefetchQueries<
   readonly nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[];
 };
 
-export type NetworkRequestInfo = {
+export type ReaderWithRefetchQueriesLoader<
+  TReadFromStore extends UnknownTReadFromStore,
+  TClientFieldValue,
+> = {
+  readonly kind: 'ReaderWithRefetchQueriesLoader';
+  readonly loader: () => Promise<
+    ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
+  >;
+};
+
+export type NetworkRequestInfo<TNormalizationAst> = {
   readonly kind: 'NetworkRequestInfo';
-  readonly queryText: string;
-  readonly normalizationAst: NormalizationAst;
+  readonly operation: IsographOperation | IsographPersistedOperation;
+  readonly normalizationAst: TNormalizationAst;
 };
+
+export type IsographOperation = {
+  readonly kind: 'Operation';
+  readonly text: string;
+};
+
+export type IsographPersistedOperation = {
+  readonly kind: 'PersistedOperation';
+  readonly operationId: string;
+  readonly extraInfo: IsographPersistedOperationExtraInfo | null;
+};
+
+export type IsographPersistedOperationExtraInfo = {
+  readonly kind: 'PersistedOperationExtraInfo';
+  readonly operationName: string | null;
+  readonly operationKind: 'Query' | 'Mutation' | 'Subscription';
+};
+
 // This type should be treated as an opaque type.
 export type IsographEntrypoint<
-  TReadFromStore extends { parameters: object; data: object },
+  TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
+  TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
 > = {
   readonly kind: 'Entrypoint';
-  readonly networkRequestInfo: NetworkRequestInfo;
-  readonly readerWithRefetchQueries: ReaderWithRefetchQueries<
-    TReadFromStore,
-    TClientFieldValue
-  >;
+  readonly networkRequestInfo: NetworkRequestInfo<TNormalizationAst>;
+  readonly readerWithRefetchQueries:
+    | ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
+    | ReaderWithRefetchQueriesLoader<TReadFromStore, TClientFieldValue>;
   readonly concreteType: TypeName;
 };
 
 export type IsographEntrypointLoader<
-  TReadFromStore extends { parameters: object; data: object },
+  TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
 > = {
   readonly kind: 'EntrypointLoader';
   readonly typeAndField: string;
   readonly loader: () => Promise<
-    IsographEntrypoint<TReadFromStore, TClientFieldValue>
+    IsographEntrypoint<TReadFromStore, TClientFieldValue, NormalizationAst>
   >;
 };
 
@@ -50,7 +79,18 @@ export type NormalizationAstNode =
   | NormalizationScalarField
   | NormalizationLinkedField
   | NormalizationInlineFragment;
-export type NormalizationAst = ReadonlyArray<NormalizationAstNode>;
+
+export type NormalizationAstNodes = ReadonlyArray<NormalizationAstNode>;
+
+export type NormalizationAst = {
+  readonly kind: 'NormalizationAst';
+  readonly selections: NormalizationAstNodes;
+};
+
+export type NormalizationAstLoader = {
+  readonly kind: 'NormalizationAstLoader';
+  readonly loader: () => Promise<NormalizationAst>;
+};
 
 export type NormalizationScalarField = {
   readonly kind: 'Scalar';
@@ -62,20 +102,20 @@ export type NormalizationLinkedField = {
   readonly kind: 'Linked';
   readonly fieldName: string;
   readonly arguments: Arguments | null;
-  readonly selections: NormalizationAst;
+  readonly selections: NormalizationAstNodes;
   readonly concreteType: TypeName | null;
 };
 
 export type NormalizationInlineFragment = {
   readonly kind: 'InlineFragment';
   readonly type: string;
-  readonly selections: NormalizationAst;
+  readonly selections: NormalizationAstNodes;
 };
 
 // This is more like an entrypoint, but one specifically for a refetch query/mutation
 export type RefetchQueryNormalizationArtifact = {
   readonly kind: 'RefetchQuery';
-  readonly networkRequestInfo: NetworkRequestInfo;
+  readonly networkRequestInfo: NetworkRequestInfo<NormalizationAst>;
   readonly concreteType: TypeName;
 };
 
@@ -86,21 +126,26 @@ export type RefetchQueryNormalizationArtifactWrapper = {
 };
 
 export function assertIsEntrypoint<
-  TReadFromStore extends { parameters: object; data: object },
+  TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
+  TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
 >(
   value:
-    | IsographEntrypoint<TReadFromStore, TClientFieldValue>
+    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>
     | ((_: any) => any)
     // Temporarily, allow any here. Once we automatically provide
     // types to entrypoints, we probably don't need this.
     | any,
-): asserts value is IsographEntrypoint<TReadFromStore, TClientFieldValue> {
+): asserts value is IsographEntrypoint<
+  TReadFromStore,
+  TClientFieldValue,
+  TNormalizationAst
+> {
   if (typeof value === 'function') throw new Error('Not a string');
 }
 
 export type ExtractReadFromStore<Type> =
-  Type extends IsographEntrypoint<infer X, any> ? X : never;
+  Type extends IsographEntrypoint<infer X, any, any> ? X : never;
 export type ExtractResolverResult<Type> =
-  Type extends IsographEntrypoint<any, infer X> ? X : never;
+  Type extends IsographEntrypoint<any, infer X, any> ? X : never;
 export type ExtractProps<Type> = Type extends React.FC<infer X> ? X : never;

package/src/core/garbageCollection.ts

@@ -1,23 +1,23 @@
+import { getParentRecordKey } from './cache';
+import { NormalizationAstNodes } from './entrypoint';
 import { Variables } from './FragmentReference';
 import {
+  assertLink,
   DataId,
   IsographEnvironment,
   IsographStore,
   StoreRecord,
-  assertLink,
-  type Link,
+  type StoreLink,
   type TypeName,
 } from './IsographEnvironment';
-import { getParentRecordKey } from './cache';
-import { NormalizationAst } from './entrypoint';
 
 export type RetainedQuery = {
-  readonly normalizationAst: NormalizationAst;
+  readonly normalizationAst: NormalizationAstNodes;
   readonly variables: {};
-  readonly root: Link;
+  readonly root: StoreLink;
 };
 
-type DidUnretainSomeQuery = boolean;
+export type DidUnretainSomeQuery = boolean;
 export function unretainQuery(
   environment: IsographEnvironment,
   retainedQuery: RetainedQuery,
@@ -108,7 +108,7 @@ function recordReachableIdsFromRecord(
   store: IsographStore,
   currentRecord: StoreRecord,
   mutableRetainedIds: RetainedIds,
-  selections: NormalizationAst,
+  selections: NormalizationAstNodes,
   variables: Variables | null,
 ) {
   for (const selection of selections) {
@@ -117,7 +117,7 @@ function recordReachableIdsFromRecord(
         const linkKey = getParentRecordKey(selection, variables ?? {});
         const linkedFieldOrFields = currentRecord[linkKey];
 
-        const links: Link[] = [];
+        const links: StoreLink[] = [];
         if (Array.isArray(linkedFieldOrFields)) {
           for (const maybeLink of linkedFieldOrFields) {
             const link = assertLink(maybeLink);

package/src/core/logging.ts

@@ -1,31 +1,25 @@
 import { CleanupFn } from '@isograph/disposable-types';
-import {
-  IsographEnvironment,
-  IsographStore,
-  StoreRecord,
-  type Link,
-} from './IsographEnvironment';
+import { NetworkResponseObject, type EncounteredIds } from './cache';
+import { CheckResult } from './check';
 import {
   IsographEntrypoint,
-  NormalizationAst,
   RefetchQueryNormalizationArtifact,
+  type NormalizationAstNodes,
 } from './entrypoint';
 import { FragmentReference, Variables } from './FragmentReference';
-import { NetworkResponseObject, type EncounteredIds } from './cache';
-import { Arguments } from './util';
+import {
+  IsographEnvironment,
+  IsographStore,
+  StoreRecord,
+  type StoreLink,
+} from './IsographEnvironment';
 import { ReadDataResult } from './read';
-import { CheckResult } from './check';
+import { Arguments } from './util';
 
 export type LogMessage =
-  | {
-      kind: 'GettingSuspenseCacheItem';
-      index: string;
-      availableCacheItems: ReadonlyArray<string>;
-      found: boolean;
-    }
   | {
       kind: 'AboutToNormalize';
-      normalizationAst: NormalizationAst;
+      normalizationAst: NormalizationAstNodes;
       networkResponse: NetworkResponseObject;
       variables: Variables;
     }
@@ -44,13 +38,13 @@ export type LogMessage =
   | {
       kind: 'ComponentRerendered';
       componentName: string;
-      rootLink: Link;
+      rootLink: StoreLink;
     }
   | {
       kind: 'MakeNetworkRequest';
       artifact:
         | RefetchQueryNormalizationArtifact
-        | IsographEntrypoint<any, any>;
+        | IsographEntrypoint<any, any, any>;
       variables: Variables;
       networkRequestId: string;
     }
@@ -67,7 +61,7 @@ export type LogMessage =
     }
   | {
       kind: 'MissingFieldHandlerCalled';
-      root: Link;
+      root: StoreLink;
       storeRecord: StoreRecord;
       fieldName: string;
       arguments: Arguments | null;
@@ -76,6 +70,8 @@ export type LogMessage =
   | {
       kind: 'DoneReading';
       response: ReadDataResult<any>;
+      fieldName: string;
+      root: StoreLink;
     }
   | {
       kind: 'NonEntrypointReceived';
@@ -84,6 +80,21 @@ export type LogMessage =
   | {
       kind: 'EnvironmentCheck';
       result: CheckResult;
+    }
+  | {
+      kind: 'EnvironmentCreated';
+    }
+  | {
+      kind: 'StartUpdateError';
+      error: any;
+    }
+  | {
+      kind: 'StartUpdateComplete';
+      updatedIds: EncounteredIds;
+    }
+  | {
+      kind: 'ErrorEncounteredInWithErrorHandling';
+      error: any;
     };
 
 export type LogFunction = (logMessage: LogMessage) => void;
@@ -95,12 +106,15 @@ export type WrappedLogFunction = {
 
 export function logMessage(
   environment: IsographEnvironment,
-  message: LogMessage,
+  getMessage: () => LogMessage,
 ) {
-  for (const logger of environment.loggers) {
-    try {
-      logger.log(message);
-    } catch {}
+  if (environment.loggers.size > 0) {
+    const message = getMessage();
+    for (const logger of environment.loggers) {
+      try {
+        logger.log(message);
+      } catch {}
+    }
   }
 }