@isograph/react 0.0.0-main-366b2007 → 0.0.0-main-df52a61c

package/dist/loadable-hooks/useSkipLimitPagination.d.ts

@@ -11,11 +11,6 @@ type UseSkipLimitReturnValue<TArgs, TItem> = {
     readonly results: ReadonlyArray<TItem>;
     readonly pendingFragment: FragmentReference<any, ReadonlyArray<TItem>>;
 };
-/**
- * NOTE: this hook does not subscribe to changes. This is a known
- * issue. If you are running into this issue, reach out on GitHub/
- * Twitter, and we'll fix the issue.
- */
 export declare function useSkipLimitPagination<TArgs extends {
     skip: number | void | null;
     limit: number | void | null;

package/dist/loadable-hooks/useSkipLimitPagination.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
 const reference_counted_pointer_1 = require("@isograph/reference-counted-pointer");
 const PromiseWrapper_1 = require("../core/PromiseWrapper");
+const useReadAndSubscribe_1 = require("../react/useReadAndSubscribe");
 function flatten(arr) {
     let outArray = [];
     for (const subarr of arr) {
@@ -18,11 +19,6 @@ function flatten(arr) {
     }
     return outArray;
 }
-/**
- * NOTE: this hook does not subscribe to changes. This is a known
- * issue. If you are running into this issue, reach out on GitHub/
- * Twitter, and we'll fix the issue.
- */
 function useSkipLimitPagination(loadableField) {
     const networkRequestOptions = {
         suspendIfInFlight: true,
@@ -33,19 +29,10 @@ function useSkipLimitPagination(loadableField) {
     // TODO move this out of useSkipLimitPagination, and pass environment and networkRequestOptions
     // as parameters (or recreate networkRequestOptions)
     function readCompletedFragmentReferences(completedReferences) {
-        // In general, this will not suspend. But it could, if there is missing data.
-        // A better version of this hook would not do any reading here.
-        const results = completedReferences.map(([pointer]) => {
-            const fragmentReference = pointer.getItemIfNotDisposed();
-            if (fragmentReference == null) {
-                throw new Error('FragmentReference is unexpectedly disposed. \
-          This is indicative of a bug in Isograph.');
-            }
-            (0, useResult_1.maybeUnwrapNetworkRequest)(fragmentReference.networkRequest, networkRequestOptions);
-            const data = (0, read_1.readButDoNotEvaluate)(environment, fragmentReference, networkRequestOptions);
+        const results = completedReferences.map((fragmentReference, i) => {
             const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
             const firstParameter = {
-                data: data.item,
+                data: readOutDataAndRecords[i].item,
                 parameters: fragmentReference.variables,
             };
             if (readerWithRefetchQueries.readerArtifact.kind !== 'EagerReaderArtifact') {
@@ -56,6 +43,20 @@ function useSkipLimitPagination(loadableField) {
         const items = flatten(results);
         return items;
     }
+    function subscribeCompletedFragmentReferences(completedReferences) {
+        return completedReferences.map((fragmentReference, i) => {
+            (0, useResult_1.maybeUnwrapNetworkRequest)(fragmentReference.networkRequest, networkRequestOptions);
+            const readerWithRefetchQueries = (0, PromiseWrapper_1.readPromise)(fragmentReference.readerWithRefetchQueries);
+            return {
+                fragmentReference,
+                readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+                records: readOutDataAndRecords[i],
+                callback(_data) {
+                    rerender({});
+                },
+            };
+        });
+    }
     const getFetchMore = (loadedSoFar) => (args, count) => {
         // @ts-expect-error
         const loadedField = loadableField(Object.assign(Object.assign({}, args), { skip: loadedSoFar, limit: count }))[1]();
@@ -81,23 +82,36 @@ function useSkipLimitPagination(loadableField) {
     };
     const [, rerender] = (0, react_1.useState)({});
     const loadedReferences = state === react_disposable_state_1.UNASSIGNED_STATE ? [] : state;
-    if (loadedReferences.length === 0) {
+    const mostRecentItem = loadedReferences[loadedReferences.length - 1];
+    const mostRecentFragmentReference = mostRecentItem === null || mostRecentItem === void 0 ? void 0 : mostRecentItem[0].getItemIfNotDisposed();
+    if (mostRecentItem && mostRecentFragmentReference === null) {
+        throw new Error('FragmentReference is unexpectedly disposed. \
+      This is indicative of a bug in Isograph.');
+    }
+    const networkRequestStatus = mostRecentFragmentReference &&
+        (0, PromiseWrapper_1.getPromiseState)(mostRecentFragmentReference.networkRequest);
+    const slicedFragmentReferences = (networkRequestStatus === null || networkRequestStatus === void 0 ? void 0 : networkRequestStatus.kind) === 'Ok'
+        ? loadedReferences
+        : loadedReferences.slice(0, loadedReferences.length - 1);
+    const completedFragmentReferences = slicedFragmentReferences.map(([pointer]) => {
+        const fragmentReference = pointer.getItemIfNotDisposed();
+        if (fragmentReference == null) {
+            throw new Error('FragmentReference is unexpectedly disposed. \
+            This is indicative of a bug in Isograph.');
+        }
+        return fragmentReference;
+    });
+    const readOutDataAndRecords = completedFragmentReferences.map((fragmentReference) => (0, read_1.readButDoNotEvaluate)(environment, fragmentReference, networkRequestOptions));
+    (0, useReadAndSubscribe_1.useSubscribeToMultiple)(subscribeCompletedFragmentReferences(completedFragmentReferences));
+    if (!networkRequestStatus) {
         return {
             kind: 'Complete',
             fetchMore: getFetchMore(0),
             results: [],
         };
     }
-    const mostRecentItem = loadedReferences[loadedReferences.length - 1];
-    const mostRecentFragmentReference = mostRecentItem[0].getItemIfNotDisposed();
-    if (mostRecentFragmentReference === null) {
-        throw new Error('FragmentReference is unexpectedly disposed. \
-      This is indicative of a bug in Isograph.');
-    }
-    const networkRequestStatus = (0, PromiseWrapper_1.getPromiseState)(mostRecentFragmentReference.networkRequest);
     switch (networkRequestStatus.kind) {
         case 'Pending': {
-            const completedFragmentReferences = loadedReferences.slice(0, loadedReferences.length - 1);
             const unsubscribe = (0, cache_1.subscribeToAnyChange)(environment, () => {
                 unsubscribe();
                 rerender({});
@@ -112,7 +126,7 @@ function useSkipLimitPagination(loadableField) {
             throw networkRequestStatus.error;
         }
         case 'Ok': {
-            const results = readCompletedFragmentReferences(loadedReferences);
+            const results = readCompletedFragmentReferences(completedFragmentReferences);
             return {
                 kind: 'Complete',
                 results,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-366b2007",
+  "version": "0.0.0-main-df52a61c",
   "description": "Use Isograph with React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -17,9 +17,9 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-366b2007",
-    "@isograph/react-disposable-state": "0.0.0-main-366b2007",
-    "@isograph/reference-counted-pointer": "0.0.0-main-366b2007"
+    "@isograph/disposable-types": "0.0.0-main-df52a61c",
+    "@isograph/react-disposable-state": "0.0.0-main-df52a61c",
+    "@isograph/reference-counted-pointer": "0.0.0-main-df52a61c"
   },
   "peerDependencies": {
     "react": "18.2.0"

package/src/loadable-hooks/useSkipLimitPagination.ts

@@ -1,4 +1,4 @@
-import { LoadableField } from '../core/reader';
+import { LoadableField, type ReaderAst } from '../core/reader';
 import { useIsographEnvironment } from '../react/IsographEnvironmentProvider';
 import { ItemCleanupPair } from '@isograph/disposable-types';
 import { FragmentReference } from '../core/FragmentReference';
@@ -15,6 +15,8 @@ import {
   ReferenceCountedPointer,
 } from '@isograph/reference-counted-pointer';
 import { getPromiseState, readPromise } from '../core/PromiseWrapper';
+import { type WithEncounteredRecords } from '../core/read';
+import { useSubscribeToMultiple } from '../react/useReadAndSubscribe';
 
 type SkipOrLimit = 'skip' | 'limit';
 type OmitSkipLimit<TArgs> = keyof Omit<TArgs, SkipOrLimit> extends never
@@ -41,10 +43,13 @@ type ArrayFragmentReference<
 type LoadedFragmentReferences<
   TReadFromStore extends Object,
   TItem,
-> = ReadonlyArray<
-  ItemCleanupPair<
-    ReferenceCountedPointer<ArrayFragmentReference<TReadFromStore, TItem>>
-  >
+> = ReadonlyArray<LoadedFragmentReference<TReadFromStore, TItem>>;
+
+type LoadedFragmentReference<
+  TReadFromStore extends Object,
+  TItem,
+> = ItemCleanupPair<
+  ReferenceCountedPointer<ArrayFragmentReference<TReadFromStore, TItem>>
 >;
 
 function flatten<T>(arr: ReadonlyArray<ReadonlyArray<T>>): ReadonlyArray<T> {
@@ -57,11 +62,6 @@ function flatten<T>(arr: ReadonlyArray<ReadonlyArray<T>>): ReadonlyArray<T> {
   return outArray;
 }
 
-/**
- * NOTE: this hook does not subscribe to changes. This is a known
- * issue. If you are running into this issue, reach out on GitHub/
- * Twitter, and we'll fix the issue.
- */
 export function useSkipLimitPagination<
   TArgs extends {
     skip: number | void | null;
@@ -86,39 +86,15 @@ export function useSkipLimitPagination<
   // TODO move this out of useSkipLimitPagination, and pass environment and networkRequestOptions
   // as parameters (or recreate networkRequestOptions)
   function readCompletedFragmentReferences(
-    completedReferences: ReadonlyArray<
-      ItemCleanupPair<
-        ReferenceCountedPointer<ArrayFragmentReference<TReadFromStore, TItem>>
-      >
-    >,
+    completedReferences: ArrayFragmentReference<TReadFromStore, TItem>[],
   ) {
-    // In general, this will not suspend. But it could, if there is missing data.
-    // A better version of this hook would not do any reading here.
-    const results = completedReferences.map(([pointer]) => {
-      const fragmentReference = pointer.getItemIfNotDisposed();
-      if (fragmentReference == null) {
-        throw new Error(
-          'FragmentReference is unexpectedly disposed. \
-          This is indicative of a bug in Isograph.',
-        );
-      }
-
-      maybeUnwrapNetworkRequest(
-        fragmentReference.networkRequest,
-        networkRequestOptions,
-      );
-      const data = readButDoNotEvaluate(
-        environment,
-        fragmentReference,
-        networkRequestOptions,
-      );
-
+    const results = completedReferences.map((fragmentReference, i) => {
       const readerWithRefetchQueries = readPromise(
         fragmentReference.readerWithRefetchQueries,
       );
 
       const firstParameter = {
-        data: data.item,
+        data: readOutDataAndRecords[i].item,
         parameters: fragmentReference.variables,
       };
 
@@ -137,6 +113,42 @@ export function useSkipLimitPagination<
     return items;
   }
 
+  function subscribeCompletedFragmentReferences(
+    completedReferences: ArrayFragmentReference<TReadFromStore, TItem>[],
+  ) {
+    return completedReferences.map(
+      (
+        fragmentReference,
+        i,
+      ): {
+        records: WithEncounteredRecords<TReadFromStore>;
+        callback: (
+          updatedRecords: WithEncounteredRecords<TReadFromStore>,
+        ) => void;
+        fragmentReference: ArrayFragmentReference<TReadFromStore, TItem>;
+        readerAst: ReaderAst<TItem>;
+      } => {
+        maybeUnwrapNetworkRequest(
+          fragmentReference.networkRequest,
+          networkRequestOptions,
+        );
+
+        const readerWithRefetchQueries = readPromise(
+          fragmentReference.readerWithRefetchQueries,
+        );
+
+        return {
+          fragmentReference,
+          readerAst: readerWithRefetchQueries.readerArtifact.readerAst,
+          records: readOutDataAndRecords[i],
+          callback(_data) {
+            rerender({});
+          },
+        };
+      },
+    );
+  }
+
   const getFetchMore =
     (loadedSoFar: number) =>
     (args: OmitSkipLimit<TArgs>, count: number): void => {
@@ -182,33 +194,64 @@ export function useSkipLimitPagination<
   const [, rerender] = useState({});
 
   const loadedReferences = state === UNASSIGNED_STATE ? [] : state;
-  if (loadedReferences.length === 0) {
-    return {
-      kind: 'Complete',
-      fetchMore: getFetchMore(0),
-      results: [],
-    };
-  }
 
-  const mostRecentItem = loadedReferences[loadedReferences.length - 1];
-  const mostRecentFragmentReference = mostRecentItem[0].getItemIfNotDisposed();
-  if (mostRecentFragmentReference === null) {
+  const mostRecentItem: LoadedFragmentReference<TReadFromStore, TItem> | null =
+    loadedReferences[loadedReferences.length - 1];
+  const mostRecentFragmentReference =
+    mostRecentItem?.[0].getItemIfNotDisposed();
+
+  if (mostRecentItem && mostRecentFragmentReference === null) {
     throw new Error(
       'FragmentReference is unexpectedly disposed. \
       This is indicative of a bug in Isograph.',
     );
   }
 
-  const networkRequestStatus = getPromiseState(
-    mostRecentFragmentReference.networkRequest,
+  const networkRequestStatus =
+    mostRecentFragmentReference &&
+    getPromiseState(mostRecentFragmentReference.networkRequest);
+
+  const slicedFragmentReferences =
+    networkRequestStatus?.kind === 'Ok'
+      ? loadedReferences
+      : loadedReferences.slice(0, loadedReferences.length - 1);
+
+  const completedFragmentReferences = slicedFragmentReferences.map(
+    ([pointer]) => {
+      const fragmentReference = pointer.getItemIfNotDisposed();
+      if (fragmentReference == null) {
+        throw new Error(
+          'FragmentReference is unexpectedly disposed. \
+            This is indicative of a bug in Isograph.',
+        );
+      }
+      return fragmentReference;
+    },
   );
+
+  const readOutDataAndRecords = completedFragmentReferences.map(
+    (fragmentReference) =>
+      readButDoNotEvaluate(
+        environment,
+        fragmentReference,
+        networkRequestOptions,
+      ),
+  );
+
+  useSubscribeToMultiple<TReadFromStore>(
+    subscribeCompletedFragmentReferences(completedFragmentReferences),
+  );
+
+  if (!networkRequestStatus) {
+    return {
+      kind: 'Complete',
+      fetchMore: getFetchMore(0),
+      results: [],
+    };
+  }
+
   switch (networkRequestStatus.kind) {
     case 'Pending': {
-      const completedFragmentReferences = loadedReferences.slice(
-        0,
-        loadedReferences.length - 1,
-      );
-
       const unsubscribe = subscribeToAnyChange(environment, () => {
         unsubscribe();
         rerender({});
@@ -224,7 +267,9 @@ export function useSkipLimitPagination<
       throw networkRequestStatus.error;
     }
     case 'Ok': {
-      const results = readCompletedFragmentReferences(loadedReferences);
+      const results = readCompletedFragmentReferences(
+        completedFragmentReferences,
+      );
       return {
         kind: 'Complete',
         results,