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

package/src/core/read.ts

@@ -9,6 +9,7 @@ import {
   IsographEnvironment,
 } from './IsographEnvironment';
 import { makeNetworkRequest } from './makeNetworkRequest';
+import { PromiseWrapper } from './PromiseWrapper';
 import { ReaderAst } from './reader';
 import { Arguments } from './util';
 
@@ -19,21 +20,43 @@ export type WithEncounteredRecords<T> = {
 
 export function readButDoNotEvaluate<TReadFromStore extends Object>(
   environment: IsographEnvironment,
-  reference: FragmentReference<TReadFromStore, unknown>,
+  fragmentReference: FragmentReference<TReadFromStore, unknown>,
+  networkRequestOptions: NetworkRequestReaderOptions,
 ): WithEncounteredRecords<TReadFromStore> {
   const mutableEncounteredRecords = new Set<DataId>();
   const response = readData(
     environment,
-    reference.readerArtifact.readerAst,
-    reference.root,
-    reference.variables ?? {},
-    reference.nestedRefetchQueries,
+    fragmentReference.readerArtifact.readerAst,
+    fragmentReference.root,
+    fragmentReference.variables ?? {},
+    fragmentReference.nestedRefetchQueries,
+    fragmentReference.networkRequest,
+    networkRequestOptions,
     mutableEncounteredRecords,
   );
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('done reading', { response });
   }
   if (response.kind === 'MissingData') {
+    // There are two cases here that we care about:
+    // 1. the network request is in flight, we haven't suspend on it, and we want
+    //    to throw if it errors out. So, networkRequestOptions.suspendIfInFlight === false
+    //    and networkRequestOptions.throwOnNetworkError === true.
+    // 2. everything else
+    //
+    // In the first case, we cannot simply throw onNextChange, because if the network
+    // response errors out, we will not update the store, so the onNextChange promise
+    // will not resolve.
+    if (
+      !networkRequestOptions.suspendIfInFlight &&
+      networkRequestOptions.throwOnNetworkError
+    ) {
+      // TODO assert that the network request state is not Err
+      throw new Promise((resolve, reject) => {
+        onNextChange(environment).then(resolve);
+        fragmentReference.networkRequest.promise.catch(reject);
+      });
+    }
     throw onNextChange(environment);
   } else {
     return {
@@ -61,6 +84,8 @@ function readData<TReadFromStore>(
   root: DataId,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
+  networkRequest: PromiseWrapper<void, any>,
+  networkRequestOptions: NetworkRequestReaderOptions,
   mutableEncounteredRecords: Set<DataId>,
 ): ReadDataResult<TReadFromStore> {
   mutableEncounteredRecords.add(root);
@@ -126,6 +151,8 @@ function readData<TReadFromStore>(
               link.__link,
               variables,
               nestedRefetchQueries,
+              networkRequest,
+              networkRequestOptions,
               mutableEncounteredRecords,
             );
             if (result.kind === 'MissingData') {
@@ -183,6 +210,8 @@ function readData<TReadFromStore>(
           targetId,
           variables,
           nestedRefetchQueries,
+          networkRequest,
+          networkRequestOptions,
           mutableEncounteredRecords,
         );
         if (data.kind === 'MissingData') {
@@ -205,6 +234,10 @@ function readData<TReadFromStore>(
           variables,
           // Refetch fields just read the id, and don't need refetch query artifacts
           [],
+          // This is probably indicative of the fact that we are doing redundant checks
+          // on the status of this network request...
+          networkRequest,
+          networkRequestOptions,
           mutableEncounteredRecords,
         );
         if (data.kind === 'MissingData') {
@@ -256,6 +289,8 @@ function readData<TReadFromStore>(
             root,
             variables,
             resolverRefetchQueries,
+            networkRequest,
+            networkRequestOptions,
             mutableEncounteredRecords,
           );
           if (data.kind === 'MissingData') {
@@ -276,8 +311,10 @@ function readData<TReadFromStore>(
               readerArtifact: field.readerArtifact,
               root,
               variables: generateChildVariableMap(variables, field.arguments),
+              networkRequest,
               nestedRefetchQueries: resolverRefetchQueries,
             } as const,
+            networkRequestOptions,
           );
         }
         break;
@@ -290,6 +327,8 @@ function readData<TReadFromStore>(
           variables,
           // Refetch fields just read the id, and don't need refetch query artifacts
           [],
+          networkRequest,
+          networkRequestOptions,
           mutableEncounteredRecords,
         );
         if (refetchReaderParams.kind === 'MissingData') {
@@ -299,42 +338,50 @@ function readData<TReadFromStore>(
             nestedReason: refetchReaderParams,
           };
         } else {
-          target[field.alias] = (args: any) => [
-            // Stable id
-            root + '__' + field.name,
-            // Fetcher
-            () => {
-              // TODO we should use the reader AST for this
-              const includeReadOutData = (variables: any, readOutData: any) => {
-                variables.id = readOutData.id;
-                return variables;
-              };
-              const localVariables = includeReadOutData(
-                args ?? {},
-                refetchReaderParams.data,
-              );
-              writeQueryArgsToVariables(
-                localVariables,
-                field.queryArguments,
-                variables,
-              );
-              const [_networkRequest, disposeNetworkRequest] =
-                makeNetworkRequest(
-                  environment,
-                  field.entrypoint,
-                  localVariables,
-                );
-              const fragmentReference = {
-                kind: 'FragmentReference',
-                readerArtifact: field.entrypoint.readerArtifact,
-                // TODO localVariables is not guaranteed to have an id field
-                root: localVariables.id,
-                variables: localVariables,
-                nestedRefetchQueries: field.entrypoint.nestedRefetchQueries,
-              } as const;
-              return [fragmentReference, disposeNetworkRequest];
-            },
-          ];
+          target[field.alias] = (args: any) => {
+            // TODO we should use the reader AST for this
+            const includeReadOutData = (variables: any, readOutData: any) => {
+              variables.id = readOutData.id;
+              return variables;
+            };
+            const localVariables = includeReadOutData(
+              args ?? {},
+              refetchReaderParams.data,
+            );
+            writeQueryArgsToVariables(
+              localVariables,
+              field.queryArguments,
+              variables,
+            );
+
+            return [
+              // Stable id
+              root +
+                '/' +
+                field.name +
+                '/' +
+                stableStringifyArgs(localVariables),
+              // Fetcher
+              () => {
+                const [networkRequest, disposeNetworkRequest] =
+                  makeNetworkRequest(
+                    environment,
+                    field.entrypoint,
+                    localVariables,
+                  );
+                const fragmentReference = {
+                  kind: 'FragmentReference',
+                  readerArtifact: field.entrypoint.readerArtifact,
+                  // TODO localVariables is not guaranteed to have an id field
+                  root: localVariables.id,
+                  variables: localVariables,
+                  nestedRefetchQueries: field.entrypoint.nestedRefetchQueries,
+                  networkRequest,
+                } as FragmentReference<any, any>;
+                return [fragmentReference, disposeNetworkRequest];
+              },
+            ];
+          };
         }
         break;
       }
@@ -419,3 +466,23 @@ function writeQueryArgsToVariables(
     }
   }
 }
+
+export type NetworkRequestReaderOptions = {
+  suspendIfInFlight?: boolean;
+  throwOnNetworkError?: boolean;
+};
+
+// TODO use a description of the params for this?
+// TODO call stableStringifyArgs on the variable values, as well.
+// This doesn't matter for now, since we are just using primitive values
+// in the demo.
+function stableStringifyArgs(args: Object) {
+  const keys = Object.keys(args);
+  keys.sort();
+  let s = '';
+  for (const key of keys) {
+    // @ts-expect-error
+    s += `${key}=${JSON.stringify(args[key])};`;
+  }
+  return s;
+}

package/src/index.ts

@@ -4,7 +4,11 @@ export {
   type RetainedQuery,
   garbageCollectEnvironment,
 } from './core/garbageCollection';
-export { type PromiseWrapper } from './core/PromiseWrapper';
+export {
+  type PromiseWrapper,
+  readPromise,
+  getPromiseState,
+} from './core/PromiseWrapper';
 export { subscribe, normalizeData } from './core/cache';
 export { makeNetworkRequest } from './core/makeNetworkRequest';
 export {
@@ -21,36 +25,42 @@ export {
   defaultMissingFieldHandler,
 } from './core/IsographEnvironment';
 export {
-  EagerReaderArtifact,
-  ComponentReaderArtifact,
-  RefetchReaderArtifact,
-  ReaderAst,
-  ReaderAstNode,
-  ReaderLinkedField,
-  ReaderNonLoadableResolverField,
-  ReaderScalarField,
-  TopLevelReaderArtifact,
-  LoadableField,
+  type EagerReaderArtifact,
+  type ComponentReaderArtifact,
+  type RefetchReaderArtifact,
+  type ReaderAst,
+  type ReaderAstNode,
+  type ReaderLinkedField,
+  type ReaderNonLoadableResolverField,
+  type ReaderScalarField,
+  type TopLevelReaderArtifact,
+  type LoadableField,
 } from './core/reader';
 export {
-  NormalizationAst,
-  NormalizationAstNode,
-  NormalizationLinkedField,
-  NormalizationScalarField,
-  IsographEntrypoint,
+  type NormalizationAst,
+  type NormalizationAstNode,
+  type NormalizationLinkedField,
+  type NormalizationScalarField,
+  type IsographEntrypoint,
   assertIsEntrypoint,
-  RefetchQueryNormalizationArtifact,
-  RefetchQueryNormalizationArtifactWrapper,
+  type RefetchQueryNormalizationArtifact,
+  type RefetchQueryNormalizationArtifactWrapper,
+  type ExtractProps,
+  type ExtractReadFromStore,
+  type ExtractResolverResult,
 } from './core/entrypoint';
 export { readButDoNotEvaluate } from './core/read';
 export {
-  ExtractSecondParam,
-  Argument,
-  ArgumentName,
-  ArgumentValue,
-  Arguments,
+  type ExtractSecondParam,
+  type Argument,
+  type ArgumentName,
+  type ArgumentValue,
+  type Arguments,
 } from './core/util';
-export { type FragmentReference } from './core/FragmentReference';
+export {
+  type FragmentReference,
+  type Variables,
+} from './core/FragmentReference';
 
 export {
   IsographEnvironmentProvider,
@@ -58,7 +68,7 @@ export {
   type IsographEnvironmentProviderProps,
 } from './react/IsographEnvironmentProvider';
 export { useImperativeReference } from './react/useImperativeReference';
-export { FragmentReferenceReader } from './react/FragmentReferenceReader';
+export { FragmentReader } from './react/FragmentReader';
 export { useResult } from './react/useResult';
 export { useLazyReference } from './react/useLazyReference';
 export { useRerenderOnChange } from './react/useRerenderOnChange';

package/src/loadable-hooks/useClientSideDefer.ts

@@ -13,10 +13,10 @@ export function useClientSideDefer<TArgs, TResult>(
   args: TArgs,
 ): FragmentReference<any, TResult>;
 
-// TODO allow the user to pass props somehow
 export function useClientSideDefer<TArgs, TResult>(
   loadableField: LoadableField<TArgs, TResult>,
   args?: TArgs,
+  // TODO this should return { fragmentReference, networkRequestReference }
 ): FragmentReference<any, TResult> {
   // @ts-expect-error args is missing iff it has the type void
   const [id, loader] = loadableField(args);

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;
+  }
+}