Use larger page size in credential query temporarily (#1835)

skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx

@@ -1,5 +1,3 @@
-import { getClient } from "@/api/AxiosClient";
-import { CredentialApiResponse } from "@/api/types";
 import {
   Select,
   SelectContent,
@@ -8,8 +6,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useCredentialsQuery } from "../hooks/useCredentialsQuery";
-import { useQuery } from "@tanstack/react-query";
 
 type Props = {
   value: string;
@@ -17,17 +14,7 @@ type Props = {
 };
 
 function CredentialSelector({ value, onChange }: Props) {
-  const credentialGetter = useCredentialGetter();
+  const { data: credentials, isFetching } = useCredentialsQuery();
-
-  const { data: credentials, isFetching } = useQuery<
-    Array<CredentialApiResponse>
-  >({
-    queryKey: ["credentials"],
-    queryFn: async () => {
-      const client = await getClient(credentialGetter);
-      return await client.get("/credentials").then((res) => res.data);
-    },
-  });
 
   if (isFetching) {
     return <Skeleton className="h-10 w-full" />;

skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts

@@ -0,0 +1,20 @@
+import { getClient } from "@/api/AxiosClient";
+import { CredentialApiResponse } from "@/api/types";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+
+function useCredentialsQuery() {
+  const credentialGetter = useCredentialGetter();
+
+  return useQuery<Array<CredentialApiResponse>>({
+    queryKey: ["credentials"],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.set("page_size", "25");
+      return client.get("/credentials", { params }).then((res) => res.data);
+    },
+  });
+}
+
+export { useCredentialsQuery };