@adventurelabs/scout-core 2.0.15 → 2.0.16

package/dist/hooks/useInfiniteQuery.d.ts

@@ -18,10 +18,11 @@ export interface InfiniteRefetchOptions {
 }
 export interface InfiniteScrollData<T> {
     items: T[];
-    /** True only for the initial load, when no pages are held yet. */
+    /** True while a request is in flight and no pages are held: initial load, or a reset. */
     isLoading: boolean;
     /** True while a `refetch` is in flight, including a preserve-pages refresh. */
     isRefreshing: boolean;
+    /** True while a later page is being fetched, with earlier pages already shown. */
     isLoadingMore: boolean;
     hasMore: boolean;
     loadMore: () => void;

package/dist/hooks/useInfiniteQuery.js

@@ -51,26 +51,26 @@ function sameCursor(left, right) {
 }
 const rowId = (row) => row.id;
 const feedRowKey = (row) => `${row.sort_ts ?? ""}_${row.sort_id ?? ""}_${row.feed_type ?? ""}`;
-/**
- * Holds the cursor of the page the live query should request.
- *
- * State is tagged with `key`, and state carrying a stale key reads as null, so a new entity
- * is never requested with the previous entity's cursor.
- */
-function useCursor(key) {
-    const [stored, setStored] = useState(() => ({ key, cursor: null }));
-    const setCursor = useCallback((cursor) => setStored({ key, cursor }), [key]);
-    return {
-        key,
-        cursor: stored.key === key ? stored.cursor : null,
-        setCursor,
-    };
-}
-const noPages = (key) => ({
+const emptyPaging = (key) => ({
     key,
+    cursor: null,
     pages: [],
     refreshQueue: null,
 });
+/**
+ * Holds the paging state for `key`, read by the query args and by the engine.
+ *
+ * State carrying a stale key reads as empty, so a new entity starts from its first page in
+ * the same render rather than waiting for an effect to clear the previous one.
+ */
+function usePaging(key) {
+    const [stored, setStored] = useState(() => emptyPaging(key));
+    // Memoized so the empty fallback keeps a stable identity: `items` is derived from
+    // `state.pages`, and a fresh array each render would churn consumer dependencies.
+    const state = useMemo(() => (stored.key === key ? stored : emptyPaging(key)), [key, stored]);
+    const update = useCallback((change) => setStored((previous) => change(previous.key === key ? previous : emptyPaging(key))), [key]);
+    return { cursor: state.cursor, state, update };
+}
 function upsertPage(state, page, rowKey) {
     const index = state.pages.findIndex((loaded) => sameCursor(loaded.cursor, page.cursor));
     if (index === -1) {
@@ -97,27 +97,33 @@ const dropRefreshedCursor = (state) => {
 /**
  * Accumulates cursor-paginated responses into a list.
  *
- * A single query subscription serves every page: the cursor handle decides which page is
- * being requested, and each response is upserted into `pages` under that cursor. A
+ * A single query subscription serves every page: the paging state's cursor decides which
+ * page is being requested, and each response is upserted into `pages` under that cursor. A
  * preserve-pages refresh walks the cursor back through the loaded pages one at a time,
- * replacing each in place. Pages are tagged with the handle's key, so changing entity or
- * filters empties the list and abandons any refresh in the same render.
+ * replacing each in place. Changing entity or filters changes the paging key, which empties
+ * the list and abandons any refresh in the same render.
  */
-function useInfinitePages({ key, cursor, setCursor }, query, mapping) {
-    const [stored, setStored] = useState(() => noPages(key));
+function useInfinitePages({ cursor, state, update }, query, mapping) {
     const latest = useRef({ query, mapping });
     latest.current = { query, mapping };
-    const state = stored.key === key ? stored : noPages(key);
-    const update = useCallback((change) => {
-        setStored((previous) => change(previous.key === key ? previous : noPages(key)));
-    }, [key]);
-    const { data, isLoading } = query;
-    const page = useMemo(() => (data === undefined ? undefined : latest.current.mapping.toPage(data)), [data]);
+    const setCursor = useCallback((next) => update((previous) => sameCursor(previous.cursor, next)
+        ? previous
+        : { ...previous, cursor: next }), [update]);
+    /**
+     * Re-requests the page the query currently points at. RTK's `refetch` throws
+     * synchronously when the query is skipped, so callers see a rejection instead of a fault
+     * at the call site.
+     */
+    const requestPage = useCallback(async () => latest.current.query.refetch().unwrap(), []);
+    const { currentData, isFetching } = query;
+    const page = useMemo(() => currentData === undefined
+        ? undefined
+        : latest.current.mapping.toPage(currentData), [currentData]);
     useEffect(() => {
-        if (!page || isLoading)
+        if (!page)
             return;
         update((previous) => upsertPage(previous, { ...page, cursor }, latest.current.mapping.rowKey));
-    }, [cursor, isLoading, page, update]);
+    }, [cursor, page, update]);
     useEffect(() => {
         const queue = state.refreshQueue;
         if (!queue)
@@ -128,29 +134,31 @@ function useInfinitePages({ key, cursor, setCursor }, query, mapping) {
             return;
         }
         let cancelled = false;
-        void latest.current.query
-            .refetch()
-            .unwrap()
-            .then((response) => {
-            if (cancelled)
-                return;
-            const { mapping } = latest.current;
-            const refreshed = mapping.toPage(response);
-            update((previous) => 
-            // Only apply while this cursor is still the one being refreshed.
-            previous.refreshQueue &&
-                sameCursor(previous.refreshQueue[0], refreshing)
-                ? dropRefreshedCursor(upsertPage(previous, { ...refreshed, cursor: refreshing }, mapping.rowKey))
-                : previous);
-        })
-            .catch(() => {
-            if (!cancelled)
-                update(dropRefreshedCursor);
-        });
+        // A refresh that cannot run drops its cursor and moves on, so a rejection never leaves
+        // the queue stuck.
+        void (async () => {
+            try {
+                const response = await requestPage();
+                if (cancelled)
+                    return;
+                const { mapping } = latest.current;
+                const refreshed = mapping.toPage(response);
+                update((previous) => 
+                // Only apply while this cursor is still the one being refreshed.
+                previous.refreshQueue &&
+                    sameCursor(previous.refreshQueue[0], refreshing)
+                    ? dropRefreshedCursor(upsertPage(previous, { ...refreshed, cursor: refreshing }, mapping.rowKey))
+                    : previous);
+            }
+            catch {
+                if (!cancelled)
+                    update(dropRefreshedCursor);
+            }
+        })();
         return () => {
             cancelled = true;
         };
-    }, [cursor, setCursor, state.refreshQueue, update]);
+    }, [cursor, requestPage, setCursor, state.refreshQueue, update]);
     /** Both modes queue the cursors to re-request, so a refetch always reaches the network. */
     const refetch = useCallback((options) => {
         update((previous) => options?.preservePages && previous.pages.length > 0
@@ -158,17 +166,32 @@ function useInfinitePages({ key, cursor, setCursor }, query, mapping) {
                 ...previous,
                 refreshQueue: previous.pages.map((loaded) => loaded.cursor),
             }
-            : { ...noPages(key), refreshQueue: [null] });
-    }, [key, update]);
+            : { ...emptyPaging(previous.key), refreshQueue: [null] });
+    }, [update]);
     const lastPage = state.pages[state.pages.length - 1];
     const nextCursor = lastPage?.nextCursor ?? null;
     const hasMore = Boolean(lastPage?.hasMore) && nextCursor !== null;
     const isRefreshing = state.refreshQueue !== null;
     const loadMore = useCallback(() => {
-        if (!hasMore || nextCursor === null || isLoading || isRefreshing)
+        if (!hasMore || nextCursor === null || isFetching || isRefreshing)
+            return;
+        // The cursor already resting on `nextCursor` means that page's request failed, since a
+        // loaded page would have moved `nextCursor` on. Re-setting it would be a no-op, so the
+        // failed request is retried instead of leaving the list unable to advance.
+        if (sameCursor(cursor, nextCursor)) {
+            void requestPage().catch(() => { });
             return;
+        }
         setCursor(nextCursor);
-    }, [hasMore, isLoading, isRefreshing, nextCursor, setCursor]);
+    }, [
+        cursor,
+        hasMore,
+        isFetching,
+        isRefreshing,
+        nextCursor,
+        requestPage,
+        setCursor,
+    ]);
     const items = useMemo(() => {
         const seen = new Set();
         return state.pages
@@ -185,9 +208,9 @@ function useInfinitePages({ key, cursor, setCursor }, query, mapping) {
     }, [state.pages]);
     return {
         items,
-        isLoading: isLoading && state.pages.length === 0,
+        isLoading: state.pages.length === 0 && (isFetching || isRefreshing),
         isRefreshing,
-        isLoadingMore: isLoading && state.pages.length > 0,
+        isLoadingMore: isFetching && state.pages.length > 0 && !isRefreshing,
         hasMore,
         loadMore,
         refetch,
@@ -261,7 +284,7 @@ const analysisTasksPage = (response) => ({
 // =====================================================
 export const useInfiniteSessionsByHerd = (herdId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`herd:${herdId}|${filtersKey}`);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
     const query = useGetSessionsInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...flightArgs(options) }, { skip: !options.enabled || !herdId });
     return useInfinitePages(paging, query, {
         toPage: sessionsPage,
@@ -270,7 +293,7 @@ export const useInfiniteSessionsByHerd = (herdId, options) => {
 };
 export const useInfiniteSessionsByDevice = (deviceId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`device:${deviceId}|${filtersKey}`);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
     const query = useGetSessionsInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...flightArgs(options) }, { skip: !options.enabled || !deviceId });
     return useInfinitePages(paging, query, {
         toPage: sessionsPage,
@@ -282,7 +305,7 @@ export const useInfiniteSessionsByDevice = (deviceId, options) => {
 // =====================================================
 export const useInfiniteEventsByHerd = (herdId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`herd:${herdId}|${filtersKey}`);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
     const query = useGetEventsInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !herdId });
     return useInfinitePages(paging, query, {
         toPage: eventsPage,
@@ -291,7 +314,7 @@ export const useInfiniteEventsByHerd = (herdId, options) => {
 };
 export const useInfiniteEventsByDevice = (deviceId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`device:${deviceId}|${filtersKey}`);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
     const query = useGetEventsInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !deviceId });
     return useInfinitePages(paging, query, {
         toPage: eventsPage,
@@ -303,7 +326,7 @@ export const useInfiniteEventsByDevice = (deviceId, options) => {
 // =====================================================
 export const useInfiniteArtifactsByHerd = (herdId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`herd:${herdId}|${filtersKey}`);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
     const query = useGetArtifactsInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !herdId });
     return useInfinitePages(paging, query, {
         toPage: artifactsPage,
@@ -312,7 +335,7 @@ export const useInfiniteArtifactsByHerd = (herdId, options) => {
 };
 export const useInfiniteArtifactsByDevice = (deviceId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`device:${deviceId}|${filtersKey}`);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
     const query = useGetArtifactsInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !deviceId });
     return useInfinitePages(paging, query, {
         toPage: artifactsPage,
@@ -324,7 +347,7 @@ export const useInfiniteArtifactsByDevice = (deviceId, options) => {
 // =====================================================
 export const useInfiniteFeedByHerd = (herdId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`herd:${herdId}|${filtersKey}`);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
     const query = useGetFeedInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !herdId });
     return useInfinitePages(paging, query, {
         toPage: feedPage,
@@ -333,7 +356,7 @@ export const useInfiniteFeedByHerd = (herdId, options) => {
 };
 export const useInfiniteFeedByDevice = (deviceId, options) => {
     const filtersKey = useFiltersKey(options);
-    const paging = useCursor(`device:${deviceId}|${filtersKey}`);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
     const query = useGetFeedInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !deviceId });
     return useInfinitePages(paging, query, {
         toPage: feedPage,
@@ -342,7 +365,7 @@ export const useInfiniteFeedByDevice = (deviceId, options) => {
 };
 export const useInfiniteAnalysisJobs = (options) => {
     const status = options.status ?? null;
-    const paging = useCursor(`status:${status}`);
+    const paging = usePaging(`status:${status}`);
     const query = useGetAnalysisJobsInfiniteQuery({
         cursor: paging.cursor,
         status,
@@ -357,7 +380,7 @@ export const useInfiniteAnalysisJobs = (options) => {
 export const useInfiniteAnalysisTasks = (options) => {
     const status = options.status ?? null;
     const jobId = options.job_id ?? null;
-    const paging = useCursor(`job:${jobId}|status:${status}`);
+    const paging = usePaging(`job:${jobId}|status:${status}`);
     const query = useGetAnalysisTasksInfiniteQuery({
         cursor: paging.cursor,
         status,

package/dist/store/api.d.ts

@@ -151,7 +151,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -260,7 +260,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -367,7 +367,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -476,7 +476,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -583,7 +583,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -692,7 +692,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -799,7 +799,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -908,7 +908,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -1015,7 +1015,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -1124,7 +1124,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -1231,7 +1231,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -1340,7 +1340,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -1445,7 +1445,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -1538,7 +1538,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -1629,7 +1629,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -1722,7 +1722,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -1813,7 +1813,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -1906,7 +1906,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;
@@ -1997,7 +1997,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
     isFetching: false;
     isSuccess: false;
     isError: false;
-}, "data" | "isLoading" | "isFetching"> & {
+}, "data" | "isFetching" | "isLoading"> & {
     isLoading: true;
     isFetching: boolean;
     data: undefined;
@@ -2090,7 +2090,7 @@ export declare const useGetSessionsInfiniteByHerdQuery: <R extends Record<string
         isFetching: false;
         isSuccess: false;
         isError: false;
-    }, "data" | "isLoading" | "isFetching"> & {
+    }, "data" | "isFetching" | "isLoading"> & {
         isLoading: true;
         isFetching: boolean;
         data: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adventurelabs/scout-core",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "Core utilities and helpers for Adventure Labs Scout applications",
   "exports": {
     "./client": {