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

package/src/react/{FragmentReferenceReader.tsx → FragmentReader.tsx}

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { ExtractReadFromStore, IsographEntrypoint } from '../core/entrypoint';
 import { FragmentReference } from '../core/FragmentReference';
 import { useResult } from './useResult';
+import { NetworkRequestReaderOptions } from '../core/read';
 
-export function FragmentReferenceReader<
+export function FragmentReader<
   TProps extends Record<any, any>,
   TEntrypoint extends IsographEntrypoint<any, React.FC<TProps>>,
 >(
@@ -14,6 +15,7 @@ export function FragmentReferenceReader<
           React.FC<{}>
         >;
         additionalProps?: TProps;
+        networkRequestOptions?: NetworkRequestReaderOptions;
       }
     : {
         fragmentReference: FragmentReference<
@@ -21,8 +23,12 @@ export function FragmentReferenceReader<
           React.FC<TProps>
         >;
         additionalProps: TProps;
+        networkRequestOptions?: NetworkRequestReaderOptions;
       },
 ): React.ReactNode {
-  const Component = useResult(props.fragmentReference);
+  const Component = useResult(
+    props.fragmentReference,
+    props.networkRequestOptions ?? {},
+  );
   return <Component {...props.additionalProps} />;
 }

package/src/react/useImperativeReference.ts

@@ -17,7 +17,7 @@ export function useImperativeReference<
   fragmentReference:
     | FragmentReference<TReadFromStore, TClientFieldValue>
     | UnassignedState;
-  loadfragmentReference: (variables: Variables) => void;
+  loadFragmentReference: (variables: Variables) => void;
 } {
   const { state, setState } =
     useUpdatableDisposableState<
@@ -26,8 +26,8 @@ export function useImperativeReference<
   const environment = useIsographEnvironment();
   return {
     fragmentReference: state,
-    loadfragmentReference: (variables: Variables) => {
-      const [_networkRequest, disposeNetworkRequest] = makeNetworkRequest(
+    loadFragmentReference: (variables: Variables) => {
+      const [networkRequest, disposeNetworkRequest] = makeNetworkRequest(
         environment,
         entrypoint,
         variables,
@@ -39,6 +39,7 @@ export function useImperativeReference<
           root: ROOT_ID,
           variables,
           nestedRefetchQueries: entrypoint.nestedRefetchQueries,
+          networkRequest,
         },
         () => {
           disposeNetworkRequest();

package/src/react/useLazyReference.ts

@@ -17,9 +17,7 @@ export function useLazyReference<
   const environment = useIsographEnvironment();
   const cache = getOrCreateCacheForArtifact(environment, entrypoint, variables);
 
-  // TODO add comment explaining why we never use this value
-  // @ts-ignore(6133)
-  const _data = useLazyDisposableState(cache).state;
+  const networkRequest = useLazyDisposableState(cache).state;
 
   return {
     fragmentReference: {
@@ -28,6 +26,7 @@ export function useLazyReference<
       root: ROOT_ID,
       variables,
       nestedRefetchQueries: entrypoint.nestedRefetchQueries,
+      networkRequest,
     },
   };
 }

package/src/react/useReadAndSubscribe.ts

@@ -1,22 +1,25 @@
 import { useState } from 'react';
 import { FragmentReference } from '../core/FragmentReference';
-import { IsographEnvironment } from '../core/IsographEnvironment';
-import { readButDoNotEvaluate } from '../core/read';
+import {
+  NetworkRequestReaderOptions,
+  readButDoNotEvaluate,
+} from '../core/read';
 import { useRerenderOnChange } from './useRerenderOnChange';
+import { useIsographEnvironment } from './IsographEnvironmentProvider';
 
 /**
  * Read the data from a fragment reference and subscribe to updates.
  * Does not pass the data to the fragment reference's resolver function.
  */
 export function useReadAndSubscribe<TReadFromStore extends Object>(
-  environment: IsographEnvironment,
   fragmentReference: FragmentReference<TReadFromStore, any>,
+  networkRequestOptions: NetworkRequestReaderOptions,
 ): TReadFromStore {
+  const environment = useIsographEnvironment();
   const [readOutDataAndRecords, setReadOutDataAndRecords] = useState(() =>
-    readButDoNotEvaluate(environment, fragmentReference),
+    readButDoNotEvaluate(environment, fragmentReference, networkRequestOptions),
   );
   useRerenderOnChange(
-    environment,
     readOutDataAndRecords,
     fragmentReference,
     setReadOutDataAndRecords,

package/src/react/useRerenderOnChange.ts

@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
-import { IsographEnvironment } from '../core/IsographEnvironment';
 import { subscribe } from '../core/cache';
 import { WithEncounteredRecords } from '../core/read';
 import { FragmentReference } from '../core/FragmentReference';
+import { useIsographEnvironment } from './IsographEnvironmentProvider';
 
 // TODO add unit tests for this. Add integration tests that test
 // behavior when the encounteredRecords underneath a fragment change.
 export function useRerenderOnChange<TReadFromStore extends Object>(
-  environment: IsographEnvironment,
   encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
   fragmentReference: FragmentReference<any, any>,
   setEncounteredDataAndRecords: (
     data: WithEncounteredRecords<TReadFromStore>,
   ) => void,
 ) {
+  const environment = useIsographEnvironment();
   useEffect(() => {
     return subscribe(
       environment,

package/src/react/useResult.ts

@@ -2,12 +2,20 @@ import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
 import { FragmentReference } from '../core/FragmentReference';
 import { getOrCreateCachedComponent } from '../core/componentCache';
 import { useReadAndSubscribe } from './useReadAndSubscribe';
+import { NetworkRequestReaderOptions } from '../core/read';
+import { getPromiseState, PromiseWrapper } from '../core/PromiseWrapper';
 
 export function useResult<TReadFromStore extends Object, TClientFieldValue>(
   fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
+  networkRequestOptions: NetworkRequestReaderOptions,
 ): TClientFieldValue {
   const environment = useIsographEnvironment();
 
+  maybeUnwrapNetworkRequest(
+    fragmentReference.networkRequest,
+    networkRequestOptions,
+  );
+
   switch (fragmentReference.readerArtifact.kind) {
     case 'ComponentReaderArtifact': {
       // @ts-expect-error
@@ -15,11 +23,30 @@ export function useResult<TReadFromStore extends Object, TClientFieldValue>(
         environment,
         fragmentReference.readerArtifact.componentName,
         fragmentReference,
+        networkRequestOptions,
       );
     }
     case 'EagerReaderArtifact': {
-      const data = useReadAndSubscribe(environment, fragmentReference);
+      const data = useReadAndSubscribe(
+        fragmentReference,
+        networkRequestOptions,
+      );
       return fragmentReference.readerArtifact.resolver(data);
     }
   }
 }
+
+export function maybeUnwrapNetworkRequest(
+  networkRequest: PromiseWrapper<void, any>,
+  networkRequestOptions: NetworkRequestReaderOptions,
+) {
+  const state = getPromiseState(networkRequest);
+  if (state.kind === 'Err' && networkRequestOptions.throwOnNetworkError) {
+    throw state.error;
+  } else if (
+    state.kind === 'Pending' &&
+    networkRequestOptions.suspendIfInFlight
+  ) {
+    throw state.promise;
+  }
+}