[UI v2] feat: Adds deployment details RQ hook

ui-v2/src/api/deployments/deployments.test.ts

@@ -7,6 +7,7 @@ import { describe, expect, it } from "vitest";
 import type { Deployment } from "./index";
 import {
 	buildCountDeploymentsQuery,
+	buildDeploymentDetailsQuery,
 	buildFilterDeploymentsQuery,
 	buildPaginateDeploymentsQuery,
 	queryKeyFactory,
@@ -42,6 +43,14 @@ describe("deployments api", () => {
 		);
 	};
 
+	const mockGetDeploymentAPI = (deployment: Deployment) => {
+		server.use(
+			http.get(buildApiUrl("/deployments/:id"), () => {
+				return HttpResponse.json(deployment);
+			}),
+		);
+	};
+
 	describe("buildPaginateDeploymentsQuery", () => {
 		it("fetches paginated deployments with default parameters", async () => {
 			const deployment = createFakeDeployment();
@@ -148,6 +157,23 @@ describe("deployments api", () => {
 		});
 	});
 
+	describe("buildDeploymentDetailsQuery", () => {
+		it("fetches deployment details", async () => {
+			const queryClient = new QueryClient();
+
+			const mockResponse = createFakeDeployment({ id: "my-id" });
+			mockGetDeploymentAPI(mockResponse);
+
+			const { result } = renderHook(
+				() => useSuspenseQuery(buildDeploymentDetailsQuery("my-id")),
+				{ wrapper: createWrapper({ queryClient }) },
+			);
+
+			await waitFor(() => expect(result.current.isSuccess).toBe(true));
+			expect(result.current.data).toEqual(mockResponse);
+		});
+	});
+
 	describe("useDeleteDeployment", () => {
 		it("invalidates cache and fetches updated value", async () => {
 			const mockDeployment = createFakeDeployment();

ui-v2/src/api/deployments/index.ts

@@ -34,6 +34,8 @@ export type DeploymentsPaginationFilter =
  * list-filter		=>   ['deployments', 'list', 'filter', { ...filter }]
  * counts			=>   ['deployments', 'counts']
  * count			=>   ['deployments', 'counts', { ...filter }]
+ * details			=>   ['deployments', 'details']
+ * detail			=>   ['deployments', 'details', id]
  * ```
  */
 export const queryKeyFactory = {
@@ -48,6 +50,8 @@ export const queryKeyFactory = {
 	counts: () => [...queryKeyFactory.all(), "counts"] as const,
 	count: (filter: DeploymentsFilter) =>
 		[...queryKeyFactory.counts(), filter] as const,
+	details: () => [...queryKeyFactory.all(), "details"] as const,
+	detail: (id: string) => [...queryKeyFactory.details(), id] as const,
 };
 
 // ----------------------------
@@ -140,14 +144,14 @@ export const buildFilterDeploymentsQuery = (
  *
  * @example
  * ```ts
- * const query = buildCountDeploymentsQuery({
+ * const query = useQuery(buildCountDeploymentsQuery({
  *   offset: 0,
  *   limit: 10,
  *   sort: "NAME_ASC",
  *   deployments: {
  *     name: { like_: "my-deployment" }
  *   }
- * });
+ * }));
  * ```
  */
 export const buildCountDeploymentsQuery = (
@@ -163,6 +167,32 @@ export const buildCountDeploymentsQuery = (
 		},
 	});
 
+/**
+ * Builds a query configuration for getting a deployment details
+ *
+ * @param id - deployment's id
+ *
+ * @returns Query configuration object for use with TanStack Query
+ *
+ * @example
+ * ```ts
+ * const query = useSuspenseQuery(buildDeploymentDetailsQuery(deployment.id));
+ * ```
+ */
+export const buildDeploymentDetailsQuery = (id: string) =>
+	queryOptions({
+		queryKey: queryKeyFactory.detail(id),
+		queryFn: async () => {
+			const res = await getQueryService().GET("/deployments/{id}", {
+				params: { path: { id } },
+			});
+			if (!res.data) {
+				throw new Error("'data' expected");
+			}
+			return res.data;
+		},
+	});
+
 // ----------------------------
 // --------  Mutations --------
 // ----------------------------

ui-v2/src/routes/deployments/deployment.$id.tsx

@@ -1,7 +1,11 @@
+import { buildDeploymentDetailsQuery } from "@/api/deployments";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/deployments/deployment/$id")({
 	component: RouteComponent,
+	loader: ({ context, params }) =>
+		context.queryClient.ensureQueryData(buildDeploymentDetailsQuery(params.id)),
+	wrapInSuspense: true,
 });
 
 function RouteComponent() {