@isograph/react 0.4.3 → 0.5.0

package/src/core/read.ts

@@ -21,6 +21,7 @@ import {
 import {
   assertLink,
   getOrLoadIsographArtifact,
+  getOrLoadReaderWithRefetchQueries,
   IsographEnvironment,
   type DataTypeValue,
   type StoreLink,
@@ -28,6 +29,7 @@ import {
 } from './IsographEnvironment';
 import { logMessage } from './logging';
 import { maybeMakeNetworkRequest } from './makeNetworkRequest';
+import { getStoreRecordProxy } from './optimisticProxy';
 import {
   getPromiseState,
   NOT_SET,
@@ -39,6 +41,7 @@ import {
 import {
   ReaderAst,
   type LoadablySelectedField,
+  type ReaderClientPointer,
   type ReaderImperativelyLoadedField,
   type ReaderLinkedField,
   type ReaderNonLoadableResolverField,
@@ -152,7 +155,7 @@ function readData<TReadFromStore>(
     root.__typename,
   );
   encounteredIds.add(root.__link);
-  let storeRecord = environment.store[root.__typename]?.[root.__link];
+  let storeRecord = getStoreRecordProxy(environment.store, root);
   if (storeRecord === undefined) {
     return {
       kind: 'MissingData',
@@ -313,7 +316,7 @@ export function readLoadablySelectedFieldData(
     data: (
       args: any,
       // TODO get the associated type for FetchOptions from the loadably selected field
-      fetchOptions?: FetchOptions<any>,
+      fetchOptions?: FetchOptions<any, never>,
     ) => {
       // TODO we should use the reader AST for this
       const includeReadOutData = (variables: any, readOutData: any) => {
@@ -342,13 +345,13 @@ export function readLoadablySelectedFieldData(
         // Fetcher
         () => {
           const fragmentReferenceAndDisposeFromEntrypoint = (
-            entrypoint: IsographEntrypoint<any, any, any>,
+            entrypoint: IsographEntrypoint<any, any, any, {}>,
           ): [FragmentReference<any, any>, CleanupFn] => {
-            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,
@@ -361,7 +364,8 @@ export function readLoadablySelectedFieldData(
             const fragmentReference: FragmentReference<any, any> = {
               kind: 'FragmentReference',
               readerWithRefetchQueries,
-
+              fieldName,
+              readerArtifactKind,
               // TODO localVariables is not guaranteed to have an id field
               root,
               variables: localVariables,
@@ -395,11 +399,12 @@ export function readLoadablySelectedFieldData(
                 | { kind: 'Disposed' } = { kind: 'EntrypointNotLoaded' };
 
               const readerWithRefetchQueries = wrapPromise(
-                isographArtifactPromiseWrapper.promise.then((entrypoint) =>
-                  entrypoint.readerWithRefetchQueries.kind ===
-                  'ReaderWithRefetchQueriesLoader'
-                    ? entrypoint.readerWithRefetchQueries.loader()
-                    : entrypoint.readerWithRefetchQueries,
+                isographArtifactPromiseWrapper.promise.then(
+                  (entrypoint) =>
+                    getOrLoadReaderWithRefetchQueries(
+                      environment,
+                      entrypoint.readerWithRefetchQueries,
+                    ).readerWithRefetchQueries.promise,
                 ),
               );
               const networkRequest = wrapPromise(
@@ -425,7 +430,8 @@ export function readLoadablySelectedFieldData(
               const fragmentReference: FragmentReference<any, any> = {
                 kind: 'FragmentReference',
                 readerWithRefetchQueries,
-
+                fieldName: field.name,
+                readerArtifactKind: field.entrypoint.readerArtifactKind,
                 // TODO localVariables is not guaranteed to have an id field
                 root,
                 variables: localVariables,
@@ -561,6 +567,8 @@ export function readResolverFieldData(
   const fragment = {
     kind: 'FragmentReference',
     readerWithRefetchQueries: wrapResolvedValue(readerWithRefetchQueries),
+    fieldName: field.readerArtifact.fieldName,
+    readerArtifactKind: field.readerArtifact.kind,
     root,
     variables: generateChildVariableMap(variables, field.arguments),
     networkRequest,
@@ -593,7 +601,6 @@ export function readResolverFieldData(
           ? getOrCreateCachedStartUpdate(
               environment,
               fragment,
-              readerWithRefetchQueries.readerArtifact.fieldName,
               networkRequestOptions,
             )
           : undefined,
@@ -608,7 +615,6 @@ export function readResolverFieldData(
         kind: 'Success',
         data: getOrCreateCachedComponent(
           environment,
-          field.readerArtifact.fieldName,
           fragment,
           networkRequestOptions,
         ),
@@ -628,7 +634,7 @@ export function readScalarFieldData(
   root: StoreLink,
   variables: Variables,
 ): ReadDataResult<
-  string | number | boolean | StoreLink | DataTypeValue[] | null
+  string | number | boolean | StoreLink | readonly DataTypeValue[] | null
 > {
   const storeRecordName = getParentRecordKey(field, variables);
   const value = storeRecord[storeRecordName];
@@ -659,51 +665,7 @@ export function readLinkedFieldData(
   ) => ReadDataResult<object>,
 ): ReadDataResult<unknown> {
   const storeRecordName = getParentRecordKey(field, variables);
-  const value = storeRecord[storeRecordName];
-  if (Array.isArray(value)) {
-    const results = [];
-    for (const item of value) {
-      const link = assertLink(item);
-      if (link === undefined) {
-        return {
-          kind: 'MissingData',
-          reason:
-            'No link for ' +
-            storeRecordName +
-            ' on root ' +
-            root.__link +
-            '. Link is ' +
-            JSON.stringify(item),
-          recordLink: root,
-        };
-      } else if (link === null) {
-        results.push(null);
-        continue;
-      }
-
-      const result = readData(field.selections, link);
-      if (result.kind === 'MissingData') {
-        return {
-          kind: 'MissingData',
-          reason:
-            'Missing data for ' +
-            storeRecordName +
-            ' on root ' +
-            root.__link +
-            '. Link is ' +
-            JSON.stringify(item),
-          nestedReason: result,
-          recordLink: result.recordLink,
-        };
-      }
-      results.push(result.data);
-    }
-    return {
-      kind: 'Success',
-      data: results,
-    };
-  }
-  let link = assertLink(value);
+  let value = storeRecord[storeRecordName];
 
   if (field.condition) {
     const data = readData(field.condition.readerAst, root);
@@ -730,6 +692,8 @@ export function readLinkedFieldData(
       kind: 'FragmentReference',
       readerWithRefetchQueries: wrapResolvedValue(readerWithRefetchQueries),
       root,
+      fieldName: field.condition.fieldName,
+      readerArtifactKind: field.condition.kind,
       variables: generateChildVariableMap(
         variables,
         // TODO this is wrong
@@ -748,14 +712,85 @@ export function readLinkedFieldData(
             startUpdate: getOrCreateCachedStartUpdate(
               environment,
               fragment,
-              readerWithRefetchQueries.readerArtifact.fieldName,
               networkRequestOptions,
             ),
           }
         : undefined),
     });
-    link = condition;
+    value = condition;
+  }
+
+  if (Array.isArray(value)) {
+    const results = [];
+    for (const item of value) {
+      const link = assertLink(item);
+      if (link === undefined) {
+        return {
+          kind: 'MissingData',
+          reason:
+            'No link for ' +
+            storeRecordName +
+            ' on root ' +
+            root.__link +
+            '. Link is ' +
+            JSON.stringify(item),
+          recordLink: root,
+        };
+      } else if (link === null) {
+        results.push(null);
+        continue;
+      }
+
+      if (isClientPointer(field)) {
+        const result = readClientPointerData(
+          environment,
+          field,
+          link,
+          variables,
+          nestedRefetchQueries,
+          readData,
+        );
+        if (result.kind === 'MissingData') {
+          return {
+            kind: 'MissingData',
+            reason:
+              'Missing data for ' +
+              storeRecordName +
+              ' on root ' +
+              root.__link +
+              '. Link is ' +
+              JSON.stringify(item),
+            nestedReason: result,
+            recordLink: result.recordLink,
+          };
+        }
+        results.push(result.data);
+        continue;
+      }
+
+      const result = readData(field.selections, link);
+      if (result.kind === 'MissingData') {
+        return {
+          kind: 'MissingData',
+          reason:
+            'Missing data for ' +
+            storeRecordName +
+            ' on root ' +
+            root.__link +
+            '. Link is ' +
+            JSON.stringify(item),
+          nestedReason: result,
+          recordLink: result.recordLink,
+        };
+      }
+      results.push(result.data);
+    }
+    return {
+      kind: 'Success',
+      data: results,
+    };
   }
+  let link = assertLink(value);
 
   if (link === undefined) {
     // TODO make this configurable, and also generated and derived from the schema
@@ -798,111 +833,28 @@ export function readLinkedFieldData(
       data: null,
     };
   }
-  const targetId = link;
-  const { refetchQueryIndex } = field;
-  if (refetchQueryIndex != null) {
-    // if field.refetchQueryIndex is not null, then the field is a client pointer, i.e.
-    // it is like a loadable field that returns the selections.
-    const refetchReaderParams = readData(
-      [
-        {
-          kind: 'Scalar',
-          fieldName: 'id',
-          alias: null,
-          arguments: null,
-          isUpdatable: false,
-        },
-      ],
-      targetId,
-    );
 
-    if (refetchReaderParams.kind === 'MissingData') {
+  if (isClientPointer(field)) {
+    const data = readClientPointerData(
+      environment,
+      field,
+      link,
+      variables,
+      nestedRefetchQueries,
+      readData,
+    );
+    if (data.kind === 'MissingData') {
       return {
         kind: 'MissingData',
         reason:
-          'Missing data for ' + field.alias + ' on root ' + targetId.__link,
-        nestedReason: refetchReaderParams,
-        recordLink: refetchReaderParams.recordLink,
+          'Missing data for ' + storeRecordName + ' on root ' + root.__link,
+        nestedReason: data,
+        recordLink: data.recordLink,
       };
     }
-
-    const refetchQuery = nestedRefetchQueries[refetchQueryIndex];
-    if (refetchQuery == null) {
-      throw new Error(
-        'refetchQuery is null in RefetchField. This is indicative of a bug in Isograph.',
-      );
-    }
-    const refetchQueryArtifact = refetchQuery.artifact;
-    const allowedVariables = refetchQuery.allowedVariables;
-
-    return {
-      kind: 'Success',
-      data: (
-        args: any,
-        // TODO get the associated type for FetchOptions from the loadably selected field
-        fetchOptions?: FetchOptions<any>,
-      ) => {
-        const includeReadOutData = (variables: any, readOutData: any) => {
-          variables.id = readOutData.id;
-          return variables;
-        };
-        const localVariables = includeReadOutData(
-          args ?? {},
-          refetchReaderParams.data,
-        );
-        writeQueryArgsToVariables(localVariables, field.arguments, variables);
-
-        return [
-          // Stable id
-          targetId.__typename +
-            ':' +
-            targetId.__link +
-            '/' +
-            field.fieldName +
-            '/' +
-            stableStringifyArgs(localVariables),
-          // Fetcher
-          (): ItemCleanupPair<FragmentReference<any, any>> | undefined => {
-            const variables = includeReadOutData(
-              filterVariables({ ...args, ...localVariables }, allowedVariables),
-              refetchReaderParams.data,
-            );
-
-            const readerWithRefetchQueries = wrapResolvedValue({
-              kind: 'ReaderWithRefetchQueries',
-              readerArtifact: {
-                kind: 'EagerReaderArtifact',
-                fieldName: field.fieldName,
-                readerAst: field.selections,
-                resolver: ({ data }: { data: any }) => data,
-                hasUpdatable: false,
-              },
-              nestedRefetchQueries,
-            } as const);
-
-            const [networkRequest, disposeNetworkRequest] =
-              maybeMakeNetworkRequest(
-                environment,
-                refetchQueryArtifact,
-                variables,
-                readerWithRefetchQueries,
-                fetchOptions ?? null,
-              );
-
-            const fragmentReference: FragmentReference<any, any> = {
-              kind: 'FragmentReference',
-              readerWithRefetchQueries: readerWithRefetchQueries,
-              root: targetId,
-              variables,
-              networkRequest,
-            };
-            return [fragmentReference, disposeNetworkRequest];
-          },
-        ];
-      },
-    };
+    return data;
   }
-  const data = readData(field.selections, targetId);
+  const data = readData(field.selections, link);
   if (data.kind === 'MissingData') {
     return {
       kind: 'MissingData',
@@ -914,6 +866,124 @@ export function readLinkedFieldData(
   return data;
 }
 
+function isClientPointer(
+  field: ReaderLinkedField,
+): field is ReaderClientPointer {
+  return field.refetchQueryIndex !== null;
+}
+
+export function readClientPointerData(
+  environment: IsographEnvironment,
+  field: ReaderClientPointer,
+  root: StoreLink,
+  variables: Variables,
+  nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
+  readData: <TReadFromStore>(
+    ast: ReaderAst<TReadFromStore>,
+    root: StoreLink,
+  ) => ReadDataResult<object>,
+): ReadDataResult<unknown> {
+  const refetchReaderParams = readData(
+    [
+      {
+        kind: 'Scalar',
+        fieldName: 'id',
+        alias: null,
+        arguments: null,
+        isUpdatable: false,
+      },
+    ],
+    root,
+  );
+
+  if (refetchReaderParams.kind === 'MissingData') {
+    return {
+      kind: 'MissingData',
+      reason: 'Missing data for ' + field.alias + ' on root ' + root.__link,
+      nestedReason: refetchReaderParams,
+      recordLink: refetchReaderParams.recordLink,
+    };
+  }
+
+  const refetchQuery = nestedRefetchQueries[field.refetchQueryIndex];
+  if (refetchQuery == null) {
+    throw new Error(
+      'refetchQuery is null in RefetchField. This is indicative of a bug in Isograph.',
+    );
+  }
+  const refetchQueryArtifact = refetchQuery.artifact;
+  const allowedVariables = refetchQuery.allowedVariables;
+
+  return {
+    kind: 'Success',
+    data: (
+      args: any,
+      // TODO get the associated type for FetchOptions from the loadably selected field
+      fetchOptions?: FetchOptions<any, never>,
+    ) => {
+      const includeReadOutData = (variables: any, readOutData: any) => {
+        variables.id = readOutData.id;
+        return variables;
+      };
+      const localVariables = includeReadOutData(
+        args ?? {},
+        refetchReaderParams.data,
+      );
+      writeQueryArgsToVariables(localVariables, field.arguments, variables);
+
+      return [
+        // Stable id
+        root.__typename +
+          ':' +
+          root.__link +
+          '/' +
+          field.fieldName +
+          '/' +
+          stableStringifyArgs(localVariables),
+        // Fetcher
+        (): ItemCleanupPair<FragmentReference<any, any>> | undefined => {
+          const variables = includeReadOutData(
+            filterVariables({ ...args, ...localVariables }, allowedVariables),
+            refetchReaderParams.data,
+          );
+
+          const readerWithRefetchQueries = wrapResolvedValue({
+            kind: 'ReaderWithRefetchQueries',
+            readerArtifact: {
+              kind: 'EagerReaderArtifact',
+              fieldName: field.fieldName,
+              readerAst: field.selections,
+              resolver: ({ data }: { data: any }) => data,
+              hasUpdatable: false,
+            },
+            nestedRefetchQueries,
+          } as const);
+
+          const [networkRequest, disposeNetworkRequest] =
+            maybeMakeNetworkRequest(
+              environment,
+              refetchQueryArtifact,
+              variables,
+              readerWithRefetchQueries,
+              fetchOptions ?? null,
+            );
+
+          const fragmentReference: FragmentReference<any, any> = {
+            kind: 'FragmentReference',
+            fieldName: field.fieldName,
+            readerArtifactKind: 'EagerReaderArtifact',
+            readerWithRefetchQueries: readerWithRefetchQueries,
+            root,
+            variables,
+            networkRequest,
+          };
+          return [fragmentReference, disposeNetworkRequest];
+        },
+      ];
+    },
+  };
+}
+
 export type NetworkRequestReaderOptions = {
   suspendIfInFlight: boolean;
   throwOnNetworkError: boolean;

package/src/core/reader.ts

@@ -31,7 +31,7 @@ export type EagerReaderArtifact<
   TClientFieldValue,
 > = {
   readonly kind: 'EagerReaderArtifact';
-  readonly fieldName: string;
+  readonly fieldName: ComponentOrFieldName;
   readonly readerAst: ReaderAst<TReadFromStore>;
   readonly resolver: (
     data: ResolverFirstParameter<TReadFromStore>,
@@ -110,7 +110,7 @@ export type ReaderLinkedField = {
   readonly arguments: Arguments | null;
   readonly condition: EagerReaderArtifact<
     { data: any; parameters: any; startUpdate?: StartUpdate<any> },
-    StoreLink | null
+    StoreLink | null | (StoreLink | null)[] | StoreLink[]
   > | null;
   readonly isUpdatable: boolean;
   /**
@@ -119,6 +119,10 @@ export type ReaderLinkedField = {
   readonly refetchQueryIndex: number | null;
 };
 
+export interface ReaderClientPointer extends ReaderLinkedField {
+  readonly refetchQueryIndex: number;
+}
+
 export type ReaderNonLoadableResolverField = {
   readonly kind: 'Resolver';
   readonly alias: string;
@@ -147,10 +151,10 @@ export type LoadablySelectedField = {
   readonly queryArguments: Arguments | null;
   readonly refetchReaderAst: ReaderAst<any>;
 
-  // TODO we should not type these as any
+  // TODO we should not type these as any.
   readonly entrypoint:
-    | IsographEntrypoint<any, any, any>
-    | IsographEntrypointLoader<any, any>;
+    | IsographEntrypoint<any, any, any, any>
+    | IsographEntrypointLoader<any, any, any>;
 };
 
 export type StableId = string;
@@ -173,5 +177,5 @@ export type LoadableField<
   // user-facing API. Users should only interact with LoadableFields via APIs
   // like useClientSideDefer. These APIs should have a nullable fetchOptions
   // parameter, and provide a default value ({}) to the LoadableField.
-  fetchOptions: FetchOptions<TResult>,
+  fetchOptions: FetchOptions<TResult, never>,
 ) => [StableId, Factory<FragmentReference<TReadFromStore, TResult>>];