@isograph/react 0.5.0 → 0.5.1

package/src/core/read.ts

@@ -1,28 +1,28 @@
-import { CleanupFn, type ItemCleanupPair } from '@isograph/disposable-types';
+import type { CleanupFn, ItemCleanupPair } from '@isograph/disposable-types';
 import {
   getParentRecordKey,
   insertEmptySetIfMissing,
   onNextChangeToRecord,
   type EncounteredIds,
 } from './cache';
-import { FetchOptions } from './check';
+import type { FetchOptions } from './check';
 import { getOrCreateCachedComponent } from './componentCache';
-import {
+import type {
   IsographEntrypoint,
+  ReaderWithRefetchQueries,
   RefetchQueryNormalizationArtifactWrapper,
-  type ReaderWithRefetchQueries,
 } from './entrypoint';
-import {
+import type {
   ExtractData,
   FragmentReference,
+  UnknownTReadFromStore,
   Variables,
-  type UnknownTReadFromStore,
 } from './FragmentReference';
+import type { IsographEnvironment } from './IsographEnvironment';
 import {
   assertLink,
   getOrLoadIsographArtifact,
   getOrLoadReaderWithRefetchQueries,
-  IsographEnvironment,
   type DataTypeValue,
   type StoreLink,
   type StoreRecord,
@@ -30,25 +30,25 @@ import {
 import { logMessage } from './logging';
 import { maybeMakeNetworkRequest } from './makeNetworkRequest';
 import { getStoreRecordProxy } from './optimisticProxy';
+import type { PromiseWrapper } from './PromiseWrapper';
 import {
   getPromiseState,
   NOT_SET,
-  PromiseWrapper,
   readPromise,
   wrapPromise,
   wrapResolvedValue,
 } from './PromiseWrapper';
-import {
+import type {
+  LoadablySelectedField,
   ReaderAst,
-  type LoadablySelectedField,
-  type ReaderClientPointer,
-  type ReaderImperativelyLoadedField,
-  type ReaderLinkedField,
-  type ReaderNonLoadableResolverField,
-  type ReaderScalarField,
+  ReaderClientPointer,
+  ReaderImperativelyLoadedField,
+  ReaderLinkedField,
+  ReaderNonLoadableResolverField,
+  ReaderScalarField,
 } from './reader';
 import { getOrCreateCachedStartUpdate } from './startUpdate';
-import { Arguments } from './util';
+import type { Arguments } from './util';
 
 export type WithEncounteredRecords<T> = {
   readonly encounteredRecords: EncounteredIds;
@@ -164,7 +164,7 @@ function readData<TReadFromStore>(
     };
   }
 
-  if (storeRecord === null) {
+  if (storeRecord == null) {
     return {
       kind: 'Success',
       data: null as any,
@@ -266,13 +266,6 @@ function readData<TReadFromStore>(
         target[field.alias] = data.data;
         break;
       }
-
-      default: {
-        // Ensure we have covered all variants
-        let _: never = field;
-        _;
-        throw new Error('Unexpected case.');
-      }
     }
   }
   return {
@@ -528,11 +521,6 @@ function writeQueryArgsToVariables(
         targetVariables[name] = argType.value;
         break;
       }
-      default: {
-        const _: never = argType;
-        _;
-        throw new Error('Unexpected case');
-      }
     }
   }
 }
@@ -620,11 +608,6 @@ export function readResolverFieldData(
         ),
       };
     }
-    default: {
-      let _: never = field.readerArtifact;
-      _;
-      throw new Error('Unexpected kind');
-    }
   }
 }
 
@@ -667,7 +650,7 @@ export function readLinkedFieldData(
   const storeRecordName = getParentRecordKey(field, variables);
   let value = storeRecord[storeRecordName];
 
-  if (field.condition) {
+  if (field.condition != null) {
     const data = readData(field.condition.readerAst, root);
     if (data.kind === 'MissingData') {
       return {
@@ -736,7 +719,7 @@ export function readLinkedFieldData(
             JSON.stringify(item),
           recordLink: root,
         };
-      } else if (link === null) {
+      } else if (link == null) {
         results.push(null);
         continue;
       }
@@ -827,7 +810,7 @@ export function readLinkedFieldData(
     } else {
       link = altLink;
     }
-  } else if (link === null) {
+  } else if (link == null) {
     return {
       kind: 'Success',
       data: null,
@@ -869,7 +852,7 @@ export function readLinkedFieldData(
 function isClientPointer(
   field: ReaderLinkedField,
 ): field is ReaderClientPointer {
-  return field.refetchQueryIndex !== null;
+  return field.refetchQueryIndex != null;
 }
 
 export function readClientPointerData(

package/src/core/reader.ts

@@ -1,22 +1,19 @@
-import { Factory } from '@isograph/disposable-types';
-import { FetchOptions } from './check';
-import {
+import type { Factory } from '@isograph/disposable-types';
+import type { FetchOptions } from './check';
+import type {
   IsographEntrypoint,
   IsographEntrypointLoader,
   RefetchQueryNormalizationArtifact,
   RefetchQueryNormalizationArtifactWrapper,
 } from './entrypoint';
-import {
-  ExtractParameters,
-  FragmentReference,
-  type UnknownTReadFromStore,
-} from './FragmentReference';
-import {
+import type { ExtractParameters, FragmentReference } from './FragmentReference';
+import { type UnknownTReadFromStore } from './FragmentReference';
+import type {
   ComponentOrFieldName,
   IsographEnvironment,
-  type StoreLink,
 } from './IsographEnvironment';
-import { Arguments } from './util';
+import { type StoreLink } from './IsographEnvironment';
+import type { Arguments } from './util';
 
 export type TopLevelReaderArtifact<
   TReadFromStore extends UnknownTReadFromStore,

package/src/core/startUpdate.ts

@@ -1,5 +1,4 @@
 import {
-  callSubscriptions,
   getParentRecordKey,
   insertEmptySetIfMissing,
   type EncounteredIds,
@@ -37,6 +36,7 @@ import {
   type ReadDataResultSuccess,
 } from './read';
 import type { ReaderAst } from './reader';
+import { callSubscriptions } from './subscribe';
 
 export function getOrCreateCachedStartUpdate<
   TReadFromStore extends UnknownTReadFromStore,
@@ -161,7 +161,7 @@ function defineCachedProperty<T>(
       }
       return value.value;
     },
-    ...(set && {
+    ...(set != null && {
       set: (newValue) => {
         set(newValue);
         mutableState.lastInvalidated++;
@@ -335,10 +335,6 @@ function readUpdatableData<TReadFromStore extends UnknownTReadFromStore>(
         target[field.alias] = root;
         break;
       }
-      default: {
-        field satisfies never;
-        throw new Error('Unexpected case.');
-      }
     }
   }
 

package/src/core/subscribe.ts

@@ -0,0 +1,189 @@
+import { mergeObjectsUsingReaderAst } from './areEqualWithDeepComparison';
+import type { EncounteredIds } from './cache';
+import type {
+  FragmentReference,
+  UnknownTReadFromStore,
+} from './FragmentReference';
+import type {
+  FragmentSubscription,
+  IsographEnvironment,
+} from './IsographEnvironment';
+import { logMessage } from './logging';
+import { type WithEncounteredRecords, readButDoNotEvaluate } from './read';
+import type { ReaderAst } from './reader';
+
+export function subscribe<TReadFromStore extends UnknownTReadFromStore>(
+  environment: IsographEnvironment,
+  encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  fragmentReference: FragmentReference<TReadFromStore, any>,
+  callback: (
+    newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  ) => void,
+  readerAst: ReaderAst<TReadFromStore>,
+): () => void {
+  const fragmentSubscription: FragmentSubscription<TReadFromStore> = {
+    kind: 'FragmentSubscription',
+    callback,
+    encounteredDataAndRecords,
+    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);
+}
+
+// Calls to readButDoNotEvaluate can suspend (i.e. throw a promise).
+// Maybe in the future, they will be able to throw errors.
+//
+// That's probably okay to ignore. We don't, however, want to prevent
+// updating other subscriptions if one subscription had missing data.
+function logAnyError(
+  environment: IsographEnvironment,
+  context: any,
+  f: () => void,
+) {
+  try {
+    f();
+  } catch (e) {
+    logMessage(environment, () => ({
+      kind: 'ErrorEncounteredInWithErrorHandling',
+      error: e,
+      context,
+    }));
+  }
+}
+
+export function callSubscriptions(
+  environment: IsographEnvironment,
+  recordsEncounteredWhenNormalizing: EncounteredIds,
+) {
+  environment.subscriptions.forEach((subscription) =>
+    logAnyError(environment, { situation: 'calling subscriptions' }, () => {
+      switch (subscription.kind) {
+        case 'FragmentSubscription': {
+          // TODO if there are multiple components subscribed to the same
+          // fragment, we will call readButNotEvaluate multiple times. We
+          // should fix that.
+          if (
+            hasOverlappingIds(
+              recordsEncounteredWhenNormalizing,
+              subscription.encounteredDataAndRecords.encounteredRecords,
+            )
+          ) {
+            callSubscriptionIfDataChanged(environment, subscription);
+          }
+          return;
+        }
+        case 'AnyRecords': {
+          logAnyError(
+            environment,
+            { situation: 'calling AnyRecords callback' },
+            () => subscription.callback(),
+          );
+          return;
+        }
+        case 'AnyChangesToRecord': {
+          if (
+            recordsEncounteredWhenNormalizing
+              .get(subscription.recordLink.__typename)
+              ?.has(subscription.recordLink.__link) != null
+          ) {
+            logAnyError(
+              environment,
+              { situation: 'calling AnyChangesToRecord callback' },
+              () => subscription.callback(),
+            );
+          }
+          return;
+        }
+      }
+    }),
+  );
+}
+
+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,
+): boolean {
+  for (const [typeName, set1] of ids1.entries()) {
+    const set2 = ids2.get(typeName);
+    if (set2 === undefined) {
+      continue;
+    }
+
+    if (isNotDisjointFrom(set1, set2)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// TODO use a polyfill library
+function isNotDisjointFrom<T>(set1: Set<T>, set2: Set<T>): boolean {
+  for (const id of set1) {
+    if (set2.has(id)) {
+      return true;
+    }
+  }
+  return false;
+}

package/src/core/util.ts

@@ -31,3 +31,29 @@ export type ArgumentValue =
       readonly kind: 'Object';
       readonly value: Arguments;
     };
+
+export function isArray(value: unknown): value is readonly unknown[] {
+  return Array.isArray(value);
+}
+
+/**
+ * Creates a copy of the provided value, ensuring any nested objects have their
+ * keys sorted such that equivalent values would have identical JSON.stringify
+ * results.
+ */
+export function stableCopy<T>(value: T): T {
+  if (value == null || typeof value !== 'object') {
+    return value;
+  }
+  if (isArray(value)) {
+    // @ts-ignore
+    return value.map(stableCopy);
+  }
+  const keys = Object.keys(value).sort();
+  const stable: { [index: string]: any } = {};
+  for (let i = 0; i < keys.length; i++) {
+    // @ts-ignore
+    stable[keys[i]] = stableCopy(value[keys[i]]);
+  }
+  return stable as any;
+}

package/src/core/writeData.ts

@@ -0,0 +1,79 @@
+import type { ItemCleanupPair } from '@isograph/isograph-disposable-types/dist';
+import { callSubscriptions } from './subscribe';
+import {
+  type NetworkResponseObject,
+  type EncounteredIds,
+  normalizeData,
+} from './cache';
+import type { IsographEntrypoint, NormalizationAst } from './entrypoint';
+import type {
+  UnknownTReadFromStore,
+  ExtractParameters,
+  FragmentReference,
+} from './FragmentReference';
+import {
+  type IsographEnvironment,
+  ROOT_ID,
+  getOrLoadReaderWithRefetchQueries,
+} from './IsographEnvironment';
+import { logMessage } from './logging';
+import { retainQueryWithoutMakingNetworkRequest } from './makeNetworkRequest';
+import { addNetworkResponseStoreLayer } from './optimisticProxy';
+
+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/index.ts

@@ -18,15 +18,14 @@ export {
   NOT_SET,
 } from './core/PromiseWrapper';
 export {
-  callSubscriptions,
-  subscribe,
   normalizeData,
-  writeData,
   type NetworkResponseObject,
   type NetworkResponseValue,
   type NetworkResponseScalarValue,
   type EncounteredIds,
 } from './core/cache';
+export { callSubscriptions, subscribe } from './core/subscribe';
+export { writeData } from './core/writeData';
 export { makeNetworkRequest } from './core/makeNetworkRequest';
 export {
   ROOT_ID,
@@ -40,7 +39,6 @@ export {
   type Link,
   type StoreRecord,
   type CacheMap,
-  createIsographEnvironment,
   createIsographStore,
   type FieldCache,
   type Subscriptions,
@@ -86,7 +84,9 @@ export {
   type RefetchQueryNormalizationArtifactWrapper,
   type ExtractProps,
   type ExtractReadFromStore,
+  type ExtractClientFieldValue,
   type ExtractResolverResult,
+  type FragmentReferenceOfEntrypoint,
   type NetworkRequestInfo,
   type NormalizationInlineFragment,
   type ReaderWithRefetchQueries,
@@ -157,6 +157,7 @@ export {
 export { useLazyReference } from './react/useLazyReference';
 export { useRerenderOnChange } from './react/useRerenderOnChange';
 export { RenderAfterCommit__DO_NOT_USE } from './react/RenderAfterCommit__DO_NOT_USE';
+export { createIsographEnvironment } from './react/createIsographEnvironment';
 
 export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';
 export {

package/src/loadable-hooks/useClientSideDefer.ts

@@ -1,12 +1,12 @@
 import { useLazyDisposableState } from '@isograph/react-disposable-state';
 import { getOrCreateItemInSuspenseCache } from '../core/cache';
-import { FetchOptions } from '../core/check';
-import {
+import type { FetchOptions } from '../core/check';
+import type {
   ExtractParameters,
   FragmentReference,
-  type UnknownTReadFromStore,
 } from '../core/FragmentReference';
-import { LoadableField } from '../core/reader';
+import { type UnknownTReadFromStore } from '../core/FragmentReference';
+import type { LoadableField } from '../core/reader';
 import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
 
 type ArgsWithoutProvidedArgs<

package/src/loadable-hooks/useConnectionSpecPagination.ts

@@ -1,29 +1,27 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import type { ItemCleanupPair } from '@isograph/disposable-types';
 import {
   UNASSIGNED_STATE,
   useUpdatableDisposableState,
 } from '@isograph/react-disposable-state';
-import {
-  createReferenceCountedPointer,
-  ReferenceCountedPointer,
-} from '@isograph/reference-counted-pointer';
+import type { ReferenceCountedPointer } from '@isograph/reference-counted-pointer';
+import { createReferenceCountedPointer } from '@isograph/reference-counted-pointer';
 import { useState } from 'react';
 import { subscribeToAnyChange } from '../core/cache';
-import { FetchOptions } from '../core/check';
-import {
+import type { FetchOptions } from '../core/check';
+import type {
   FragmentReference,
-  type UnknownTReadFromStore,
+  UnknownTReadFromStore,
 } from '../core/FragmentReference';
 import { getPromiseState, readPromise } from '../core/PromiseWrapper';
 import {
   readButDoNotEvaluate,
   type WithEncounteredRecords,
 } from '../core/read';
-import { LoadableField, type ReaderAst } from '../core/reader';
+import type { LoadableField, ReaderAst } from '../core/reader';
 import { getOrCreateCachedStartUpdate } from '../core/startUpdate';
 import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
+import { maybeUnwrapNetworkRequest } from '../react/maybeUnwrapNetworkRequest';
 import { useSubscribeToMultiple } from '../react/useReadAndSubscribe';
-import { maybeUnwrapNetworkRequest } from '../react/useResult';
 
 export type UsePaginationReturnValue<
   TReadFromStore extends UnknownTReadFromStore,
@@ -264,7 +262,7 @@ export function useConnectionSpecPagination<
   const mostRecentFragmentReference =
     mostRecentItem?.[0].getItemIfNotDisposed();
 
-  if (mostRecentItem && mostRecentFragmentReference === null) {
+  if (mostRecentItem != null && mostRecentFragmentReference == null) {
     throw new Error(
       'FragmentReference is unexpectedly disposed. \
       This is indicative of a bug in Isograph.',
@@ -272,11 +270,15 @@ export function useConnectionSpecPagination<
   }
 
   const networkRequestStatus =
-    mostRecentFragmentReference &&
-    getPromiseState(mostRecentFragmentReference.networkRequest);
+    mostRecentFragmentReference != null
+      ? {
+          mostRecentFragmentReference,
+          state: getPromiseState(mostRecentFragmentReference.networkRequest),
+        }
+      : null;
 
   const slicedFragmentReferences =
-    networkRequestStatus?.kind === 'Ok'
+    networkRequestStatus?.state?.kind === 'Ok'
       ? loadedReferences
       : loadedReferences.slice(0, loadedReferences.length - 1);
 
@@ -306,7 +308,7 @@ export function useConnectionSpecPagination<
     subscribeCompletedFragmentReferences(completedFragmentReferences),
   );
 
-  if (!networkRequestStatus) {
+  if (networkRequestStatus == null) {
     if (initialState?.hasNextPage ?? true) {
       return {
         kind: 'HasMoreRecords',
@@ -321,7 +323,7 @@ export function useConnectionSpecPagination<
     }
   }
 
-  switch (networkRequestStatus.kind) {
+  switch (networkRequestStatus.state.kind) {
     case 'Pending': {
       const unsubscribe = subscribeToAnyChange(environment, () => {
         unsubscribe();
@@ -334,11 +336,11 @@ export function useConnectionSpecPagination<
       return {
         results: results.edges,
         kind: 'Pending',
-        pendingFragment: mostRecentFragmentReference,
+        pendingFragment: networkRequestStatus.mostRecentFragmentReference,
       };
     }
     case 'Err': {
-      throw networkRequestStatus.error;
+      throw networkRequestStatus.state.error;
     }
     case 'Ok': {
       const results = readCompletedFragmentReferences(

package/src/loadable-hooks/useImperativeLoadableField.ts

@@ -2,12 +2,12 @@ import {
   UNASSIGNED_STATE,
   useUpdatableDisposableState,
 } from '@isograph/react-disposable-state';
-import { FetchOptions } from '../core/check';
-import {
+import type { FetchOptions } from '../core/check';
+import type {
   ExtractParameters,
   FragmentReference,
 } from '../core/FragmentReference';
-import { LoadableField } from '../core/reader';
+import type { LoadableField } from '../core/reader';
 
 export type UseImperativeLoadableFieldReturn<
   TReadFromStore extends { data: object; parameters: object },