diff --git a/skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx b/skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx index be72fe6b..bdd8f452 100644 --- a/skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx +++ b/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 { useQuery } from "@tanstack/react-query"; +import { useCredentialsQuery } from "../hooks/useCredentialsQuery"; type Props = { value: string; @@ -17,17 +14,7 @@ type Props = { }; function CredentialSelector({ value, onChange }: Props) { - const credentialGetter = useCredentialGetter(); - - const { data: credentials, isFetching } = useQuery< - Array - >({ - queryKey: ["credentials"], - queryFn: async () => { - const client = await getClient(credentialGetter); - return await client.get("/credentials").then((res) => res.data); - }, - }); + const { data: credentials, isFetching } = useCredentialsQuery(); if (isFetching) { return ; diff --git a/skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts b/skyvern-frontend/src/routes/workflows/hooks/useCredentialsQuery.ts new file mode 100644 index 00000000..8546aed3 --- /dev/null +++ b/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>({ + 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 };