feat(sector-radar): 支持排名列表滚动加载

zhixing-web/src/features/sector-radar/api/sector-radar.query.ts

@@ -1,7 +1,14 @@
-import { useQuery } from "@tanstack/react-query"
+import {
+  useInfiniteQuery,
+  useQuery,
+  type InfiniteData,
+} from "@tanstack/react-query"
 
 import { getSectorRadarDates, getSectorRadarRankings } from "./sector-radar.api"
-import type { RadarRankingsQuery } from "./sector-radar.types"
+import type {
+  RadarRankingsQuery,
+  RadarRankingsResponse,
+} from "./sector-radar.types"
 
 export const sectorRadarDatesQueryKey = ["sectorRadar", "dates"] as const
 
@@ -16,7 +23,6 @@ export const sectorRadarRankingsQueryKey = (query: RadarRankingsQuery) =>
     query.rankChangeDays,
     query.side,
     query.search ?? "",
-    query.page,
     query.pageSize,
   ] as const
 
@@ -28,8 +34,33 @@ export function useSectorRadarDates() {
 }
 
 export function useSectorRadarRankings(query: RadarRankingsQuery) {
-  return useQuery({
-    queryFn: ({ signal }) => getSectorRadarRankings(query, signal),
+  return useInfiniteQuery<
+    RadarRankingsResponse,
+    Error,
+    InfiniteData<RadarRankingsResponse>,
+    ReturnType<typeof sectorRadarRankingsQueryKey>,
+    number
+  >({
+    getNextPageParam: (lastPage, pages, lastPageParam) => {
+      const loadedRowCount = pages.reduce(
+        (count, page) => count + page.rows.length,
+        0,
+      )
+      if (
+        lastPage.status !== "success" ||
+        lastPage.rows.length === 0 ||
+        lastPage.page !== lastPageParam ||
+        loadedRowCount >= lastPage.total
+      ) {
+        return undefined
+      }
+
+      const nextPageParam = lastPageParam + 1
+      return Number.isSafeInteger(nextPageParam) ? nextPageParam : undefined
+    },
+    initialPageParam: 1,
+    queryFn: ({ pageParam, signal }) =>
+      getSectorRadarRankings({ ...query, page: pageParam }, signal),
     queryKey: sectorRadarRankingsQueryKey(query),
   })
 }