perf: do not revalidate first page when ordering operations by hot (#368)

Author: guansss

src/apis/operation.ts

@@ -1,3 +1,4 @@
+import { uniqBy } from 'lodash-es'
 import { QueriesCopilotRequest } from 'maa-copilot-client'
 import useSWR from 'swr'
 import useSWRInfinite from 'swr/infinite'
@@ -22,6 +23,7 @@ export interface UseOperationsParams {
 
   disabled?: boolean
   suspense?: boolean
+  revalidateFirstPage?: boolean
 }
 
 export function useOperations({
@@ -35,6 +37,7 @@ export function useOperations({
   byMyself,
   disabled,
   suspense,
+  revalidateFirstPage,
 }: UseOperationsParams) {
   const {
     error,
@@ -98,11 +101,14 @@ export function useOperations({
         requireData: true,
       }).queriesCopilot(req)
 
-      const parsedOperations: Operation[] = res.data.data.map((operation) => ({
+      let parsedOperations: Operation[] = res.data.data.map((operation) => ({
         ...operation,
         parsedContent: toCopilotOperation(operation),
       }))
 
+      // 如果 revalidateFirstPage=false，从第二页开始可能会有重复数据，需要去重
+      parsedOperations = uniqBy(parsedOperations, (o) => o.id)
+
       return {
         ...res.data,
         data: parsedOperations,
@@ -111,6 +117,7 @@ export function useOperations({
     {
       suspense,
       focusThrottleInterval: 1000 * 60 * 30,
+      revalidateFirstPage,
     },
   )
 

src/components/Operations.tsx

@@ -219,7 +219,12 @@ export const Operations: ComponentType = withSuspensable(() => {
 
       <div className="tabular-nums">
         {listMode === 'operation' && (
-          <OperationList {...queryParams} operator={selectedOperatorQuery} />
+          <OperationList
+            {...queryParams}
+            operator={selectedOperatorQuery}
+            // 按热度排序时列表前几页的变化不会太频繁，可以不刷新第一页，节省点流量
+            revalidateFirstPage={queryParams.orderBy !== 'hot'}
+          />
         )}
         {listMode === 'operationSet' && <OperationSetList {...queryParams} />}
       </div>