@isograph/react 0.4.2 → 0.5.0

package/src/core/cache.ts

@@ -26,6 +26,7 @@ import {
   DataTypeValue,
   FragmentSubscription,
   getLink,
+  getOrLoadReaderWithRefetchQueries,
   ROOT_ID,
   StoreLink,
   StoreRecord,
@@ -33,8 +34,15 @@ import {
   type TypeName,
 } from './IsographEnvironment';
 import { logMessage } from './logging';
-import { maybeMakeNetworkRequest } from './makeNetworkRequest';
-import { wrapPromise, wrapResolvedValue } from './PromiseWrapper';
+import {
+  maybeMakeNetworkRequest,
+  retainQueryWithoutMakingNetworkRequest,
+} from './makeNetworkRequest';
+import {
+  addNetworkResponseStoreLayer,
+  getMutableStoreRecordProxy,
+  type StoreLayerWithData,
+} from './optimisticProxy';
 import { readButDoNotEvaluate, WithEncounteredRecords } from './read';
 import { ReaderLinkedField, ReaderScalarField, type ReaderAst } from './reader';
 import { Argument, ArgumentValue } from './util';
@@ -65,7 +73,7 @@ export function stableCopy<T>(value: T): T {
   if (!value || typeof value !== 'object') {
     return value;
   }
-  if (Array.isArray(value)) {
+  if (isArray(value)) {
     // @ts-ignore
     return value.map(stableCopy);
   }
@@ -82,15 +90,17 @@ export function getOrCreateCacheForArtifact<
   TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
   TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
+  TRawResponseType extends NetworkResponseObject,
 >(
   environment: IsographEnvironment,
   entrypoint: IsographEntrypoint<
     TReadFromStore,
     TClientFieldValue,
-    TNormalizationAst
+    TNormalizationAst,
+    TRawResponseType
   >,
   variables: ExtractParameters<TReadFromStore>,
-  fetchOptions?: FetchOptions<TClientFieldValue>,
+  fetchOptions?: FetchOptions<TClientFieldValue, TRawResponseType>,
 ): ParentCache<FragmentReference<TReadFromStore, TClientFieldValue>> {
   let cacheKey = '';
   switch (entrypoint.networkRequestInfo.operation.kind) {
@@ -106,11 +116,11 @@ export function getOrCreateCacheForArtifact<
       break;
   }
   const factory = () => {
-    const readerWithRefetchQueries =
-      entrypoint.readerWithRefetchQueries.kind ===
-      'ReaderWithRefetchQueriesLoader'
-        ? wrapPromise(entrypoint.readerWithRefetchQueries.loader())
-        : wrapResolvedValue(entrypoint.readerWithRefetchQueries);
+    const { fieldName, readerArtifactKind, readerWithRefetchQueries } =
+      getOrLoadReaderWithRefetchQueries(
+        environment,
+        entrypoint.readerWithRefetchQueries,
+      );
     const [networkRequest, disposeNetworkRequest] = maybeMakeNetworkRequest(
       environment,
       entrypoint,
@@ -125,6 +135,8 @@ export function getOrCreateCacheForArtifact<
       {
         kind: 'FragmentReference',
         readerWithRefetchQueries,
+        fieldName,
+        readerArtifactKind,
         root: { __link: ROOT_ID, __typename: entrypoint.concreteType },
         variables,
         networkRequest: networkRequest,
@@ -141,26 +153,26 @@ export type NetworkResponseValue =
   | NetworkResponseScalarValue
   | null
   | NetworkResponseObject
-  | (NetworkResponseObject | null)[]
-  | (NetworkResponseScalarValue | null)[];
+  | readonly (NetworkResponseObject | null)[]
+  | readonly (NetworkResponseScalarValue | null)[];
 
 export type NetworkResponseObject = {
   // N.B. undefined is here to support optional id's, but
   // undefined should not *actually* be present in the network response.
-  [index: string]: undefined | NetworkResponseValue;
-  id?: DataId;
-  __typename?: TypeName;
+  readonly [index: string]: undefined | NetworkResponseValue;
+  readonly id?: DataId;
+  readonly __typename?: TypeName;
 };
 
 export function normalizeData(
   environment: IsographEnvironment,
+  storeLayer: StoreLayerWithData,
   normalizationAst: NormalizationAstNodes,
   networkResponse: NetworkResponseObject,
   variables: Variables,
   root: StoreLink,
+  encounteredIds: EncounteredIds,
 ): EncounteredIds {
-  const encounteredIds: EncounteredIds = new Map();
-
   logMessage(environment, () => ({
     kind: 'AboutToNormalize',
     normalizationAst,
@@ -168,11 +180,11 @@ export function normalizeData(
     variables,
   }));
 
-  const recordsById = (environment.store[root.__typename] ??= {});
-  const newStoreRecord = (recordsById[root.__link] ??= {});
+  const newStoreRecord = getMutableStoreRecordProxy(storeLayer, root);
 
   normalizeDataIntoRecord(
     environment,
+    storeLayer,
     normalizationAst,
     networkResponse,
     newStoreRecord,
@@ -181,13 +193,6 @@ export function normalizeData(
     encounteredIds,
   );
 
-  logMessage(environment, () => ({
-    kind: 'AfterNormalization',
-    store: environment.store,
-    encounteredIds,
-  }));
-
-  callSubscriptions(environment, encounteredIds);
   return encounteredIds;
 }
 
@@ -217,7 +222,6 @@ export function subscribeToAnyChangesToRecord(
   return () => environment.subscriptions.delete(subscription);
 }
 
-// TODO we should re-read and call callback if the value has changed
 export function subscribe<TReadFromStore extends UnknownTReadFromStore>(
   environment: IsographEnvironment,
   encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
@@ -234,6 +238,13 @@ export function subscribe<TReadFromStore extends UnknownTReadFromStore>(
     fragmentReference,
     readerAst,
   };
+
+  // subscribe is called in an effect. (We should actually subscribe during the
+  // initial render.) Because it's called in an effect, we might have missed some
+  // changes since the initial render! So, at this point, we re-read and call the
+  // subscription (i.e. re-render) if the fragment data has changed.
+  callSubscriptionIfDataChanged(environment, fragmentSubscription);
+
   environment.subscriptions.add(fragmentSubscription);
   return () => environment.subscriptions.delete(fragmentSubscription);
 }
@@ -292,53 +303,7 @@ export function callSubscriptions(
               subscription.encounteredDataAndRecords.encounteredRecords,
             )
           ) {
-            const newEncounteredDataAndRecords = readButDoNotEvaluate(
-              environment,
-              subscription.fragmentReference,
-              // Is this wrong?
-              // Reasons to think no:
-              // - we are only updating the read-out value, and the network
-              //   options only affect whether we throw.
-              // - the component will re-render, and re-throw on its own, anyway.
-              //
-              // Reasons to think not:
-              // - it seems more efficient to suspend here and not update state,
-              //   if we expect that the component will just throw anyway
-              // - consistency
-              // - it's also weird, this is called from makeNetworkRequest, where
-              //   we don't currently pass network request options
-              {
-                suspendIfInFlight: false,
-                throwOnNetworkError: false,
-              },
-            );
-
-            const mergedItem = mergeObjectsUsingReaderAst(
-              subscription.readerAst,
-              subscription.encounteredDataAndRecords.item,
-              newEncounteredDataAndRecords.item,
-            );
-
-            logMessage(environment, () => ({
-              kind: 'DeepEqualityCheck',
-              fragmentReference: subscription.fragmentReference,
-              old: subscription.encounteredDataAndRecords.item,
-              new: newEncounteredDataAndRecords.item,
-              deeplyEqual:
-                mergedItem === subscription.encounteredDataAndRecords.item,
-            }));
-
-            if (mergedItem !== subscription.encounteredDataAndRecords.item) {
-              logAnyError(
-                environment,
-                { situation: 'calling FragmentSubscription callback' },
-                () => {
-                  subscription.callback(newEncounteredDataAndRecords);
-                },
-              );
-              subscription.encounteredDataAndRecords =
-                newEncounteredDataAndRecords;
-            }
+            callSubscriptionIfDataChanged(environment, subscription);
           }
           return;
         }
@@ -375,6 +340,59 @@ export function callSubscriptions(
   );
 }
 
+function callSubscriptionIfDataChanged<
+  TReadFromStore extends UnknownTReadFromStore,
+>(
+  environment: IsographEnvironment,
+  subscription: FragmentSubscription<TReadFromStore>,
+) {
+  const newEncounteredDataAndRecords = readButDoNotEvaluate(
+    environment,
+    subscription.fragmentReference,
+    // Is this wrong?
+    // Reasons to think no:
+    // - we are only updating the read-out value, and the network
+    //   options only affect whether we throw.
+    // - the component will re-render, and re-throw on its own, anyway.
+    //
+    // Reasons to think not:
+    // - it seems more efficient to suspend here and not update state,
+    //   if we expect that the component will just throw anyway
+    // - consistency
+    // - it's also weird, this is called from makeNetworkRequest, where
+    //   we don't currently pass network request options
+    {
+      suspendIfInFlight: false,
+      throwOnNetworkError: false,
+    },
+  );
+
+  const mergedItem = mergeObjectsUsingReaderAst(
+    subscription.readerAst,
+    subscription.encounteredDataAndRecords.item,
+    newEncounteredDataAndRecords.item,
+  );
+
+  logMessage(environment, () => ({
+    kind: 'DeepEqualityCheck',
+    fragmentReference: subscription.fragmentReference,
+    old: subscription.encounteredDataAndRecords.item,
+    new: newEncounteredDataAndRecords.item,
+    deeplyEqual: mergedItem === subscription.encounteredDataAndRecords.item,
+  }));
+
+  if (mergedItem !== subscription.encounteredDataAndRecords.item) {
+    logAnyError(
+      environment,
+      { situation: 'calling FragmentSubscription callback' },
+      () => {
+        subscription.callback(newEncounteredDataAndRecords);
+      },
+    );
+    subscription.encounteredDataAndRecords = newEncounteredDataAndRecords;
+  }
+}
+
 function hasOverlappingIds(
   ids1: EncounteredIds,
   ids2: EncounteredIds,
@@ -408,6 +426,7 @@ export type EncounteredIds = Map<TypeName, Set<DataId>>;
  */
 function normalizeDataIntoRecord(
   environment: IsographEnvironment,
+  storeLayer: StoreLayerWithData,
   normalizationAst: NormalizationAstNodes,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
@@ -432,6 +451,7 @@ function normalizeDataIntoRecord(
       case 'Linked': {
         const linkedFieldResultedInChange = normalizeLinkedField(
           environment,
+          storeLayer,
           normalizationNode,
           networkResponseParentRecord,
           targetParentRecord,
@@ -446,6 +466,7 @@ function normalizeDataIntoRecord(
       case 'InlineFragment': {
         const inlineFragmentResultedInChange = normalizeInlineFragment(
           environment,
+          storeLayer,
           normalizationNode,
           networkResponseParentRecord,
           targetParentRecord,
@@ -495,12 +516,14 @@ function normalizeScalarField(
   const networkResponseKey = getNetworkResponseKey(astNode);
   const networkResponseData = networkResponseParentRecord[networkResponseKey];
   const parentRecordKey = getParentRecordKey(astNode, variables);
+  const existingValue = targetStoreRecord[parentRecordKey];
 
-  if (
-    networkResponseData == null ||
-    isScalarOrEmptyArray(networkResponseData)
-  ) {
-    const existingValue = targetStoreRecord[parentRecordKey];
+  if (networkResponseData == null) {
+    targetStoreRecord[parentRecordKey] = null;
+    return existingValue !== null;
+  }
+
+  if (isScalarOrEmptyArray(networkResponseData)) {
     targetStoreRecord[parentRecordKey] = networkResponseData;
     return existingValue !== networkResponseData;
   } else {
@@ -508,11 +531,16 @@ function normalizeScalarField(
   }
 }
 
+export function isArray(value: unknown): value is readonly unknown[] {
+  return Array.isArray(value);
+}
+
 /**
  * Mutate targetParentRecord with a given linked field ast node.
  */
 function normalizeLinkedField(
   environment: IsographEnvironment,
+  storeLayer: StoreLayerWithData,
   astNode: NormalizationLinkedField,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
@@ -539,7 +567,7 @@ function normalizeLinkedField(
     );
   }
 
-  if (Array.isArray(networkResponseData)) {
+  if (isArray(networkResponseData)) {
     // TODO check astNode.plural or the like
     const dataIds: (StoreLink | null)[] = [];
     for (let i = 0; i < networkResponseData.length; i++) {
@@ -550,6 +578,7 @@ function normalizeLinkedField(
       }
       const newStoreRecordId = normalizeNetworkResponseObject(
         environment,
+        storeLayer,
         astNode,
         networkResponseObject,
         targetParentRecordLink,
@@ -576,6 +605,7 @@ function normalizeLinkedField(
   } else {
     const newStoreRecordId = normalizeNetworkResponseObject(
       environment,
+      storeLayer,
       astNode,
       networkResponseData,
       targetParentRecordLink,
@@ -609,6 +639,7 @@ function normalizeLinkedField(
  */
 function normalizeInlineFragment(
   environment: IsographEnvironment,
+  storeLayer: StoreLayerWithData,
   astNode: NormalizationInlineFragment,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
@@ -620,6 +651,7 @@ function normalizeInlineFragment(
   if (networkResponseParentRecord[TYPENAME_FIELD_NAME] === typeToRefineTo) {
     const hasBeenModified = normalizeDataIntoRecord(
       environment,
+      storeLayer,
       astNode.selections,
       networkResponseParentRecord,
       targetParentRecord,
@@ -636,7 +668,7 @@ function dataIdsAreTheSame(
   existingValue: DataTypeValue,
   newDataIds: (StoreLink | null)[],
 ): boolean {
-  if (Array.isArray(existingValue)) {
+  if (isArray(existingValue)) {
     if (newDataIds.length !== existingValue.length) {
       return false;
     }
@@ -657,6 +689,7 @@ function dataIdsAreTheSame(
 
 function normalizeNetworkResponseObject(
   environment: IsographEnvironment,
+  storeLayer: StoreLayerWithData,
   astNode: NormalizationLinkedField,
   networkResponseData: NetworkResponseObject,
   targetParentRecordLink: StoreLink,
@@ -681,15 +714,16 @@ function normalizeNetworkResponseObject(
     );
   }
 
-  const recordsById = (environment.store[__typename] ??= {});
-  const newStoreRecord = (recordsById[newStoreRecordId] ??= {});
+  const link = { __link: newStoreRecordId, __typename };
+  const newStoreRecord = getMutableStoreRecordProxy(storeLayer, link);
 
   normalizeDataIntoRecord(
     environment,
+    storeLayer,
     astNode.selections,
     networkResponseData,
     newStoreRecord,
-    { __link: newStoreRecordId, __typename: __typename },
+    link,
     variables,
     mutableEncounteredIds,
   );
@@ -698,12 +732,13 @@ function normalizeNetworkResponseObject(
 }
 
 function isScalarOrEmptyArray(
-  data: NonNullable<NetworkResponseValue>,
-): data is NetworkResponseScalarValue | (NetworkResponseScalarValue | null)[] {
+  data: NetworkResponseValue,
+): data is
+  | NetworkResponseScalarValue
+  | readonly (NetworkResponseScalarValue | null)[] {
   // N.B. empty arrays count as empty arrays of scalar fields.
-  if (Array.isArray(data)) {
-    // This is maybe fixed in a new version of Typescript??
-    return (data as any).every((x: any) => isScalarOrEmptyArray(x));
+  if (isArray(data)) {
+    return data.every((x) => isScalarOrEmptyArray(x));
   }
   const isScalarValue =
     data === null ||
@@ -713,8 +748,10 @@ function isScalarOrEmptyArray(
   return isScalarValue;
 }
 
-function isNullOrEmptyArray(data: unknown): data is never[] | null[] | null {
-  if (Array.isArray(data)) {
+function isNullOrEmptyArray(
+  data: unknown,
+): data is readonly never[] | null[] | null {
+  if (isArray(data)) {
     if (data.length === 0) {
       return true;
     }
@@ -889,3 +926,61 @@ function getDataIdOfNetworkResponse(
   }
   return storeKey;
 }
+
+export function writeData<
+  TReadFromStore extends UnknownTReadFromStore,
+  TRawResponseType extends NetworkResponseObject,
+  TClientFieldValue,
+>(
+  environment: IsographEnvironment,
+  entrypoint: IsographEntrypoint<
+    TReadFromStore,
+    TClientFieldValue,
+    NormalizationAst,
+    TRawResponseType
+  >,
+  data: TRawResponseType,
+  variables: ExtractParameters<TReadFromStore>,
+): ItemCleanupPair<FragmentReference<TReadFromStore, TClientFieldValue>> {
+  const encounteredIds: EncounteredIds = new Map();
+  environment.store = addNetworkResponseStoreLayer(environment.store);
+  normalizeData(
+    environment,
+    environment.store,
+    entrypoint.networkRequestInfo.normalizationAst.selections,
+    data,
+    variables,
+    { __link: ROOT_ID, __typename: entrypoint.concreteType },
+    encounteredIds,
+  );
+  logMessage(environment, () => ({
+    kind: 'AfterNormalization',
+    store: environment.store,
+    encounteredIds,
+  }));
+
+  callSubscriptions(environment, encounteredIds);
+
+  const { fieldName, readerArtifactKind, readerWithRefetchQueries } =
+    getOrLoadReaderWithRefetchQueries(
+      environment,
+      entrypoint.readerWithRefetchQueries,
+    );
+  const [networkRequest, disposeNetworkRequest] =
+    retainQueryWithoutMakingNetworkRequest(environment, entrypoint, variables);
+
+  return [
+    {
+      kind: 'FragmentReference',
+      readerWithRefetchQueries,
+      fieldName,
+      readerArtifactKind,
+      root: { __link: ROOT_ID, __typename: entrypoint.concreteType },
+      variables,
+      networkRequest,
+    },
+    () => {
+      disposeNetworkRequest();
+    },
+  ];
+}

package/src/core/check.ts

@@ -8,21 +8,28 @@ import {
   StoreRecord,
 } from './IsographEnvironment';
 import { logMessage } from './logging';
+import { getStoreRecordProxy } from './optimisticProxy';
 
 export type ShouldFetch = RequiredShouldFetch | 'IfNecessary';
 export type RequiredShouldFetch = 'Yes' | 'No';
 
 export const DEFAULT_SHOULD_FETCH_VALUE: ShouldFetch = 'IfNecessary';
 
-export type FetchOptions<TReadOutData> = {
-  shouldFetch?: ShouldFetch;
+type FetchOptionsShared<TReadOutData> = {
   onComplete?: (data: TReadOutData) => void;
   onError?: () => void;
 };
 
-export type RequiredFetchOptions<TReadOutData> = {
+export interface FetchOptions<TReadOutData, TRawResponseType>
+  extends FetchOptionsShared<TReadOutData> {
+  shouldFetch?: ShouldFetch;
+  optimisticNetworkResponse?: TRawResponseType;
+}
+
+export interface RequiredFetchOptions<TReadOutData>
+  extends FetchOptionsShared<TReadOutData> {
   shouldFetch: RequiredShouldFetch;
-} & FetchOptions<TReadOutData>;
+}
 
 export type CheckResult =
   | {
@@ -39,8 +46,14 @@ export function check(
   variables: Variables,
   root: StoreLink,
 ): CheckResult {
-  const recordsById = (environment.store[root.__typename] ??= {});
-  const newStoreRecord = (recordsById[root.__link] ??= {});
+  const newStoreRecord = getStoreRecordProxy(environment.store, root);
+
+  if (newStoreRecord == null) {
+    return {
+      kind: 'MissingData',
+      record: root,
+    };
+  }
 
   const checkResult = checkFromRecord(
     environment,
@@ -107,8 +120,7 @@ function checkFromRecord(
               );
             }
 
-            const linkedRecord =
-              environment.store[link.__typename]?.[link.__link];
+            const linkedRecord = getStoreRecordProxy(environment.store, link);
 
             if (linkedRecord === undefined) {
               return {
@@ -141,8 +153,7 @@ function checkFromRecord(
             );
           }
 
-          const linkedRecord =
-            environment.store[link.__typename]?.[link.__link];
+          const linkedRecord = getStoreRecordProxy(environment.store, link);
 
           if (linkedRecord === undefined) {
             return {

package/src/core/componentCache.ts

@@ -1,4 +1,5 @@
 import { useReadAndSubscribe } from '../react/useReadAndSubscribe';
+import { maybeUnwrapNetworkRequest } from '../react/useResult';
 import {
   FragmentReference,
   stableIdForFragmentReference,
@@ -11,7 +12,6 @@ import { createStartUpdate } from './startUpdate';
 
 export function getOrCreateCachedComponent(
   environment: IsographEnvironment,
-  componentName: string,
   fragmentReference: FragmentReference<any, any>,
   networkRequestOptions: NetworkRequestReaderOptions,
 ): React.FC<any> {
@@ -23,9 +23,13 @@ export function getOrCreateCachedComponent(
   );
 
   return (environment.componentCache[
-    stableIdForFragmentReference(fragmentReference, componentName)
+    stableIdForFragmentReference(fragmentReference)
   ] ??= (() => {
     function Component(additionalRuntimeProps: { [key: string]: any }) {
+      maybeUnwrapNetworkRequest(
+        fragmentReference.networkRequest,
+        networkRequestOptions,
+      );
       const readerWithRefetchQueries = readPromise(
         fragmentReference.readerWithRefetchQueries,
       );
@@ -38,7 +42,7 @@ export function getOrCreateCachedComponent(
 
       logMessage(environment, () => ({
         kind: 'ComponentRerendered',
-        componentName,
+        componentName: fragmentReference.fieldName,
         rootLink: fragmentReference.root,
       }));
 
@@ -54,7 +58,7 @@ export function getOrCreateCachedComponent(
       );
     }
     const idString = `(type: ${fragmentReference.root.__typename}, id: ${fragmentReference.root.__link})`;
-    Component.displayName = `${componentName} ${idString} @component`;
+    Component.displayName = `${fragmentReference.fieldName} ${idString} @component`;
     return Component;
   })());
 }