@isograph/react 0.4.3 → 0.5.0

package/src/core/startUpdate.ts

@@ -19,6 +19,13 @@ import {
   type StoreLink,
 } from './IsographEnvironment';
 import { logMessage } from './logging';
+import {
+  addStartUpdateStoreLayer,
+  getMutableStoreRecordProxy,
+  getOrInsertRecord,
+  type StartUpdateStoreLayer,
+  type StoreLayer,
+} from './optimisticProxy';
 import { readPromise, type PromiseWrapper } from './PromiseWrapper';
 import {
   readImperativelyLoadedField,
@@ -36,11 +43,10 @@ export function getOrCreateCachedStartUpdate<
 >(
   environment: IsographEnvironment,
   fragmentReference: FragmentReference<TReadFromStore, unknown>,
-  eagerResolverName: string,
   networkRequestOptions: NetworkRequestReaderOptions,
 ): ExtractStartUpdate<TReadFromStore> {
   return (environment.eagerReaderCache[
-    stableIdForFragmentReference(fragmentReference, eagerResolverName)
+    stableIdForFragmentReference(fragmentReference)
   ] ??= createStartUpdate(
     environment,
     fragmentReference,
@@ -56,28 +62,38 @@ export function createStartUpdate<TReadFromStore extends UnknownTReadFromStore>(
   return (updater) => {
     let mutableUpdatedIds: EncounteredIds = new Map();
 
-    let updatableData = createUpdatableProxy(
-      environment,
-      fragmentReference,
-      networkRequestOptions,
-      mutableUpdatedIds,
+    const startUpdate: StartUpdateStoreLayer['startUpdate'] = (storeLayer) => {
+      mutableUpdatedIds.clear();
+      let updatableData = createUpdatableProxy(
+        environment,
+        storeLayer,
+        fragmentReference,
+        networkRequestOptions,
+        mutableUpdatedIds,
+      );
+
+      try {
+        updater({ updatableData });
+      } catch (e) {
+        logMessage(environment, () => ({
+          kind: 'StartUpdateError',
+          error: e,
+        }));
+        throw e;
+      }
+    };
+
+    environment.store = addStartUpdateStoreLayer(
+      environment.store,
+      startUpdate,
     );
 
-    try {
-      updater({ updatableData });
-    } catch (e) {
-      logMessage(environment, () => ({
-        kind: 'StartUpdateError',
-        error: e,
-      }));
-      throw e;
-    } finally {
-      logMessage(environment, () => ({
-        kind: 'StartUpdateComplete',
-        updatedIds: mutableUpdatedIds,
-      }));
-      callSubscriptions(environment, mutableUpdatedIds);
-    }
+    logMessage(environment, () => ({
+      kind: 'StartUpdateComplete',
+      updatedIds: mutableUpdatedIds,
+    }));
+
+    callSubscriptions(environment, mutableUpdatedIds);
   };
 }
 
@@ -85,6 +101,7 @@ export function createUpdatableProxy<
   TReadFromStore extends UnknownTReadFromStore,
 >(
   environment: IsographEnvironment,
+  storeLayer: StoreLayer,
   fragmentReference: FragmentReference<TReadFromStore, unknown>,
   networkRequestOptions: NetworkRequestReaderOptions,
   mutableUpdatedIds: EncounteredIds,
@@ -95,6 +112,7 @@ export function createUpdatableProxy<
 
   return readUpdatableData(
     environment,
+    storeLayer,
     readerWithRefetchQueries.readerArtifact.readerAst,
     fragmentReference.root,
     fragmentReference.variables ?? {},
@@ -154,6 +172,7 @@ function defineCachedProperty<T>(
 
 function readUpdatableData<TReadFromStore extends UnknownTReadFromStore>(
   environment: IsographEnvironment,
+  storeLayer: StoreLayer,
   ast: ReaderAst<TReadFromStore>,
   root: StoreLink,
   variables: ExtractParameters<TReadFromStore>,
@@ -163,14 +182,7 @@ function readUpdatableData<TReadFromStore extends UnknownTReadFromStore>(
   mutableState: MutableInvalidationState,
   mutableUpdatedIds: EncounteredIds,
 ): ReadDataResultSuccess<ExtractUpdatableData<TReadFromStore>> {
-  let storeRecord = environment.store[root.__typename]?.[root.__link];
-  if (storeRecord == null) {
-    return {
-      kind: 'Success',
-      data: null as any,
-    };
-  }
-
+  const storeRecord = getMutableStoreRecordProxy(storeLayer, root);
   let target: { [index: string]: any } = {};
 
   for (const field of ast) {
@@ -196,6 +208,7 @@ function readUpdatableData<TReadFromStore extends UnknownTReadFromStore>(
           },
           field.isUpdatable
             ? (newValue) => {
+                const storeRecord = getOrInsertRecord(storeLayer.data, root);
                 storeRecord[storeRecordName] = newValue;
                 const updatedIds = insertEmptySetIfMissing(
                   mutableUpdatedIds,
@@ -226,6 +239,7 @@ function readUpdatableData<TReadFromStore extends UnknownTReadFromStore>(
               (ast, root) =>
                 readUpdatableData(
                   environment,
+                  storeLayer,
                   ast,
                   root,
                   variables,
@@ -243,6 +257,7 @@ function readUpdatableData<TReadFromStore extends UnknownTReadFromStore>(
           },
           'isUpdatable' in field && field.isUpdatable
             ? (newValue) => {
+                const storeRecord = getOrInsertRecord(storeLayer.data, root);
                 if (Array.isArray(newValue)) {
                   storeRecord[storeRecordName] = newValue.map((node) =>
                     assertLink(node?.__link),

package/src/index.ts

@@ -21,6 +21,7 @@ export {
   callSubscriptions,
   subscribe,
   normalizeData,
+  writeData,
   type NetworkResponseObject,
   type NetworkResponseValue,
   type NetworkResponseScalarValue,
@@ -33,7 +34,7 @@ export {
   type DataTypeValue,
   type IsographEnvironment,
   type IsographNetworkFunction,
-  type IsographStore,
+  type BaseStoreLayerData as IsographStore,
   type MissingFieldHandler,
   type StoreLink,
   type Link,

package/src/loadable-hooks/useClientSideDefer.ts

@@ -9,32 +9,10 @@ import {
 import { LoadableField } from '../core/reader';
 import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
 
-export function useClientSideDefer<
+type ArgsWithoutProvidedArgs<
   TReadFromStore extends UnknownTReadFromStore,
-  TResult,
->(
-  loadableField: LoadableField<
-    TReadFromStore,
-    TResult,
-    ExtractParameters<TReadFromStore>
-  >,
-  args?: Record<PropertyKey, never>,
-  fetchOptions?: FetchOptions<TResult>,
-): { fragmentReference: FragmentReference<TReadFromStore, TResult> };
-
-export function useClientSideDefer<
-  TReadFromStore extends UnknownTReadFromStore,
-  TResult,
   TProvidedArgs extends object,
->(
-  loadableField: LoadableField<
-    TReadFromStore,
-    TResult,
-    Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>
-  >,
-  args: Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>,
-  fetchOptions?: FetchOptions<TResult>,
-): { fragmentReference: FragmentReference<TReadFromStore, TResult> };
+> = Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>;
 
 export function useClientSideDefer<
   TReadFromStore extends UnknownTReadFromStore,
@@ -46,9 +24,21 @@ export function useClientSideDefer<
     TResult,
     Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>
   >,
-  args?: Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>,
-  fetchOptions?: FetchOptions<TResult>,
+  ...maybeRequiredArgs: {} extends ArgsWithoutProvidedArgs<
+    TReadFromStore,
+    TProvidedArgs
+  >
+    ? [
+        args?: ArgsWithoutProvidedArgs<TReadFromStore, TProvidedArgs>,
+        fetchOptions?: FetchOptions<TResult, never>,
+      ]
+    : [
+        args: ArgsWithoutProvidedArgs<TReadFromStore, TProvidedArgs>,
+        fetchOptions?: FetchOptions<TResult, never>,
+      ]
 ): { fragmentReference: FragmentReference<TReadFromStore, TResult> } {
+  const [args, fetchOptions] = maybeRequiredArgs;
+
   const [id, loader] = loadableField(args, fetchOptions ?? {});
   const environment = useIsographEnvironment();
   const cache = getOrCreateItemInSuspenseCache(environment, id, loader);
@@ -57,3 +47,63 @@ export function useClientSideDefer<
 
   return { fragmentReference };
 }
+
+// @ts-ignore
+function tsTests() {
+  let neverArgs!: LoadableField<
+    {
+      parameters: Record<string, never>;
+      data: {};
+    },
+    unknown
+  >;
+
+  let optionalArgs!: LoadableField<
+    {
+      parameters: {
+        foo?: string;
+      };
+      data: {};
+    },
+    unknown
+  >;
+
+  let requiredArgs!: LoadableField<
+    {
+      parameters: {
+        foo: string;
+      };
+      data: {};
+    },
+    unknown
+  >;
+
+  useClientSideDefer(neverArgs);
+  useClientSideDefer(neverArgs, {});
+  useClientSideDefer(neverArgs, {
+    // @ts-expect-error
+    foo: 'bar',
+  });
+
+  useClientSideDefer(optionalArgs);
+  useClientSideDefer(optionalArgs, {});
+  useClientSideDefer(optionalArgs, {
+    foo: 'bar',
+  });
+  useClientSideDefer(optionalArgs, {
+    // @ts-expect-error
+    foo: 12,
+  });
+
+  // @ts-expect-error
+  useClientSideDefer(requiredArgs);
+  // @ts-expect-error
+  useClientSideDefer(requiredArgs, {});
+  useClientSideDefer(requiredArgs, {
+    foo: 'bar',
+  });
+  useClientSideDefer(requiredArgs, {
+    // @ts-expect-error
+    foo: 12,
+  });
+}

package/src/loadable-hooks/useConnectionSpecPagination.ts

@@ -35,13 +35,16 @@ export type UsePaginationReturnValue<
       results: ReadonlyArray<TItem>;
     }
   | {
-      kind: 'Complete';
+      kind: 'HasMoreRecords';
       fetchMore: (
         count: number,
-        fetchOptions?: FetchOptions<Connection<TItem>>,
+        fetchOptions?: FetchOptions<Connection<TItem>, never>,
       ) => void;
       results: ReadonlyArray<TItem>;
-      hasNextPage: boolean;
+    }
+  | {
+      kind: 'NoMoreRecords';
+      results: ReadonlyArray<TItem>;
     };
 
 type LoadedFragmentReferences<
@@ -134,7 +137,6 @@ export function useConnectionSpecPagination<
               startUpdate: getOrCreateCachedStartUpdate(
                 environment,
                 fragmentReference,
-                readerWithRefetchQueries.readerArtifact.fieldName,
                 networkRequestOptions,
               ),
             }
@@ -208,7 +210,10 @@ export function useConnectionSpecPagination<
 
   const getFetchMore =
     (after: string | null) =>
-    (count: number, fetchOptions?: FetchOptions<Connection<TItem>>): void => {
+    (
+      count: number,
+      fetchOptions?: FetchOptions<Connection<TItem>, never>,
+    ): void => {
       const loadedField = loadableField(
         {
           after: after,
@@ -302,12 +307,18 @@ export function useConnectionSpecPagination<
   );
 
   if (!networkRequestStatus) {
-    return {
-      kind: 'Complete',
-      fetchMore: getFetchMore(initialState?.endCursor ?? null),
-      results: [],
-      hasNextPage: initialState?.hasNextPage ?? true,
-    };
+    if (initialState?.hasNextPage ?? true) {
+      return {
+        kind: 'HasMoreRecords',
+        fetchMore: getFetchMore(initialState?.endCursor ?? null),
+        results: [],
+      };
+    } else {
+      return {
+        kind: 'NoMoreRecords',
+        results: [],
+      };
+    }
   }
 
   switch (networkRequestStatus.kind) {
@@ -334,12 +345,18 @@ export function useConnectionSpecPagination<
         completedFragmentReferences,
       );
 
-      return {
-        results: results.edges,
-        hasNextPage: results.pageInfo.hasNextPage,
-        kind: 'Complete',
-        fetchMore: getFetchMore(results.pageInfo.endCursor),
-      };
+      if (results.pageInfo.hasNextPage) {
+        return {
+          kind: 'HasMoreRecords',
+          fetchMore: getFetchMore(results.pageInfo.endCursor),
+          results: results.edges,
+        };
+      } else {
+        return {
+          kind: 'NoMoreRecords',
+          results: results.edges,
+        };
+      }
     }
   }
 }

package/src/loadable-hooks/useImperativeLoadableField.ts

@@ -19,7 +19,7 @@ export type UseImperativeLoadableFieldReturn<
     // TODO this should be void iff all args are provided by the query, like in
     // useClientSideDefer.
     args: Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs> | void,
-    fetchOptions?: FetchOptions<TResult>,
+    fetchOptions?: FetchOptions<TResult, never>,
   ) => void;
 };
 
@@ -40,7 +40,7 @@ export function useImperativeLoadableField<
   return {
     loadFragmentReference: (
       args: Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs> | void,
-      fetchOptions?: FetchOptions<TResult>,
+      fetchOptions?: FetchOptions<TResult, never>,
     ) => {
       const [_id, loader] = loadableField(args, fetchOptions ?? {});
       setState(loader());

package/src/loadable-hooks/useSkipLimitPagination.ts

@@ -33,7 +33,7 @@ export type UseSkipLimitReturnValue<
       readonly kind: 'Complete';
       readonly fetchMore: (
         count: number,
-        fetchOptions?: FetchOptions<ReadonlyArray<TItem>>,
+        fetchOptions?: FetchOptions<ReadonlyArray<TItem>, never>,
       ) => void;
       readonly results: ReadonlyArray<TItem>;
     }
@@ -128,7 +128,6 @@ export function useSkipLimitPagination<
               startUpdate: getOrCreateCachedStartUpdate(
                 environment,
                 fragmentReference,
-                readerWithRefetchQueries.readerArtifact.kind,
                 networkRequestOptions,
               ),
             }
@@ -197,7 +196,7 @@ export function useSkipLimitPagination<
     (loadedSoFar: number) =>
     (
       count: number,
-      fetchOptions?: FetchOptions<ReadonlyArray<TItem>>,
+      fetchOptions?: FetchOptions<ReadonlyArray<TItem>, never>,
     ): void => {
       const loadedField = loadableField(
         {

package/src/react/FragmentReader.tsx

@@ -1,3 +1,4 @@
+import type { NetworkResponseObject } from '../core/cache';
 import {
   type ExtractReadFromStore,
   type IsographEntrypoint,
@@ -8,7 +9,8 @@ import { useResult } from './useResult';
 
 export function FragmentReader<
   TResult,
-  TEntrypoint extends IsographEntrypoint<any, TResult, any>,
+  TRawResponseType extends NetworkResponseObject,
+  TEntrypoint extends IsographEntrypoint<any, TResult, any, TRawResponseType>,
   TChildrenResult,
 >({
   fragmentReference,

package/src/react/FragmentRenderer.tsx

@@ -6,6 +6,7 @@ import {
 import { type FragmentReference } from '../core/FragmentReference';
 import { type NetworkRequestReaderOptions } from '../core/read';
 import { useResult } from './useResult';
+import type { NetworkResponseObject } from '../core/cache';
 
 export type IsExactlyIntrinsicAttributes<T> = T extends JSX.IntrinsicAttributes
   ? JSX.IntrinsicAttributes extends T
@@ -15,7 +16,13 @@ export type IsExactlyIntrinsicAttributes<T> = T extends JSX.IntrinsicAttributes
 
 export function FragmentRenderer<
   TProps extends Record<any, any>,
-  TEntrypoint extends IsographEntrypoint<any, React.FC<TProps>, any>,
+  TRawResponseType extends NetworkResponseObject,
+  TEntrypoint extends IsographEntrypoint<
+    any,
+    React.FC<TProps>,
+    any,
+    TRawResponseType
+  >,
 >(
   props: IsExactlyIntrinsicAttributes<TProps> extends true
     ? {

package/src/react/LoadableFieldReader.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type FetchOptions } from '../core/check';
 import {
   ExtractParameters,
@@ -8,25 +9,43 @@ import { type LoadableField } from '../core/reader';
 import { useClientSideDefer } from '../loadable-hooks/useClientSideDefer';
 import { useResult } from './useResult';
 
+type ArgsWithoutProvidedArgs<
+  TReadFromStore extends UnknownTReadFromStore,
+  TProvidedArgs extends object,
+> = Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>;
+
+type MaybeRequiredArgs<
+  TReadFromStore extends UnknownTReadFromStore,
+  TProvidedArgs extends object,
+> =
+  {} extends ArgsWithoutProvidedArgs<TReadFromStore, TProvidedArgs>
+    ? {
+        args?: ArgsWithoutProvidedArgs<TReadFromStore, TProvidedArgs>;
+      }
+    : {
+        args: ArgsWithoutProvidedArgs<TReadFromStore, TProvidedArgs>;
+      };
+
 export function LoadableFieldReader<
   TReadFromStore extends UnknownTReadFromStore,
   TResult,
   TProvidedArgs extends object,
   TChildrenResult,
->(props: {
-  loadableField: LoadableField<
-    TReadFromStore,
-    TResult,
-    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<TResult>;
-  networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
-  children: (arg: TResult) => TChildrenResult;
-}): TChildrenResult {
+>(
+  props: {
+    loadableField: LoadableField<
+      TReadFromStore,
+      TResult,
+      Omit<ExtractParameters<TReadFromStore>, keyof TProvidedArgs>
+    >;
+    fetchOptions?: FetchOptions<TResult, never>;
+    networkRequestOptions?: Partial<NetworkRequestReaderOptions>;
+    children: (arg: TResult) => TChildrenResult;
+  } & MaybeRequiredArgs<TReadFromStore, TProvidedArgs>,
+): TChildrenResult {
   const { fragmentReference } = useClientSideDefer(
     props.loadableField,
+    // @ts-expect-error
     props.args,
     props.fetchOptions,
   );
@@ -38,3 +57,95 @@ export function LoadableFieldReader<
 
   return props.children(readOutFragmentData);
 }
+
+// @ts-ignore
+function tsTests() {
+  let neverArgs!: LoadableField<
+    {
+      parameters: Record<string, never>;
+      data: {};
+    },
+    unknown
+  >;
+
+  let optionalArgs!: LoadableField<
+    {
+      parameters: {
+        foo?: string;
+      };
+      data: {};
+    },
+    unknown
+  >;
+
+  let requiredArgs!: LoadableField<
+    {
+      parameters: {
+        foo: string;
+      };
+      data: {};
+    },
+    unknown
+  >;
+
+  <LoadableFieldReader loadableField={neverArgs} children={() => {}} />;
+  <LoadableFieldReader
+    loadableField={neverArgs}
+    children={() => {}}
+    args={{}}
+  />;
+  <LoadableFieldReader
+    loadableField={neverArgs}
+    children={() => {}}
+    args={{
+      // @ts-expect-error
+      foo: 'bar',
+    }}
+  />;
+
+  <LoadableFieldReader loadableField={optionalArgs} children={() => {}} />;
+  <LoadableFieldReader
+    loadableField={optionalArgs}
+    children={() => {}}
+    args={{}}
+  />;
+  <LoadableFieldReader
+    loadableField={optionalArgs}
+    children={() => {}}
+    args={{
+      foo: 'bar',
+    }}
+  />;
+  <LoadableFieldReader
+    loadableField={optionalArgs}
+    children={() => {}}
+    args={{
+      // @ts-expect-error
+      foo: 12,
+    }}
+  />;
+
+  // @ts-expect-error
+  <LoadableFieldReader loadableField={requiredArgs} children={() => {}} />;
+  <LoadableFieldReader
+    loadableField={requiredArgs}
+    children={() => {}}
+    // @ts-expect-error
+    args={{}}
+  />;
+  <LoadableFieldReader
+    loadableField={requiredArgs}
+    children={() => {}}
+    args={{
+      foo: 'bar',
+    }}
+  />;
+  <LoadableFieldReader
+    loadableField={requiredArgs}
+    children={() => {}}
+    args={{
+      // @ts-expect-error
+      foo: 12,
+    }}
+  />;
+}