fix: refactor secret queries (#663)

Author: Cahllagerfeld

src/app/settings/secrets/EditSecretDialog.tsx

@@ -1,12 +1,12 @@
 import EyeIcon from "@/assets/icons/eye.svg?react";
 import Plus from "@/assets/icons/plus.svg?react";
 import Trash from "@/assets/icons/trash.svg?react";
-import { useGetSecretDetail } from "@/data/secrets/get-secret-detail";
+import { secretQueries } from "@/data/secrets";
 import { useUpdateSecret } from "@/data/secrets/update-secret-query";
 import { isFetchError } from "@/lib/fetch-error";
 import { UpdateSecret } from "@/types/secret";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
 	Button,
 	DialogClose,
@@ -49,7 +49,11 @@ interface EditSecretProps {
 }
 
 export function EditSecret({ secretId, isSecretNameEditable }: EditSecretProps) {
-	const { data: secretDetail, isLoading, isError } = useGetSecretDetail(secretId);
+	const {
+		data: secretDetail,
+		isLoading,
+		isError
+	} = useQuery({ ...secretQueries.secretDetail(secretId) });
 
 	const {
 		handleSubmit,

src/app/settings/secrets/SecretsTable.tsx

@@ -1,6 +1,6 @@
 import Pagination from "@/components/Pagination";
 import { SearchField } from "@/components/SearchField";
-import { useAllSecrets } from "@/data/secrets/secrets-all-query";
+import { secretQueries } from "@/data/secrets";
 import { useCurrentUser } from "@/data/users/current-user-query";
 import { useQuery } from "@tanstack/react-query";
 import { DataTable, Skeleton } from "@zenml-io/react-component-library";
@@ -13,10 +13,10 @@ import { useSecretOverviewSearchParams } from "./service";
 export default function SecretsTable() {
 	const navigate = useNavigate();
 	const queryParams = useSecretOverviewSearchParams();
-	const { data: secretsData } = useAllSecrets(
-		{ params: { ...queryParams, sort_by: "desc:created" } },
-		{ throwOnError: true }
-	);
+	const { data: secretsData } = useQuery({
+		...secretQueries.secretList({ ...queryParams, sort_by: "desc:created" }),
+		throwOnError: true
+	});
 	const { data: currentUser } = useCurrentUser();
 
 	const userId = currentUser?.id || "";

src/app/settings/secrets/secretsDetail/DeleteKeyAlert.tsx

@@ -1,8 +1,8 @@
-import { useGetSecretDetail } from "@/data/secrets/get-secret-detail";
+import { secretQueries } from "@/data/secrets";
 import { useUpdateSecret } from "@/data/secrets/update-secret-query";
 import { isFetchError } from "@/lib/fetch-error";
 import { UpdateSecret } from "@/types/secret";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
 	AlertDialogCancel,
 	AlertDialogContent,
@@ -16,7 +16,11 @@ import {
 import { ChangeEvent, useState } from "react";
 
 export function DeleteKeyAlert({ secretId, keyName }: { secretId: string; keyName: string }) {
-	const { data: secretDetail, isLoading, isError } = useGetSecretDetail(secretId);
+	const {
+		data: secretDetail,
+		isLoading,
+		isError
+	} = useQuery({ ...secretQueries.secretDetail(secretId) });
 	const queryClient = useQueryClient();
 	const { mutate } = useUpdateSecret({
 		onError(error) {
@@ -66,7 +70,7 @@ export function DeleteKeyAlert({ secretId, keyName }: { secretId: string; keyNam
 			</AlertDialogHeader>
 			<div className="gap-5 p-5">
 				<p className="text-text-md text-theme-text-secondary">
-					Are you sure you want to delete this eky?
+					Are you sure you want to delete this key?
 				</p>
 				<p className="text-text-md text-theme-text-secondary">This action cannot be undone.</p>
 				<h3 className="font-inter text-sm mb-1 mt-4 text-left font-medium leading-5">

src/app/settings/secrets/secretsDetail/SecretDetailTable.tsx

@@ -1,4 +1,5 @@
-import { useGetSecretDetail } from "@/data/secrets/get-secret-detail";
+import { secretQueries } from "@/data/secrets";
+import { useQuery } from "@tanstack/react-query";
 import { Button, DataTable, Dialog, DialogTrigger, Input } from "@zenml-io/react-component-library";
 import { useMemo, useState } from "react";
 import { EditSecretDialog } from "../EditSecretDialog";
@@ -7,7 +8,7 @@ import { getSecretDetailColumn } from "./columns";
 export default function SecretDetailTable({ secretId }: { secretId: string }) {
 	const [searchTerm, setSearchTerm] = useState("");
 
-	const { data: secretDetail } = useGetSecretDetail(secretId);
+	const { data: secretDetail } = useQuery({ ...secretQueries.secretDetail(secretId) });
 
 	// Prepare data for DataTable
 	const secretDetailData = useMemo(() => {

src/app/settings/secrets/secretsDetail/page.tsx

@@ -1,14 +1,15 @@
-import { useGetSecretDetail } from "@/data/secrets/get-secret-detail";
+import { secretQueries } from "@/data/secrets";
+import { useQuery } from "@tanstack/react-query";
 import { Box } from "@zenml-io/react-component-library";
-import { useParams } from "react-router-dom";
-import SecretDetailTable from "./SecretDetailTable";
 import { useEffect } from "react";
+import { useParams } from "react-router-dom";
 import { useBreadcrumbsContext } from "../../../../layouts/AuthenticatedLayout/BreadcrumbsContext";
+import SecretDetailTable from "./SecretDetailTable";
 
 export default function SecretDetailsPage() {
-	const { secretId } = useParams<{ secretId: string }>() || "";
+	const { secretId } = useParams<{ secretId: string }>();
 	const { setCurrentBreadcrumbData } = useBreadcrumbsContext();
-	const { data: secretDetail } = useGetSecretDetail(secretId || "");
+	const { data: secretDetail } = useQuery({ ...secretQueries.secretDetail(secretId || "") });
 
 	useEffect(() => {
 		secretDetail &&

src/data/secrets/get-secret-detail.ts

@@ -1,11 +1,10 @@
 import { FetchError } from "@/lib/fetch-error";
 import { notFound } from "@/lib/not-found-error";
 import { Secret } from "@/types/secret";
-import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { apiPaths, createApiPath } from "../api";
 import { fetcher } from "../fetch";
 
-export async function getSecretDetail(secretId: string) {
+export async function fetchSecretDetail(secretId: string): Promise<Secret> {
 	const url = createApiPath(apiPaths.secrets.detail(secretId));
 	const res = await fetcher(url, {
 		method: "GET",
@@ -17,22 +16,21 @@ export async function getSecretDetail(secretId: string) {
 	if (res.status === 404) notFound();
 
 	if (!res.ok) {
+		const errorData: string = await res
+			.json()
+			.then((data) => {
+				if (Array.isArray(data.detail)) {
+					return data.detail[1];
+				}
+				return data.detail;
+			})
+			.catch(() => `Failed to fetch secret ${secretId}`);
+
 		throw new FetchError({
-			message: "Error fetching secret details",
 			status: res.status,
-			statusText: res.statusText
+			statusText: res.statusText,
+			message: errorData
 		});
 	}
 	return res.json();
 }
-
-export function useGetSecretDetail(
-	secretId: string,
-	options?: Omit<UseQueryOptions<Secret, FetchError>, "queryFn" | "queryKey">
-) {
-	return useQuery<Secret, FetchError>({
-		queryFn: () => getSecretDetail(secretId),
-		queryKey: ["secrets", secretId],
-		...options
-	});
-}

src/data/secrets/index.ts

@@ -0,0 +1,18 @@
+import { ListSecretsParams } from "@/types/secret";
+import { queryOptions } from "@tanstack/react-query";
+import { fetchAllSecrets } from "./secrets-all-query";
+import { fetchSecretDetail } from "./get-secret-detail";
+
+export const secretQueries = {
+	all: ["secrets"],
+	secretList: (queryParams: ListSecretsParams) =>
+		queryOptions({
+			queryKey: [...secretQueries.all, queryParams],
+			queryFn: async () => fetchAllSecrets({ params: queryParams })
+		}),
+	secretDetail: (secretId: string) =>
+		queryOptions({
+			queryKey: [...secretQueries.all, secretId],
+			queryFn: async () => fetchSecretDetail(secretId)
+		})
+};

src/data/secrets/secrets-all-query.ts

@@ -1,20 +1,15 @@
-import { apiPaths, createApiPath } from "../api";
 import { FetchError } from "@/lib/fetch-error";
 import { notFound } from "@/lib/not-found-error";
-import { fetcher } from "../fetch";
-import { useQuery, UseQueryOptions } from "@tanstack/react-query";
-import { ListSecretsParams, SecretsPage } from "@/types/secret";
 import { objectToSearchParams } from "@/lib/url";
+import { ListSecretsParams, SecretsPage } from "@/types/secret";
+import { apiPaths, createApiPath } from "../api";
+import { fetcher } from "../fetch";
 
 type SecretsOverview = {
 	params: ListSecretsParams;
 };
 
-export function getSecretsQueryKey({ params }: SecretsOverview) {
-	return ["secrets", params];
-}
-
-export async function fetchAllSecrets({ params }: SecretsOverview) {
+export async function fetchAllSecrets({ params }: SecretsOverview): Promise<SecretsPage> {
 	const url = createApiPath(apiPaths.secrets.all + "?" + objectToSearchParams(params));
 	const res = await fetcher(url, {
 		method: "GET",
@@ -26,22 +21,21 @@ export async function fetchAllSecrets({ params }: SecretsOverview) {
 	if (res.status === 404) notFound();
 
 	if (!res.ok) {
+		const errorData: string = await res
+			.json()
+			.then((data) => {
+				if (Array.isArray(data.detail)) {
+					return data.detail[1];
+				}
+				return data.detail;
+			})
+			.catch(() => "Failed to fetch secrets");
+
 		throw new FetchError({
-			message: "Error while fetching secrets",
 			status: res.status,
-			statusText: res.statusText
+			statusText: res.statusText,
+			message: errorData
 		});
 	}
 	return res.json();
 }
-
-export function useAllSecrets(
-	params: SecretsOverview,
-	options?: Omit<UseQueryOptions<SecretsPage, FetchError>, "queryKey" | "queryFn">
-) {
-	return useQuery<SecretsPage, FetchError>({
-		queryKey: getSecretsQueryKey(params),
-		queryFn: () => fetchAllSecrets(params),
-		...options
-	});
-}