@isograph/react 0.4.3 → 0.5.0

package/src/core/makeNetworkRequest.ts

@@ -1,5 +1,10 @@
 import { ItemCleanupPair } from '@isograph/disposable-types';
-import { normalizeData } from './cache';
+import {
+  callSubscriptions,
+  normalizeData,
+  type EncounteredIds,
+  type NetworkResponseObject,
+} from './cache';
 import { check, DEFAULT_SHOULD_FETCH_VALUE, FetchOptions } from './check';
 import { getOrCreateCachedComponent } from './componentCache';
 import {
@@ -22,6 +27,13 @@ import {
 } from './garbageCollection';
 import { IsographEnvironment, ROOT_ID, StoreLink } from './IsographEnvironment';
 import { logMessage } from './logging';
+import {
+  addNetworkResponseStoreLayer,
+  addOptimisticNetworkResponseStoreLayer,
+  revertOptimisticStoreLayerAndMaybeReplace,
+  type OptimisticStoreLayer,
+  type StoreLayerWithData,
+} from './optimisticProxy';
 import {
   AnyError,
   PromiseWrapper,
@@ -36,18 +48,23 @@ let networkRequestId = 0;
 export function maybeMakeNetworkRequest<
   TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
-  TArtifact extends
-    | RefetchQueryNormalizationArtifact
-    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
   TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
+  TRawResponseType extends NetworkResponseObject,
 >(
   environment: IsographEnvironment,
-  artifact: TArtifact,
+  artifact:
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<
+        TReadFromStore,
+        TClientFieldValue,
+        TNormalizationAst,
+        TRawResponseType
+      >,
   variables: ExtractParameters<TReadFromStore>,
   readerWithRefetchQueries: PromiseWrapper<
     ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
   > | null,
-  fetchOptions: FetchOptions<TClientFieldValue> | null,
+  fetchOptions: FetchOptions<TClientFieldValue, TRawResponseType> | null,
 ): ItemCleanupPair<PromiseWrapper<void, AnyError>> {
   switch (fetchOptions?.shouldFetch ?? DEFAULT_SHOULD_FETCH_VALUE) {
     case 'Yes': {
@@ -60,7 +77,11 @@ export function maybeMakeNetworkRequest<
       );
     }
     case 'No': {
-      return [wrapResolvedValue(undefined), () => {}];
+      return retainQueryWithoutMakingNetworkRequest(
+        environment,
+        artifact,
+        variables,
+      );
     }
     case 'IfNecessary': {
       if (
@@ -68,7 +89,8 @@ export function maybeMakeNetworkRequest<
         'NormalizationAstLoader'
       ) {
         throw new Error(
-          'Using lazy loaded normalizationAst with shouldFetch: "IfNecessary" is not supported as it will lead to slower initial load time.',
+          'Using lazy loaded normalizationAst with shouldFetch: "IfNecessary" is ' +
+            'not supported as it will lead to a network waterfall.',
         );
       }
       const result = check(
@@ -82,7 +104,11 @@ export function maybeMakeNetworkRequest<
       );
 
       if (result.kind === 'EnoughData') {
-        return [wrapResolvedValue(undefined), () => {}];
+        return retainQueryWithoutMakingNetworkRequest(
+          environment,
+          artifact,
+          variables,
+        );
       } else {
         return makeNetworkRequest(
           environment,
@@ -96,38 +122,83 @@ export function maybeMakeNetworkRequest<
   }
 }
 
-function loadNormalizationAst(
-  normalizationAst: NormalizationAstLoader | NormalizationAst,
-) {
-  switch (normalizationAst.kind) {
-    case 'NormalizationAst': {
-      return normalizationAst;
-    }
-    case 'NormalizationAstLoader': {
-      return normalizationAst.loader();
-    }
-  }
+export function retainQueryWithoutMakingNetworkRequest<
+  TReadFromStore extends UnknownTReadFromStore,
+  TClientFieldValue,
+  TRawResponseType extends NetworkResponseObject,
+>(
+  environment: IsographEnvironment,
+  artifact:
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<
+        TReadFromStore,
+        TClientFieldValue,
+        NormalizationAst | NormalizationAstLoader,
+        TRawResponseType
+      >,
+  variables: ExtractParameters<TReadFromStore>,
+): ItemCleanupPair<PromiseWrapper<void, AnyError>> {
+  let status:
+    | NetworkRequestStatusUndisposedComplete
+    | NetworkRequestStatusDisposed = {
+    kind: 'UndisposedComplete',
+    retainedQuery: fetchNormalizationAstAndRetainArtifact(
+      environment,
+      artifact,
+      variables,
+    ),
+  };
+  return [
+    wrapResolvedValue(undefined),
+    () => {
+      if (status.kind !== 'Disposed') {
+        status = unretainAndGarbageCollect(environment, status);
+      }
+    },
+  ];
 }
 
 export function makeNetworkRequest<
   TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
-  TArtifact extends
-    | RefetchQueryNormalizationArtifact
-    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
   TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
+  TRawResponseType extends NetworkResponseObject,
 >(
   environment: IsographEnvironment,
-  artifact: TArtifact,
+  artifact:
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<
+        TReadFromStore,
+        TClientFieldValue,
+        TNormalizationAst,
+        TRawResponseType
+      >,
   variables: ExtractParameters<TReadFromStore>,
   readerWithRefetchQueries: PromiseWrapper<
     ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
   > | null,
-  fetchOptions: FetchOptions<TClientFieldValue> | null,
+  fetchOptions: FetchOptions<TClientFieldValue, TRawResponseType> | null,
 ): ItemCleanupPair<PromiseWrapper<void, AnyError>> {
   // TODO this should be a DataId and stored in the store
   const myNetworkRequestId = networkRequestId + '';
   networkRequestId++;
+  let status: NetworkRequestStatus = {
+    kind: 'UndisposedIncomplete',
+    retainedQuery: fetchNormalizationAstAndRetainArtifact(
+      environment,
+      artifact,
+      variables,
+    ),
+    optimistic:
+      fetchOptions?.optimisticNetworkResponse != null
+        ? makeOptimisticUpdate(
+            environment,
+            artifact,
+            variables,
+            fetchOptions?.optimisticNetworkResponse,
+          )
+        : null,
+  };
 
   logMessage(environment, () => ({
     kind: 'MakeNetworkRequest',
@@ -136,16 +207,13 @@ export function makeNetworkRequest<
     networkRequestId: myNetworkRequestId,
   }));
 
-  let status: NetworkRequestStatus = {
-    kind: 'UndisposedIncomplete',
-  };
   // This should be an observable, not a promise
   const promise = Promise.all([
     environment.networkFunction(
       artifact.networkRequestInfo.operation,
       variables,
     ),
-    loadNormalizationAst(artifact.networkRequestInfo.normalizationAst),
+    status.retainedQuery.normalizationAst.promise,
     readerWithRefetchQueries?.promise,
   ])
     .then(([networkResponse, normalizationAst, readerWithRefetchQueries]) => {
@@ -159,30 +227,56 @@ export function makeNetworkRequest<
         try {
           fetchOptions?.onError?.();
         } catch {}
-        throw new Error('GraphQL network response had errors', {
+        throw new Error('Network response had errors', {
           cause: networkResponse,
         });
       }
 
       const root = { __link: ROOT_ID, __typename: artifact.concreteType };
+
       if (status.kind === 'UndisposedIncomplete') {
-        normalizeData(
-          environment,
-          normalizationAst.selections,
-          networkResponse.data ?? {},
-          variables,
-          root,
-        );
-        const retainedQuery = {
-          normalizationAst: normalizationAst.selections,
-          variables,
-          root,
-        };
-        status = {
-          kind: 'UndisposedComplete',
-          retainedQuery,
-        };
-        retainQuery(environment, retainedQuery);
+        if (status.optimistic != null) {
+          status =
+            revertOptimisticStoreLayerAndMaybeReplaceIfUndisposedIncomplete(
+              environment,
+              status,
+              (storeLayer) =>
+                normalizeData(
+                  environment,
+                  storeLayer,
+                  normalizationAst.selections,
+                  networkResponse.data ?? {},
+                  variables,
+                  root,
+                  new Map(),
+                ),
+            );
+        } else {
+          const encounteredIds: EncounteredIds = new Map();
+          environment.store = addNetworkResponseStoreLayer(environment.store);
+          normalizeData(
+            environment,
+            environment.store,
+            normalizationAst.selections,
+            networkResponse.data ?? {},
+            variables,
+            root,
+            encounteredIds,
+          );
+
+          logMessage(environment, () => ({
+            kind: 'AfterNormalization',
+            store: environment.store,
+            encounteredIds: encounteredIds,
+          }));
+
+          callSubscriptions(environment, encounteredIds);
+
+          status = {
+            kind: 'UndisposedComplete',
+            retainedQuery: status.retainedQuery,
+          };
+        }
       }
 
       const onComplete = fetchOptions?.onComplete;
@@ -213,6 +307,16 @@ export function makeNetworkRequest<
       try {
         fetchOptions?.onError?.();
       } catch {}
+
+      if (status.kind === 'UndisposedIncomplete') {
+        status =
+          revertOptimisticStoreLayerAndMaybeReplaceIfUndisposedIncomplete(
+            environment,
+            status,
+            null,
+          );
+      }
+
       throw e;
     });
 
@@ -221,44 +325,56 @@ export function makeNetworkRequest<
   const response: ItemCleanupPair<PromiseWrapper<void, AnyError>> = [
     wrapper,
     () => {
-      if (status.kind === 'UndisposedComplete') {
-        const didUnretainSomeQuery = unretainQuery(
-          environment,
-          status.retainedQuery,
-        );
-        if (didUnretainSomeQuery) {
-          garbageCollectEnvironment(environment);
-        }
+      if (status.kind === 'UndisposedIncomplete') {
+        status =
+          revertOptimisticStoreLayerAndMaybeReplaceIfUndisposedIncomplete(
+            environment,
+            status,
+            null,
+          );
+      }
+      if (status.kind !== 'Disposed') {
+        status = unretainAndGarbageCollect(environment, status);
       }
-      status = {
-        kind: 'Disposed',
-      };
     },
   ];
   return response;
 }
 
+type NetworkRequestStatusUndisposedIncomplete = {
+  readonly kind: 'UndisposedIncomplete';
+  readonly retainedQuery: RetainedQuery;
+  readonly optimistic: OptimisticStoreLayer | null;
+};
+
+type NetworkRequestStatusUndisposedComplete = {
+  readonly kind: 'UndisposedComplete';
+  readonly retainedQuery: RetainedQuery;
+};
+
+type NetworkRequestStatusDisposed = {
+  readonly kind: 'Disposed';
+};
+
 type NetworkRequestStatus =
-  | {
-      readonly kind: 'UndisposedIncomplete';
-    }
-  | {
-      readonly kind: 'Disposed';
-    }
-  | {
-      readonly kind: 'UndisposedComplete';
-      readonly retainedQuery: RetainedQuery;
-    };
+  | NetworkRequestStatusUndisposedIncomplete
+  | NetworkRequestStatusUndisposedComplete
+  | NetworkRequestStatusDisposed;
 
 function readDataForOnComplete<
   TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
-  TArtifact extends
-    | RefetchQueryNormalizationArtifact
-    | IsographEntrypoint<TReadFromStore, TClientFieldValue, TNormalizationAst>,
   TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
+  TRawResponseType extends NetworkResponseObject,
 >(
-  artifact: TArtifact,
+  artifact:
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<
+        TReadFromStore,
+        TClientFieldValue,
+        TNormalizationAst,
+        TRawResponseType
+      >,
   environment: IsographEnvironment,
   root: StoreLink,
   variables: ExtractParameters<TReadFromStore>,
@@ -293,6 +409,8 @@ function readDataForOnComplete<
       readerWithRefetchQueries: wrapResolvedValue(
         resolvedReaderWithRefetchQueries,
       ),
+      fieldName: resolvedReaderWithRefetchQueries.readerArtifact.fieldName,
+      readerArtifactKind: resolvedReaderWithRefetchQueries.readerArtifact.kind,
       root,
       variables,
       networkRequest: fakeNetworkRequest,
@@ -310,7 +428,6 @@ function readDataForOnComplete<
         // TClientFieldValue which is a React.FC<...>
         return getOrCreateCachedComponent(
           environment,
-          readerArtifact.fieldName,
           {
             kind: 'FragmentReference',
             readerWithRefetchQueries: wrapResolvedValue({
@@ -319,6 +436,8 @@ function readDataForOnComplete<
               nestedRefetchQueries:
                 resolvedReaderWithRefetchQueries.nestedRefetchQueries,
             }),
+            fieldName: readerArtifact.fieldName,
+            readerArtifactKind: readerArtifact.kind,
             root,
             variables,
             networkRequest: fakeNetworkRequest,
@@ -335,7 +454,6 @@ function readDataForOnComplete<
                 startUpdate: getOrCreateCachedStartUpdate(
                   environment,
                   fragment,
-                  resolvedReaderWithRefetchQueries.readerArtifact.fieldName,
                   fakeNetworkRequestOptions,
                 ),
               }
@@ -351,3 +469,118 @@ function readDataForOnComplete<
   }
   return null;
 }
+
+function fetchNormalizationAstAndRetainArtifact<
+  TReadFromStore extends UnknownTReadFromStore,
+  TClientFieldValue,
+  TRawResponseType extends NetworkResponseObject,
+>(
+  environment: IsographEnvironment,
+  artifact:
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<
+        TReadFromStore,
+        TClientFieldValue,
+        NormalizationAst | NormalizationAstLoader,
+        TRawResponseType
+      >,
+  variables: ExtractParameters<TReadFromStore>,
+): RetainedQuery {
+  const normalizationAst =
+    artifact.networkRequestInfo.normalizationAst.kind === 'NormalizationAst'
+      ? wrapResolvedValue(artifact.networkRequestInfo.normalizationAst)
+      : wrapPromise(artifact.networkRequestInfo.normalizationAst.loader());
+
+  const root = { __link: ROOT_ID, __typename: artifact.concreteType };
+  const retainedQuery: RetainedQuery = {
+    normalizationAst: normalizationAst,
+    variables,
+    root,
+  };
+  retainQuery(environment, retainedQuery);
+  return retainedQuery;
+}
+
+function makeOptimisticUpdate<
+  TReadFromStore extends UnknownTReadFromStore,
+  TClientFieldValue,
+  TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
+  TRawResponseType extends NetworkResponseObject,
+>(
+  environment: IsographEnvironment,
+  artifact:
+    | RefetchQueryNormalizationArtifact
+    | IsographEntrypoint<
+        TReadFromStore,
+        TClientFieldValue,
+        TNormalizationAst,
+        TRawResponseType
+      >,
+  variables: ExtractParameters<TReadFromStore>,
+  optimisticNetworkResponse: TRawResponseType,
+): OptimisticStoreLayer {
+  const root = { __link: ROOT_ID, __typename: artifact.concreteType };
+
+  if (
+    artifact.networkRequestInfo.normalizationAst.kind ===
+    'NormalizationAstLoader'
+  ) {
+    throw new Error(
+      'Using lazy loaded normalizationAst with optimisticNetworkResponse is not supported.',
+    );
+  }
+  const encounteredIds: EncounteredIds = new Map();
+  const optimistic = (environment.store =
+    addOptimisticNetworkResponseStoreLayer(environment.store));
+  normalizeData(
+    environment,
+    environment.store,
+    artifact.networkRequestInfo.normalizationAst.selections,
+    optimisticNetworkResponse,
+    variables,
+    root,
+    encounteredIds,
+  );
+
+  logMessage(environment, () => ({
+    kind: 'AfterNormalization',
+    store: environment.store,
+    encounteredIds: encounteredIds,
+  }));
+
+  callSubscriptions(environment, encounteredIds);
+  return optimistic;
+}
+
+function revertOptimisticStoreLayerAndMaybeReplaceIfUndisposedIncomplete(
+  environment: IsographEnvironment,
+  status: NetworkRequestStatusUndisposedIncomplete,
+  normalizeData: null | ((storeLayer: StoreLayerWithData) => void),
+): NetworkRequestStatusUndisposedComplete {
+  if (status.optimistic) {
+    revertOptimisticStoreLayerAndMaybeReplace(
+      environment,
+      status.optimistic,
+      normalizeData,
+    );
+  }
+
+  return {
+    kind: 'UndisposedComplete',
+    retainedQuery: status.retainedQuery,
+  };
+}
+
+function unretainAndGarbageCollect(
+  environment: IsographEnvironment,
+  status: NetworkRequestStatusUndisposedComplete,
+): NetworkRequestStatusDisposed {
+  const didUnretainSomeQuery = unretainQuery(environment, status.retainedQuery);
+  if (didUnretainSomeQuery) {
+    garbageCollectEnvironment(environment);
+  }
+
+  return {
+    kind: 'Disposed',
+  };
+}