@isograph/react 0.3.1 → 0.4.1

package/src/core/check.ts

@@ -4,7 +4,7 @@ import { Variables } from './FragmentReference';
 import {
   getLink,
   IsographEnvironment,
-  Link,
+  StoreLink,
   StoreRecord,
 } from './IsographEnvironment';
 import { logMessage } from './logging';
@@ -30,14 +30,14 @@ export type CheckResult =
     }
   | {
       kind: 'MissingData';
-      record: Link;
+      record: StoreLink;
     };
 
 export function check(
   environment: IsographEnvironment,
   normalizationAst: NormalizationAstNodes,
   variables: Variables,
-  root: Link,
+  root: StoreLink,
 ): CheckResult {
   const recordsById = (environment.store[root.__typename] ??= {});
   const newStoreRecord = (recordsById[root.__link] ??= {});
@@ -61,7 +61,7 @@ function checkFromRecord(
   normalizationAst: NormalizationAstNodes,
   variables: Variables,
   record: StoreRecord,
-  recordLink: Link,
+  recordLink: StoreLink,
 ): CheckResult {
   normalizationAstLoop: for (const normalizationAstNode of normalizationAst) {
     switch (normalizationAstNode.kind) {

package/src/core/componentCache.ts

@@ -16,7 +16,11 @@ export function getOrCreateCachedComponent(
   networkRequestOptions: NetworkRequestReaderOptions,
 ): React.FC<any> {
   // We create startUpdate outside of component to make it stable
-  const startUpdate = createStartUpdate(environment, fragmentReference);
+  const startUpdate = createStartUpdate(
+    environment,
+    fragmentReference,
+    networkRequestOptions,
+  );
 
   return (environment.componentCache[
     stableIdForFragmentReference(fragmentReference, componentName)
@@ -49,7 +53,8 @@ export function getOrCreateCachedComponent(
         additionalRuntimeProps,
       );
     }
-    Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
+    const idString = `(type: ${fragmentReference.root.__typename}, id: ${fragmentReference.root.__link})`;
+    Component.displayName = `${componentName} ${idString} @component`;
     return Component;
   })());
 }

package/src/core/entrypoint.ts

@@ -17,11 +17,39 @@ export type ReaderWithRefetchQueries<
   readonly nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[];
 };
 
+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 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 UnknownTReadFromStore,
@@ -30,10 +58,9 @@ export type IsographEntrypoint<
 > = {
   readonly kind: 'Entrypoint';
   readonly networkRequestInfo: NetworkRequestInfo<TNormalizationAst>;
-  readonly readerWithRefetchQueries: ReaderWithRefetchQueries<
-    TReadFromStore,
-    TClientFieldValue
-  >;
+  readonly readerWithRefetchQueries:
+    | ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
+    | ReaderWithRefetchQueriesLoader<TReadFromStore, TClientFieldValue>;
   readonly concreteType: TypeName;
 };
 

package/src/core/garbageCollection.ts

@@ -7,14 +7,14 @@ import {
   IsographEnvironment,
   IsographStore,
   StoreRecord,
-  type Link,
+  type StoreLink,
   type TypeName,
 } from './IsographEnvironment';
 
 export type RetainedQuery = {
   readonly normalizationAst: NormalizationAstNodes;
   readonly variables: {};
-  readonly root: Link;
+  readonly root: StoreLink;
 };
 
 export type DidUnretainSomeQuery = boolean;
@@ -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

@@ -11,7 +11,7 @@ import {
   IsographEnvironment,
   IsographStore,
   StoreRecord,
-  type Link,
+  type StoreLink,
 } from './IsographEnvironment';
 import { ReadDataResult } from './read';
 import { Arguments } from './util';
@@ -38,7 +38,7 @@ export type LogMessage =
   | {
       kind: 'ComponentRerendered';
       componentName: string;
-      rootLink: Link;
+      rootLink: StoreLink;
     }
   | {
       kind: 'MakeNetworkRequest';
@@ -61,7 +61,7 @@ export type LogMessage =
     }
   | {
       kind: 'MissingFieldHandlerCalled';
-      root: Link;
+      root: StoreLink;
       storeRecord: StoreRecord;
       fieldName: string;
       arguments: Arguments | null;
@@ -71,7 +71,7 @@ export type LogMessage =
       kind: 'DoneReading';
       response: ReadDataResult<any>;
       fieldName: string;
-      root: Link;
+      root: StoreLink;
     }
   | {
       kind: 'NonEntrypointReceived';
@@ -83,6 +83,18 @@ export type LogMessage =
     }
   | {
       kind: 'EnvironmentCreated';
+    }
+  | {
+      kind: 'StartUpdateError';
+      error: any;
+    }
+  | {
+      kind: 'StartUpdateComplete';
+      updatedIds: EncounteredIds;
+    }
+  | {
+      kind: 'ErrorEncounteredInWithErrorHandling';
+      error: any;
     };
 
 export type LogFunction = (logMessage: LogMessage) => void;

package/src/core/makeNetworkRequest.ts

@@ -4,6 +4,7 @@ import { check, DEFAULT_SHOULD_FETCH_VALUE, FetchOptions } from './check';
 import { getOrCreateCachedComponent } from './componentCache';
 import {
   IsographEntrypoint,
+  ReaderWithRefetchQueries,
   RefetchQueryNormalizationArtifact,
   type NormalizationAst,
   type NormalizationAstLoader,
@@ -19,7 +20,7 @@ import {
   retainQuery,
   unretainQuery,
 } from './garbageCollection';
-import { IsographEnvironment, Link, ROOT_ID } from './IsographEnvironment';
+import { IsographEnvironment, ROOT_ID, StoreLink } from './IsographEnvironment';
 import { logMessage } from './logging';
 import {
   AnyError,
@@ -35,18 +36,28 @@ let networkRequestId = 0;
 export function maybeMakeNetworkRequest<
   TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
+  TArtifact extends
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
   TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
 >(
   environment: IsographEnvironment,
-  artifact:
-    | RefetchQueryNormalizationArtifact
-    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
+  artifact: TArtifact,
   variables: ExtractParameters<TReadFromStore>,
-  fetchOptions?: FetchOptions<TClientFieldValue>,
+  readerWithRefetchQueries: PromiseWrapper<
+    ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
+  > | null,
+  fetchOptions: FetchOptions<TClientFieldValue> | null,
 ): ItemCleanupPair<PromiseWrapper<void, AnyError>> {
   switch (fetchOptions?.shouldFetch ?? DEFAULT_SHOULD_FETCH_VALUE) {
     case 'Yes': {
-      return makeNetworkRequest(environment, artifact, variables, fetchOptions);
+      return makeNetworkRequest(
+        environment,
+        artifact,
+        variables,
+        readerWithRefetchQueries,
+        fetchOptions,
+      );
     }
     case 'No': {
       return [wrapResolvedValue(undefined), () => {}];
@@ -77,6 +88,7 @@ export function maybeMakeNetworkRequest<
           environment,
           artifact,
           variables,
+          readerWithRefetchQueries,
           fetchOptions,
         );
       }
@@ -100,14 +112,18 @@ function loadNormalizationAst(
 export function makeNetworkRequest<
   TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
+  TArtifact extends
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
   TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
 >(
   environment: IsographEnvironment,
-  artifact:
-    | RefetchQueryNormalizationArtifact
-    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
+  artifact: TArtifact,
   variables: ExtractParameters<TReadFromStore>,
-  fetchOptions?: FetchOptions<TClientFieldValue>,
+  readerWithRefetchQueries: PromiseWrapper<
+    ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
+  > | null,
+  fetchOptions: FetchOptions<TClientFieldValue> | null,
 ): ItemCleanupPair<PromiseWrapper<void, AnyError>> {
   // TODO this should be a DataId and stored in the store
   const myNetworkRequestId = networkRequestId + '';
@@ -126,12 +142,13 @@ export function makeNetworkRequest<
   // This should be an observable, not a promise
   const promise = Promise.all([
     environment.networkFunction(
-      artifact.networkRequestInfo.queryText,
+      artifact.networkRequestInfo.operation,
       variables,
     ),
     loadNormalizationAst(artifact.networkRequestInfo.normalizationAst),
+    readerWithRefetchQueries?.promise,
   ])
-    .then(([networkResponse, normalizationAst]) => {
+    .then(([networkResponse, normalizationAst, readerWithRefetchQueries]) => {
       logMessage(environment, () => ({
         kind: 'ReceivedNetworkResponse',
         networkResponse,
@@ -154,9 +171,6 @@ export function makeNetworkRequest<
           normalizationAst.selections,
           networkResponse.data ?? {},
           variables,
-          artifact.kind === 'Entrypoint'
-            ? artifact.readerWithRefetchQueries.nestedRefetchQueries
-            : [],
           root,
         );
         const retainedQuery = {
@@ -178,6 +192,7 @@ export function makeNetworkRequest<
           environment,
           root,
           variables,
+          readerWithRefetchQueries,
         );
 
         try {
@@ -238,14 +253,18 @@ type NetworkRequestStatus =
 function readDataForOnComplete<
   TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
-  TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
->(
-  artifact:
+  TArtifact extends
     | RefetchQueryNormalizationArtifact
     | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
+  TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
+>(
+  artifact: TArtifact,
   environment: IsographEnvironment,
-  root: Link,
+  root: StoreLink,
   variables: ExtractParameters<TReadFromStore>,
+  readerWithRefetchQueries:
+    | ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
+    | undefined,
 ): TClientFieldValue | null {
   // An entrypoint, but not a RefetchQueryNormalizationArtifact, has a reader ASTs.
   // So, we can only pass data to onComplete if makeNetworkRequest was passed an entrypoint.
@@ -262,12 +281,17 @@ function readDataForOnComplete<
       suspendIfInFlight: false,
       throwOnNetworkError: false,
     };
+    const resolvedReaderWithRefetchQueries =
+      readerWithRefetchQueries as ReaderWithRefetchQueries<
+        TReadFromStore,
+        TClientFieldValue
+      >;
 
     const fragment: FragmentReference<TReadFromStore, TClientFieldValue> = {
       kind: 'FragmentReference',
       // TODO this smells.
       readerWithRefetchQueries: wrapResolvedValue(
-        artifact.readerWithRefetchQueries,
+        resolvedReaderWithRefetchQueries,
       ),
       root,
       variables,
@@ -278,7 +302,7 @@ function readDataForOnComplete<
       fragment,
       fakeNetworkRequestOptions,
     ).item;
-    const readerArtifact = artifact.readerWithRefetchQueries.readerArtifact;
+    const readerArtifact = resolvedReaderWithRefetchQueries.readerArtifact;
     switch (readerArtifact.kind) {
       case 'ComponentReaderArtifact': {
         // @ts-expect-error We should find a way to encode this in the type system:
@@ -293,7 +317,7 @@ function readDataForOnComplete<
               kind: 'ReaderWithRefetchQueries',
               readerArtifact: readerArtifact,
               nestedRefetchQueries:
-                artifact.readerWithRefetchQueries.nestedRefetchQueries,
+                resolvedReaderWithRefetchQueries.nestedRefetchQueries,
             }),
             root,
             variables,
@@ -311,7 +335,8 @@ function readDataForOnComplete<
                 startUpdate: getOrCreateCachedStartUpdate(
                   environment,
                   fragment,
-                  artifact.readerWithRefetchQueries.readerArtifact.fieldName,
+                  resolvedReaderWithRefetchQueries.readerArtifact.fieldName,
+                  fakeNetworkRequestOptions,
                 ),
               }
             : undefined),