improve api cache

Author: sunnylqm

src/pages/manage/components/deps-table.tsx

@@ -14,7 +14,7 @@ export const DepsTable = ({
   name?: string;
 }) => {
   const { packages, appId } = useManageContext();
-  const { versions } = useVersions({ appId, limit: 1000 });
+  const { allVersions: versions } = useVersions({ appId });
   const [diffs, setDiffs] = useState<{
     oldDeps?: Record<string, string>;
     newDeps?: Record<string, string>;

src/services/api.ts

@@ -90,7 +90,7 @@ export const api = {
   getVersions: ({
     appId,
     offset = 0,
-    limit = 10,
+    limit = 1000,
   }: {
     appId: number;
     offset?: number;

src/services/request.ts

@@ -72,7 +72,7 @@ export default async function request<T extends Record<any, any>>(
     }
 
     message.error(json.message);
-    throw new Error(`${response.status}: ${json.message}`);
+    throw Error(`${response.status}: ${json.message}`);
   } catch (err) {
     if ((err as Error).message.includes("Unauthorized")) {
       logout();

src/utils/hooks.ts

@@ -64,17 +64,34 @@ export const usePackages = (appId: number) => {
 
 export const useVersions = ({
   appId,
-  offset,
-  limit,
+  offset = 0,
+  limit = 10,
 }: {
   appId: number;
   offset?: number;
   limit?: number;
 }) => {
+  // Fetch all versions (up to 1000) from backend and cache them
   const { data, isLoading } = useQuery({
-    queryKey: ["versions", appId, offset, limit],
-    staleTime: 0,
-    queryFn: () => api.getVersions({ appId, offset, limit }),
+    queryKey: ["versions", appId],
+    staleTime: 3000,
+    queryFn: () => api.getVersions({ appId, offset: 0, limit: 1000 }),
   });
-  return { versions: data?.data ?? [], count: data?.count ?? 0, isLoading };
+
+  // Implement frontend pagination
+  const allVersions = data?.data ?? [];
+  const totalCount = data?.count ?? 0;
+
+  // Calculate pagination
+  const startIndex = offset;
+  const endIndex = offset + limit;
+  const paginatedVersions = allVersions.slice(startIndex, endIndex);
+
+  return {
+    versions: paginatedVersions,
+    count: totalCount,
+    isLoading,
+    // Also return all versions for components that might need them
+    allVersions,
+  };
 };