@isograph/react 0.0.0-main-0eb53a17 → 0.0.0-main-cddcd660

package/src/core/read.ts

@@ -23,7 +23,7 @@ import {
   getOrLoadIsographArtifact,
   IsographEnvironment,
   type DataTypeValue,
-  type Link,
+  type StoreLink,
   type StoreRecord,
 } from './IsographEnvironment';
 import { logMessage } from './logging';
@@ -134,13 +134,13 @@ export type ReadDataResult<Data> =
       readonly kind: 'MissingData';
       readonly reason: string;
       readonly nestedReason?: ReadDataResult<unknown>;
-      readonly recordLink: Link;
+      readonly recordLink: StoreLink;
     };
 
 function readData<TReadFromStore>(
   environment: IsographEnvironment,
   ast: ReaderAst<TReadFromStore>,
-  root: Link,
+  root: StoreLink,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
   networkRequest: PromiseWrapper<void, any>,
@@ -281,7 +281,7 @@ function readData<TReadFromStore>(
 export function readLoadablySelectedFieldData(
   environment: IsographEnvironment,
   field: LoadablySelectedField,
-  root: Link,
+  root: StoreLink,
   variables: Variables,
   networkRequest: PromiseWrapper<void, any>,
   networkRequestOptions: NetworkRequestReaderOptions,
@@ -534,7 +534,7 @@ function writeQueryArgsToVariables(
 export function readResolverFieldData(
   environment: IsographEnvironment,
   field: ReaderNonLoadableResolverField,
-  root: Link,
+  root: StoreLink,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
   networkRequest: PromiseWrapper<void, any>,
@@ -625,9 +625,11 @@ export function readResolverFieldData(
 export function readScalarFieldData(
   field: ReaderScalarField,
   storeRecord: StoreRecord,
-  root: Link,
+  root: StoreLink,
   variables: Variables,
-): ReadDataResult<string | number | boolean | Link | DataTypeValue[] | null> {
+): ReadDataResult<
+  string | number | boolean | StoreLink | DataTypeValue[] | null
+> {
   const storeRecordName = getParentRecordKey(field, variables);
   const value = storeRecord[storeRecordName];
   // TODO consider making scalars into discriminated unions. This probably has
@@ -646,14 +648,14 @@ export function readLinkedFieldData(
   environment: IsographEnvironment,
   field: ReaderLinkedField,
   storeRecord: StoreRecord,
-  root: Link,
+  root: StoreLink,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
   networkRequest: PromiseWrapper<void, any>,
   networkRequestOptions: NetworkRequestReaderOptions,
   readData: <TReadFromStore>(
     ast: ReaderAst<TReadFromStore>,
-    root: Link,
+    root: StoreLink,
   ) => ReadDataResult<object>,
 ): ReadDataResult<unknown> {
   const storeRecordName = getParentRecordKey(field, variables);
@@ -944,7 +946,7 @@ function stableStringifyArgs(args: object) {
 export function readImperativelyLoadedField(
   environment: IsographEnvironment,
   field: ReaderImperativelyLoadedField,
-  root: Link,
+  root: StoreLink,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
   networkRequest: PromiseWrapper<void, any>,

package/src/core/reader.ts

@@ -14,7 +14,7 @@ import {
 import {
   ComponentOrFieldName,
   IsographEnvironment,
-  type Link,
+  type StoreLink,
 } from './IsographEnvironment';
 import { Arguments } from './util';
 
@@ -71,7 +71,7 @@ export type RefetchReaderArtifact = {
     variables: any,
     // TODO type this better
     filteredVariables: any,
-    rootLink: Link,
+    rootLink: StoreLink,
     readerArtifact: TopLevelReaderArtifact<any, any, any> | null,
     // TODO type this better
     nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
@@ -110,7 +110,7 @@ export type ReaderLinkedField = {
   readonly arguments: Arguments | null;
   readonly condition: EagerReaderArtifact<
     { data: any; parameters: any; startUpdate?: StartUpdate<any> },
-    Link | null
+    StoreLink | null
   > | null;
   readonly isUpdatable: boolean;
   /**

package/src/core/startUpdate.ts

@@ -16,8 +16,9 @@ import {
 import {
   assertLink,
   type IsographEnvironment,
-  type Link,
+  type StoreLink,
 } from './IsographEnvironment';
+import { logMessage } from './logging';
 import { readPromise, type PromiseWrapper } from './PromiseWrapper';
 import {
   readImperativelyLoadedField,
@@ -65,8 +66,16 @@ export function createStartUpdate<TReadFromStore extends UnknownTReadFromStore>(
     try {
       updater(data);
     } catch (e) {
+      logMessage(environment, () => ({
+        kind: 'StartUpdateError',
+        error: e,
+      }));
       throw e;
     } finally {
+      logMessage(environment, () => ({
+        kind: 'StartUpdateComplete',
+        updatedIds: mutableUpdatedIds,
+      }));
       callSubscriptions(environment, mutableUpdatedIds);
     }
   };
@@ -146,7 +155,7 @@ function defineCachedProperty<T>(
 function readUpdatableData<TReadFromStore extends UnknownTReadFromStore>(
   environment: IsographEnvironment,
   ast: ReaderAst<TReadFromStore>,
-  root: Link,
+  root: StoreLink,
   variables: ExtractParameters<TReadFromStore>,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
   networkRequest: PromiseWrapper<void, any>,

package/src/index.ts

@@ -35,6 +35,7 @@ export {
   type IsographNetworkFunction,
   type IsographStore,
   type MissingFieldHandler,
+  type StoreLink,
   type Link,
   type StoreRecord,
   type CacheMap,
@@ -141,10 +142,12 @@ export {
   type UseImperativeReferenceResult,
 } from './react/useImperativeReference';
 export {
-  FragmentReader,
+  FragmentRenderer,
   type IsExactlyIntrinsicAttributes,
-} from './react/FragmentReader';
+} from './react/FragmentRenderer';
+export { FragmentReader } from './react/FragmentReader';
 export { LoadableFieldReader } from './react/LoadableFieldReader';
+export { LoadableFieldRenderer } from './react/LoadableFieldRenderer';
 export { useResult } from './react/useResult';
 export {
   useReadAndSubscribe,

package/src/react/FragmentReader.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   type ExtractReadFromStore,
   type IsographEntrypoint,
@@ -7,40 +6,22 @@ import { type FragmentReference } from '../core/FragmentReference';
 import { type NetworkRequestReaderOptions } from '../core/read';
 import { useResult } from './useResult';
 
-export type IsExactlyIntrinsicAttributes<T> = T extends JSX.IntrinsicAttributes
-  ? JSX.IntrinsicAttributes extends T
-    ? true
-    : false
-  : false;
-
 export function FragmentReader<
-  TProps extends Record<any, any>,
-  TEntrypoint extends IsographEntrypoint<any, React.FC<TProps>, any>,
->(
-  props: IsExactlyIntrinsicAttributes<TProps> extends true
-    ? {
-        fragmentReference: FragmentReference<
-          ExtractReadFromStore<TEntrypoint>,
-          React.FC<TProps>
-        >;
-        additionalProps?: Record<PropertyKey, never>;
-        networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
-      }
-    : {
-        fragmentReference: FragmentReference<
-          ExtractReadFromStore<TEntrypoint>,
-          React.FC<TProps>
-        >;
-        additionalProps: Omit<TProps, keyof JSX.IntrinsicAttributes>;
-        networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
-      },
-): React.ReactNode {
-  const Component = useResult(
-    props.fragmentReference,
-    props.networkRequestOptions,
-  );
-  // TypeScript is not understanding that if additionalProps is Record<PropertyKey, never>,
-  // it means that TProps === JSX.IntrinsicAttributes.
-  // @ts-expect-error
-  return <Component {...props.additionalProps} />;
+  TResult,
+  TEntrypoint extends IsographEntrypoint<any, TResult, any>,
+  TChildrenResult,
+>({
+  fragmentReference,
+  networkRequestOptions,
+  children,
+}: {
+  fragmentReference: FragmentReference<
+    ExtractReadFromStore<TEntrypoint>,
+    TResult
+  >;
+  networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
+  children: (data: TResult) => TChildrenResult;
+}): TChildrenResult {
+  const result = useResult(fragmentReference, networkRequestOptions);
+  return children(result);
 }

package/src/react/FragmentRenderer.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {
+  type ExtractReadFromStore,
+  type IsographEntrypoint,
+} from '../core/entrypoint';
+import { type FragmentReference } from '../core/FragmentReference';
+import { type NetworkRequestReaderOptions } from '../core/read';
+import { useResult } from './useResult';
+
+export type IsExactlyIntrinsicAttributes<T> = T extends JSX.IntrinsicAttributes
+  ? JSX.IntrinsicAttributes extends T
+    ? true
+    : false
+  : false;
+
+export function FragmentRenderer<
+  TProps extends Record<any, any>,
+  TEntrypoint extends IsographEntrypoint<any, React.FC<TProps>, any>,
+>(
+  props: IsExactlyIntrinsicAttributes<TProps> extends true
+    ? {
+        fragmentReference: FragmentReference<
+          ExtractReadFromStore<TEntrypoint>,
+          React.FC<TProps>
+        >;
+        additionalProps?: Record<PropertyKey, never>;
+        networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
+      }
+    : {
+        fragmentReference: FragmentReference<
+          ExtractReadFromStore<TEntrypoint>,
+          React.FC<TProps>
+        >;
+        additionalProps: Omit<TProps, keyof JSX.IntrinsicAttributes>;
+        networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
+      },
+): React.ReactNode {
+  const Component = useResult(
+    props.fragmentReference,
+    props.networkRequestOptions,
+  );
+  // TypeScript is not understanding that if additionalProps is Record<PropertyKey, never>,
+  // it means that TProps === JSX.IntrinsicAttributes.
+  // @ts-expect-error
+  return <Component {...props.additionalProps} />;
+}

package/src/react/LoadableFieldReader.tsx

@@ -8,9 +8,6 @@ import { type LoadableField } from '../core/reader';
 import { useClientSideDefer } from '../loadable-hooks/useClientSideDefer';
 import { useResult } from './useResult';
 
-// TODO
-// - LoadableFieldRenderer, which works for @loadable fields that are components,
-//   i.e. just renders the resulting component
 export function LoadableFieldReader<
   TReadFromStore extends UnknownTReadFromStore,
   TResult,

package/src/react/LoadableFieldRenderer.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { type FetchOptions } from '../core/check';
+import {
+  ExtractParameters,
+  type UnknownTReadFromStore,
+} from '../core/FragmentReference';
+import { type NetworkRequestReaderOptions } from '../core/read';
+import { type LoadableField } from '../core/reader';
+import { useClientSideDefer } from '../loadable-hooks/useClientSideDefer';
+import { useResult } from './useResult';
+
+export function LoadableFieldRenderer<
+  TReadFromStore extends UnknownTReadFromStore,
+  TProvidedArgs extends object,
+  TChildrenResult,
+  TProps,
+>(props: {
+  loadableField: LoadableField<
+    TReadFromStore,
+    React.FC<TProps>,
+    Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>
+  >;
+  // TODO we can improve this to not require args if its an empty object
+  args: Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>;
+  fetchOptions?: FetchOptions<React.FC<TProps>>;
+  networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
+  additionalProps: Omit<TProps, keyof JSX.IntrinsicAttributes>;
+}): TChildrenResult {
+  const { fragmentReference } = useClientSideDefer(
+    props.loadableField,
+    props.args,
+    props.fetchOptions,
+  );
+
+  const Component = useResult(fragmentReference, props.networkRequestOptions);
+
+  // TODO we probably can figure out a way to convince TypeScript of
+  // the validity of this.
+  // @ts-expect-error
+  return <Component {...props.additionalProps} />;
+}

package/src/tests/__isograph/Economist/link/output_type.ts

@@ -0,0 +1,2 @@
+import type { Link } from '@isograph/react';
+export type Economist__link__output_type = Link<"Economist">;

package/src/tests/__isograph/Node/asEconomist/resolver_reader.ts

@@ -16,7 +16,7 @@ const readerAst: ReaderAst<{ data: any, parameters: Record<PropertyKey, never> }
 
 const artifact: EagerReaderArtifact<
   { data: any, parameters: Record<PropertyKey, never> },
-  Link | null
+  Link<"Economist"> | null
 > = {
   kind: "EagerReaderArtifact",
   fieldName: "Node.asEconomist",

package/src/tests/__isograph/Node/link/output_type.ts

@@ -0,0 +1,3 @@
+import type { Link } from '@isograph/react';
+export type Node__link__output_type = 
+  | Link<"Economist">;

package/src/tests/__isograph/Query/linkedUpdate/param_type.ts

@@ -1,4 +1,4 @@
-import type { Link } from '@isograph/react';
+import { type Node__link__output_type } from '../../Node/link/output_type';
 import type { StartUpdate } from '@isograph/react';
 
 export type Query__linkedUpdate__param = {
@@ -15,7 +15,7 @@ A client pointer for the Economist type.
       /**
 A store Link for the Node type.
       */
-      readonly link: Link,
+      readonly link: Node__link__output_type,
       /**
 A client pointer for the Economist type.
       */
@@ -34,12 +34,12 @@ A client pointer for the Economist type.
         name: string,
       } | null),
     } | null),
-    set node(value: ({ link: Link } | null)),
+    set node(value: ({ link: Node__link__output_type } | null)),
     readonly john_stuart_mill: ({
       /**
 A store Link for the Node type.
       */
-      readonly link: Link,
+      readonly link: Node__link__output_type,
       /**
 A client pointer for the Economist type.
       */

package/src/tests/__isograph/iso.ts

@@ -16,7 +16,7 @@ import entrypoint_Query__subquery from '../__isograph/Query/subquery/entrypoint'
 // This means that the type of the exported iso literal is exactly
 // the type of the passed-in function, which takes one parameter
 // of type TParam.
-type IdentityWithParam<TParam extends object> = <TClientFieldReturn>(
+type IdentityWithParam<TParam extends object, TReturnConstraint = unknown> = <TClientFieldReturn extends TReturnConstraint>(
   clientField: (param: TParam) => TClientFieldReturn
 ) => (param: TParam) => TClientFieldReturn;
 

package/src/tests/__isograph/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "jsx": "preserve",
+        "esModuleInterop": true
+    }
+}