@isograph/react 0.4.3 → 0.5.1

package/src/loadable-hooks/useConnectionSpecPagination.ts

@@ -1,29 +1,27 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import type { ItemCleanupPair } from '@isograph/disposable-types';
 import {
   UNASSIGNED_STATE,
   useUpdatableDisposableState,
 } from '@isograph/react-disposable-state';
-import {
-  createReferenceCountedPointer,
-  ReferenceCountedPointer,
-} from '@isograph/reference-counted-pointer';
+import type { ReferenceCountedPointer } from '@isograph/reference-counted-pointer';
+import { createReferenceCountedPointer } from '@isograph/reference-counted-pointer';
 import { useState } from 'react';
 import { subscribeToAnyChange } from '../core/cache';
-import { FetchOptions } from '../core/check';
-import {
+import type { FetchOptions } from '../core/check';
+import type {
   FragmentReference,
-  type UnknownTReadFromStore,
+  UnknownTReadFromStore,
 } from '../core/FragmentReference';
 import { getPromiseState, readPromise } from '../core/PromiseWrapper';
 import {
   readButDoNotEvaluate,
   type WithEncounteredRecords,
 } from '../core/read';
-import { LoadableField, type ReaderAst } from '../core/reader';
+import type { LoadableField, ReaderAst } from '../core/reader';
 import { getOrCreateCachedStartUpdate } from '../core/startUpdate';
 import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
+import { maybeUnwrapNetworkRequest } from '../react/maybeUnwrapNetworkRequest';
 import { useSubscribeToMultiple } from '../react/useReadAndSubscribe';
-import { maybeUnwrapNetworkRequest } from '../react/useResult';
 
 export type UsePaginationReturnValue<
   TReadFromStore extends UnknownTReadFromStore,
@@ -35,13 +33,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 +135,6 @@ export function useConnectionSpecPagination<
               startUpdate: getOrCreateCachedStartUpdate(
                 environment,
                 fragmentReference,
-                readerWithRefetchQueries.readerArtifact.fieldName,
                 networkRequestOptions,
               ),
             }
@@ -208,7 +208,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,
@@ -259,7 +262,7 @@ export function useConnectionSpecPagination<
   const mostRecentFragmentReference =
     mostRecentItem?.[0].getItemIfNotDisposed();
 
-  if (mostRecentItem && mostRecentFragmentReference === null) {
+  if (mostRecentItem != null && mostRecentFragmentReference == null) {
     throw new Error(
       'FragmentReference is unexpectedly disposed. \
       This is indicative of a bug in Isograph.',
@@ -267,11 +270,15 @@ export function useConnectionSpecPagination<
   }
 
   const networkRequestStatus =
-    mostRecentFragmentReference &&
-    getPromiseState(mostRecentFragmentReference.networkRequest);
+    mostRecentFragmentReference != null
+      ? {
+          mostRecentFragmentReference,
+          state: getPromiseState(mostRecentFragmentReference.networkRequest),
+        }
+      : null;
 
   const slicedFragmentReferences =
-    networkRequestStatus?.kind === 'Ok'
+    networkRequestStatus?.state?.kind === 'Ok'
       ? loadedReferences
       : loadedReferences.slice(0, loadedReferences.length - 1);
 
@@ -301,16 +308,22 @@ export function useConnectionSpecPagination<
     subscribeCompletedFragmentReferences(completedFragmentReferences),
   );
 
-  if (!networkRequestStatus) {
-    return {
-      kind: 'Complete',
-      fetchMore: getFetchMore(initialState?.endCursor ?? null),
-      results: [],
-      hasNextPage: initialState?.hasNextPage ?? true,
-    };
+  if (networkRequestStatus == null) {
+    if (initialState?.hasNextPage ?? true) {
+      return {
+        kind: 'HasMoreRecords',
+        fetchMore: getFetchMore(initialState?.endCursor ?? null),
+        results: [],
+      };
+    } else {
+      return {
+        kind: 'NoMoreRecords',
+        results: [],
+      };
+    }
   }
 
-  switch (networkRequestStatus.kind) {
+  switch (networkRequestStatus.state.kind) {
     case 'Pending': {
       const unsubscribe = subscribeToAnyChange(environment, () => {
         unsubscribe();
@@ -323,23 +336,29 @@ export function useConnectionSpecPagination<
       return {
         results: results.edges,
         kind: 'Pending',
-        pendingFragment: mostRecentFragmentReference,
+        pendingFragment: networkRequestStatus.mostRecentFragmentReference,
       };
     }
     case 'Err': {
-      throw networkRequestStatus.error;
+      throw networkRequestStatus.state.error;
     }
     case 'Ok': {
       const results = readCompletedFragmentReferences(
         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

@@ -2,12 +2,12 @@ import {
   UNASSIGNED_STATE,
   useUpdatableDisposableState,
 } from '@isograph/react-disposable-state';
-import { FetchOptions } from '../core/check';
-import {
+import type { FetchOptions } from '../core/check';
+import type {
   ExtractParameters,
   FragmentReference,
 } from '../core/FragmentReference';
-import { LoadableField } from '../core/reader';
+import type { LoadableField } from '../core/reader';
 
 export type UseImperativeLoadableFieldReturn<
   TReadFromStore extends { data: object; parameters: object },
@@ -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

@@ -1,29 +1,27 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import type { ItemCleanupPair } from '@isograph/disposable-types';
 import {
   UNASSIGNED_STATE,
   useUpdatableDisposableState,
 } from '@isograph/react-disposable-state';
-import {
-  createReferenceCountedPointer,
-  ReferenceCountedPointer,
-} from '@isograph/reference-counted-pointer';
+import type { ReferenceCountedPointer } from '@isograph/reference-counted-pointer';
+import { createReferenceCountedPointer } from '@isograph/reference-counted-pointer';
 import { useState } from 'react';
 import { subscribeToAnyChange } from '../core/cache';
-import { FetchOptions } from '../core/check';
-import {
+import type { FetchOptions } from '../core/check';
+import type {
   FragmentReference,
-  type UnknownTReadFromStore,
+  UnknownTReadFromStore,
 } from '../core/FragmentReference';
 import { getPromiseState, readPromise } from '../core/PromiseWrapper';
 import {
   readButDoNotEvaluate,
   type WithEncounteredRecords,
 } from '../core/read';
-import { LoadableField, type ReaderAst } from '../core/reader';
+import type { LoadableField, ReaderAst } from '../core/reader';
 import { getOrCreateCachedStartUpdate } from '../core/startUpdate';
 import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
+import { maybeUnwrapNetworkRequest } from '../react/maybeUnwrapNetworkRequest';
 import { useSubscribeToMultiple } from '../react/useReadAndSubscribe';
-import { maybeUnwrapNetworkRequest } from '../react/useResult';
 
 export type UseSkipLimitReturnValue<
   TReadFromStore extends UnknownTReadFromStore,
@@ -33,7 +31,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 +126,6 @@ export function useSkipLimitPagination<
               startUpdate: getOrCreateCachedStartUpdate(
                 environment,
                 fragmentReference,
-                readerWithRefetchQueries.readerArtifact.kind,
                 networkRequestOptions,
               ),
             }
@@ -197,7 +194,7 @@ export function useSkipLimitPagination<
     (loadedSoFar: number) =>
     (
       count: number,
-      fetchOptions?: FetchOptions<ReadonlyArray<TItem>>,
+      fetchOptions?: FetchOptions<ReadonlyArray<TItem>, never>,
     ): void => {
       const loadedField = loadableField(
         {
@@ -249,7 +246,7 @@ export function useSkipLimitPagination<
   const mostRecentFragmentReference =
     mostRecentItem?.[0].getItemIfNotDisposed();
 
-  if (mostRecentItem && mostRecentFragmentReference === null) {
+  if (mostRecentItem != null && mostRecentFragmentReference == null) {
     throw new Error(
       'FragmentReference is unexpectedly disposed. \
       This is indicative of a bug in Isograph.',
@@ -257,11 +254,15 @@ export function useSkipLimitPagination<
   }
 
   const networkRequestStatus =
-    mostRecentFragmentReference &&
-    getPromiseState(mostRecentFragmentReference.networkRequest);
+    mostRecentFragmentReference != null
+      ? {
+          mostRecentFragmentReference,
+          state: getPromiseState(mostRecentFragmentReference.networkRequest),
+        }
+      : null;
 
   const slicedFragmentReferences =
-    networkRequestStatus?.kind === 'Ok'
+    networkRequestStatus?.state?.kind === 'Ok'
       ? loadedReferences
       : loadedReferences.slice(0, loadedReferences.length - 1);
 
@@ -291,7 +292,7 @@ export function useSkipLimitPagination<
     subscribeCompletedFragmentReferences(completedFragmentReferences),
   );
 
-  if (!networkRequestStatus) {
+  if (networkRequestStatus == null) {
     return {
       kind: 'Complete',
       fetchMore: getFetchMore(initialState?.skip ?? 0),
@@ -299,7 +300,7 @@ export function useSkipLimitPagination<
     };
   }
 
-  switch (networkRequestStatus.kind) {
+  switch (networkRequestStatus.state.kind) {
     case 'Pending': {
       const unsubscribe = subscribeToAnyChange(environment, () => {
         unsubscribe();
@@ -308,12 +309,12 @@ export function useSkipLimitPagination<
 
       return {
         kind: 'Pending',
-        pendingFragment: mostRecentFragmentReference,
+        pendingFragment: networkRequestStatus.mostRecentFragmentReference,
         results: readCompletedFragmentReferences(completedFragmentReferences),
       };
     }
     case 'Err': {
-      throw networkRequestStatus.error;
+      throw networkRequestStatus.state.error;
     }
     case 'Ok': {
       const results = readCompletedFragmentReferences(

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/IsographEnvironmentProvider.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createContext, ReactNode, useContext } from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useContext } from 'react';
 import { type IsographEnvironment } from '../core/IsographEnvironment';
 
 export const IsographEnvironmentContext =

package/src/react/LoadableFieldReader.tsx

@@ -1,32 +1,49 @@
+import React from 'react';
 import { type FetchOptions } from '../core/check';
-import {
-  ExtractParameters,
-  type UnknownTReadFromStore,
-} from '../core/FragmentReference';
+import type { ExtractParameters } from '../core/FragmentReference';
+import { 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';
 
+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 +55,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,
+    }}
+  />;
+}