@isograph/react 0.0.0-main-ae8aa2fe → 0.0.0-main-d3ef6e33

package/dist/react/useReadAndSubscribe.js

@@ -4,13 +4,15 @@ exports.useReadAndSubscribe = void 0;
 const react_1 = require("react");
 const read_1 = require("../core/read");
 const useRerenderOnChange_1 = require("./useRerenderOnChange");
+const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
 /**
  * Read the data from a fragment reference and subscribe to updates.
  * Does not pass the data to the fragment reference's resolver function.
  */
-function useReadAndSubscribe(environment, fragmentReference) {
-    const [readOutDataAndRecords, setReadOutDataAndRecords] = (0, react_1.useState)(() => (0, read_1.readButDoNotEvaluate)(environment, fragmentReference));
-    (0, useRerenderOnChange_1.useRerenderOnChange)(environment, readOutDataAndRecords, fragmentReference, setReadOutDataAndRecords);
+function useReadAndSubscribe(fragmentReference, networkRequestOptions) {
+    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    const [readOutDataAndRecords, setReadOutDataAndRecords] = (0, react_1.useState)(() => (0, read_1.readButDoNotEvaluate)(environment, fragmentReference, networkRequestOptions));
+    (0, useRerenderOnChange_1.useRerenderOnChange)(readOutDataAndRecords, fragmentReference, setReadOutDataAndRecords);
     return readOutDataAndRecords.item;
 }
 exports.useReadAndSubscribe = useReadAndSubscribe;

package/dist/react/useRerenderOnChange.d.ts

@@ -1,4 +1,3 @@
-import { IsographEnvironment } from '../core/IsographEnvironment';
 import { WithEncounteredRecords } from '../core/read';
 import { FragmentReference } from '../core/FragmentReference';
-export declare function useRerenderOnChange<TReadFromStore extends Object>(environment: IsographEnvironment, encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>, fragmentReference: FragmentReference<any, any>, setEncounteredDataAndRecords: (data: WithEncounteredRecords<TReadFromStore>) => void): void;
+export declare function useRerenderOnChange<TReadFromStore extends Object>(encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>, fragmentReference: FragmentReference<any, any>, setEncounteredDataAndRecords: (data: WithEncounteredRecords<TReadFromStore>) => void): void;

package/dist/react/useRerenderOnChange.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRerenderOnChange = void 0;
 const react_1 = require("react");
 const cache_1 = require("../core/cache");
+const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
 // TODO add unit tests for this. Add integration tests that test
 // behavior when the encounteredRecords underneath a fragment change.
-function useRerenderOnChange(environment, encounteredDataAndRecords, fragmentReference, setEncounteredDataAndRecords) {
+function useRerenderOnChange(encounteredDataAndRecords, fragmentReference, setEncounteredDataAndRecords) {
+    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
     (0, react_1.useEffect)(() => {
         return (0, cache_1.subscribe)(environment, encounteredDataAndRecords, fragmentReference, (newEncounteredDataAndRecords) => {
             setEncounteredDataAndRecords(newEncounteredDataAndRecords);

package/dist/react/useResult.d.ts

@@ -1,2 +1,5 @@
 import { FragmentReference } from '../core/FragmentReference';
-export declare function useResult<TReadFromStore extends Object, TClientFieldValue>(fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>): TClientFieldValue;
+import { NetworkRequestReaderOptions } from '../core/read';
+import { PromiseWrapper } from '../core/PromiseWrapper';
+export declare function useResult<TReadFromStore extends Object, TClientFieldValue>(fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>, networkRequestOptions: NetworkRequestReaderOptions): TClientFieldValue;
+export declare function maybeUnwrapNetworkRequest(networkRequest: PromiseWrapper<void, any>, networkRequestOptions: NetworkRequestReaderOptions): void;

package/dist/react/useResult.js

@@ -1,20 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResult = void 0;
+exports.maybeUnwrapNetworkRequest = exports.useResult = void 0;
 const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
 const componentCache_1 = require("../core/componentCache");
 const useReadAndSubscribe_1 = require("./useReadAndSubscribe");
-function useResult(fragmentReference) {
+const PromiseWrapper_1 = require("../core/PromiseWrapper");
+function useResult(fragmentReference, networkRequestOptions) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    maybeUnwrapNetworkRequest(fragmentReference.networkRequest, networkRequestOptions);
     switch (fragmentReference.readerArtifact.kind) {
         case 'ComponentReaderArtifact': {
             // @ts-expect-error
-            return (0, componentCache_1.getOrCreateCachedComponent)(environment, fragmentReference.readerArtifact.componentName, fragmentReference);
+            return (0, componentCache_1.getOrCreateCachedComponent)(environment, fragmentReference.readerArtifact.componentName, fragmentReference, networkRequestOptions);
         }
         case 'EagerReaderArtifact': {
-            const data = (0, useReadAndSubscribe_1.useReadAndSubscribe)(environment, fragmentReference);
+            const data = (0, useReadAndSubscribe_1.useReadAndSubscribe)(fragmentReference, networkRequestOptions);
             return fragmentReference.readerArtifact.resolver(data);
         }
     }
 }
 exports.useResult = useResult;
+function maybeUnwrapNetworkRequest(networkRequest, networkRequestOptions) {
+    const state = (0, PromiseWrapper_1.getPromiseState)(networkRequest);
+    if (state.kind === 'Err' && networkRequestOptions.throwOnNetworkError) {
+        throw state.error;
+    }
+    else if (state.kind === 'Pending' &&
+        networkRequestOptions.suspendIfInFlight) {
+        throw state.promise;
+    }
+}
+exports.maybeUnwrapNetworkRequest = maybeUnwrapNetworkRequest;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-ae8aa2fe",
+  "version": "0.0.0-main-d3ef6e33",
   "description": "Use Isograph with React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -17,8 +17,8 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-ae8aa2fe",
-    "@isograph/react-disposable-state": "0.0.0-main-ae8aa2fe",
+    "@isograph/disposable-types": "0.0.0-main-d3ef6e33",
+    "@isograph/react-disposable-state": "0.0.0-main-d3ef6e33",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/src/core/FragmentReference.ts

@@ -1,6 +1,7 @@
 import { DataId } from './IsographEnvironment';
 import { RefetchQueryNormalizationArtifactWrapper } from '../core/entrypoint';
 import { TopLevelReaderArtifact } from './reader';
+import { PromiseWrapper } from './PromiseWrapper';
 
 // TODO type this better
 export type VariableValue = string | number | boolean | null | object;
@@ -21,4 +22,5 @@ export type FragmentReference<
   readonly variables: Variables | null;
   // TODO: We should instead have ReaderAst<TClientFieldProps>
   readonly nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[];
+  readonly networkRequest: PromiseWrapper<void, any>;
 };

package/src/core/PromiseWrapper.ts

@@ -1,29 +1,75 @@
+export type AnyError = any;
+
 const NOT_SET: Symbol = Symbol('NOT_SET');
 type NotSet = typeof NOT_SET;
 
+type Result<T, E> =
+  | {
+      kind: 'Ok';
+      value: T;
+    }
+  | {
+      kind: 'Err';
+      error: E;
+    };
+
 /**
  * Invariant:
  * Before the promise is resolved, value becomes non-null.
  */
-export type PromiseWrapper<T> = {
+export type PromiseWrapper<T, E> = {
   readonly promise: Promise<T>;
-  value: Exclude<T, NotSet> | NotSet;
+  result: Result<Exclude<T, NotSet>, E> | NotSet;
 };
 
-export function wrapPromise<T>(promise: Promise<T>): PromiseWrapper<T> {
+export function wrapPromise<T>(promise: Promise<T>): PromiseWrapper<T, any> {
   // TODO confirm suspense works if the promise is already resolved.
-  const wrapper: PromiseWrapper<T> = { promise, value: NOT_SET };
-  promise.then((v) => {
-    // T is assignable to Exclude<T, Symbol> | Symbol
-    wrapper.value = v as any;
-  });
+  const wrapper: PromiseWrapper<T, any> = { promise, result: NOT_SET };
+  promise
+    .then((v) => {
+      // v is assignable to Exclude<T, Symbol> | Symbol
+      wrapper.result = { kind: 'Ok', value: v as any };
+    })
+    .catch((e) => {
+      // e is assignable to Exclude<T, Symbol> | Symbol
+      wrapper.result = { kind: 'Err', error: e as any };
+    });
   return wrapper;
 }
 
-export function useReadPromise<T>(p: PromiseWrapper<T>): T {
-  if (p.value !== NOT_SET) {
-    // Safety: p.value is either NOT_SET or an actual value.
-    return p.value as any;
+export function readPromise<T, E>(p: PromiseWrapper<T, E>): T {
+  const { result } = p;
+  if (result !== NOT_SET) {
+    // Safety: p.result is either NOT_SET or an actual value.
+    const resultKind = result as Result<T, any>;
+    if (resultKind.kind === 'Ok') {
+      return resultKind.value;
+    } else {
+      throw resultKind.error;
+    }
   }
+
   throw p.promise;
 }
+
+export type PromiseState<T, E> =
+  | {
+      kind: 'Pending';
+      promise: Promise<T>;
+    }
+  | Result<T, E>;
+
+export function getPromiseState<T, E>(
+  p: PromiseWrapper<T, E>,
+): PromiseState<T, E> {
+  const { result } = p;
+  if (result !== NOT_SET) {
+    // Safety: p.result is either NOT_SET or an actual value.
+    const resultKind = result as Result<T, any>;
+    return resultKind;
+  }
+  return {
+    kind: 'Pending',
+    promise: p.promise,
+  };
+}

package/src/core/cache.ts

@@ -1,5 +1,5 @@
 import { Factory, ParentCache } from '@isograph/react-disposable-state';
-import { PromiseWrapper } from './PromiseWrapper';
+import { AnyError, PromiseWrapper } from './PromiseWrapper';
 import {
   DataId,
   ROOT_ID,
@@ -80,15 +80,10 @@ export function getOrCreateCacheForArtifact<
   environment: IsographEnvironment,
   artifact: IsographEntrypoint<TReadFromStore, TClientFieldValue>,
   variables: Variables,
-): ParentCache<PromiseWrapper<TClientFieldValue>> {
+): ParentCache<PromiseWrapper<void, AnyError>> {
   const cacheKey = artifact.queryText + JSON.stringify(stableCopy(variables));
-  const factory: Factory<PromiseWrapper<TClientFieldValue>> = () =>
-    makeNetworkRequest<TClientFieldValue>(environment, artifact, variables);
-  return getOrCreateCache<PromiseWrapper<TClientFieldValue>>(
-    environment,
-    cacheKey,
-    factory,
-  );
+  const factory = () => makeNetworkRequest(environment, artifact, variables);
+  return getOrCreateCache(environment, cacheKey, factory);
 }
 
 type NetworkResponseScalarValue = string | number | boolean;
@@ -183,64 +178,92 @@ export function onNextChange(environment: IsographEnvironment): Promise<void> {
   });
 }
 
+// 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 withErrorHandling<T>(f: (t: T) => void): (t: T) => void {
+  return (t) => {
+    try {
+      return f(t);
+    } catch {}
+  };
+}
+
 function callSubscriptions(
   environment: IsographEnvironment,
   recordsEncounteredWhenNormalizing: Set<DataId>,
 ) {
-  environment.subscriptions.forEach((subscription) => {
-    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,
-          )
-        ) {
-          const newEncounteredDataAndRecords = readButDoNotEvaluate(
-            environment,
-            subscription.fragmentReference,
-          );
-
+  environment.subscriptions.forEach(
+    withErrorHandling((subscription) => {
+      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 (
-            !areEqualObjectsWithDeepComparison(
-              subscription.encounteredDataAndRecords.item,
-              newEncounteredDataAndRecords.item,
+            hasOverlappingIds(
+              recordsEncounteredWhenNormalizing,
+              subscription.encounteredDataAndRecords.encounteredRecords,
             )
           ) {
-            if (typeof window !== 'undefined' && window.__LOG) {
-              console.log('Deep equality - No', {
-                fragmentReference: subscription.fragmentReference,
-                old: subscription.encounteredDataAndRecords.item,
-                new: newEncounteredDataAndRecords.item,
-              });
-            }
-            // TODO deep compare values
-            subscription.callback(newEncounteredDataAndRecords);
-          } else {
-            if (typeof window !== 'undefined' && window.__LOG) {
-              console.log('Deep equality - Yes', {
-                fragmentReference: subscription.fragmentReference,
-                old: subscription.encounteredDataAndRecords.item,
-              });
+            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
+              {},
+            );
+
+            if (
+              !areEqualObjectsWithDeepComparison(
+                subscription.encounteredDataAndRecords.item,
+                newEncounteredDataAndRecords.item,
+              )
+            ) {
+              if (typeof window !== 'undefined' && window.__LOG) {
+                console.log('Deep equality - No', {
+                  fragmentReference: subscription.fragmentReference,
+                  old: subscription.encounteredDataAndRecords.item,
+                  new: newEncounteredDataAndRecords.item,
+                });
+              }
+              // TODO deep compare values
+              subscription.callback(newEncounteredDataAndRecords);
+            } else {
+              if (typeof window !== 'undefined' && window.__LOG) {
+                console.log('Deep equality - Yes', {
+                  fragmentReference: subscription.fragmentReference,
+                  old: subscription.encounteredDataAndRecords.item,
+                });
+              }
             }
           }
+          return;
+        }
+        case 'AnyRecords': {
+          return subscription.callback();
+        }
+        default: {
+          // Ensure we have covered all variants
+          const _: never = subscription;
+          _;
+          throw new Error('Unexpected case');
         }
-        return;
-      }
-      case 'AnyRecords': {
-        return subscription.callback();
-      }
-      default: {
-        // Ensure we have covered all variants
-        const _: never = subscription;
-        _;
-        throw new Error('Unexpected case');
       }
-    }
-  });
+    }),
+  );
 }
 
 function hasOverlappingIds(set1: Set<DataId>, set2: Set<DataId>): boolean {
@@ -563,7 +586,7 @@ function getStoreKeyChunkForArgumentValue(
       return argumentValue.value;
     }
     case 'Variable': {
-      return variables[argumentValue.name];
+      return variables[argumentValue.name] ?? 'null';
     }
     case 'String': {
       return argumentValue.value;

package/src/core/componentCache.ts

@@ -2,11 +2,13 @@ import { stableCopy } from './cache';
 import { IsographEnvironment } from './IsographEnvironment';
 import { FragmentReference } from './FragmentReference';
 import { useReadAndSubscribe } from '../react/useReadAndSubscribe';
+import { NetworkRequestReaderOptions } from './read';
 
 export function getOrCreateCachedComponent(
   environment: IsographEnvironment,
   componentName: string,
   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
@@ -27,7 +29,10 @@ export function getOrCreateCachedComponent(
     byArgs[stringifiedArgs] ??
     (() => {
       function Component(additionalRuntimeProps: { [key: string]: any }) {
-        const data = useReadAndSubscribe(environment, fragmentReference);
+        const data = useReadAndSubscribe(
+          fragmentReference,
+          networkRequestOptions,
+        );
 
         if (typeof window !== 'undefined' && window.__LOG) {
           console.log(

package/src/core/entrypoint.ts

@@ -74,3 +74,4 @@ export type ExtractReadFromStore<Type> =
   Type extends IsographEntrypoint<infer X, any> ? X : never;
 export type ExtractResolverResult<Type> =
   Type extends IsographEntrypoint<any, infer X> ? X : never;
+export type ExtractProps<Type> = Type extends React.FC<infer X> ? X : never;

package/src/core/makeNetworkRequest.ts

@@ -11,14 +11,14 @@ import {
   unretainQuery,
 } from './garbageCollection';
 import { IsographEnvironment } from './IsographEnvironment';
-import { PromiseWrapper, wrapPromise } from './PromiseWrapper';
+import { AnyError, PromiseWrapper, wrapPromise } from './PromiseWrapper';
 import { normalizeData } from './cache';
 
-export function makeNetworkRequest<T>(
+export function makeNetworkRequest(
   environment: IsographEnvironment,
   artifact: RefetchQueryNormalizationArtifact | IsographEntrypoint<any, any>,
   variables: Variables,
-): ItemCleanupPair<PromiseWrapper<T>> {
+): ItemCleanupPair<PromiseWrapper<void, AnyError>> {
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('make network request', artifact, variables);
   }
@@ -33,6 +33,13 @@ export function makeNetworkRequest<T>(
         console.log('network response', artifact, networkResponse);
       }
 
+      if (networkResponse.errors != null) {
+        // @ts-expect-error Why are we getting the wrong constructor here?
+        throw new Error('GraphQL network response had errors', {
+          cause: networkResponse,
+        });
+      }
+
       if (status.kind === 'UndisposedIncomplete') {
         normalizeData(
           environment,
@@ -51,13 +58,11 @@ export function makeNetworkRequest<T>(
         };
         retainQuery(environment, retainedQuery);
       }
-      // TODO return null
-      return networkResponse;
     });
 
   const wrapper = wrapPromise(promise);
 
-  const response: ItemCleanupPair<PromiseWrapper<T>> = [
+  const response: ItemCleanupPair<PromiseWrapper<void, AnyError>> = [
     wrapper,
     () => {
       if (status.kind === 'UndisposedComplete') {