feat: added type-safe react-query setup

frontend/.env.development

@@ -1 +1 @@
-VITE_API_BASE_URL=http://localhost:8090/api/v1
+VITE_API_BASE_URL=http://localhost:8080/api/v1

frontend/package.json

@@ -13,8 +13,11 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.59.16",
+    "@tanstack/react-query-devtools": "^5.59.16",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "ky": "^1.0.0",
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -36,7 +39,6 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
-    "ky": "^1.7.2",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",

frontend/src/components/features/connections/ConnectionsView.tsx

@@ -0,0 +1,9 @@
+import { Connection } from "@/types/Connection";
+
+export default function ConnectionsView({
+  connections,
+}: {
+  connections: Connection[];
+}) {
+  return <h1>View {connections.at(0)?.id}</h1>;
+}

frontend/src/hooks/features/connections/useConnections.ts

@@ -0,0 +1,9 @@
+import { ConnectionService } from "@/services/ConnectionService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useConnectionsQuery = () => {
+  return useQuery({
+    queryKey: ["connections"],
+    queryFn: ConnectionService.findAll,
+  });
+};

frontend/src/main.tsx

@@ -3,9 +3,16 @@ import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
 import "./index.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root") as HTMLElement).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   </StrictMode>
 );

frontend/src/pages/ConnectionsPage.tsx

@@ -1,7 +1,31 @@
+import ConnectionsView from "@/components/features/connections/ConnectionsView";
+import { useConnectionsQuery } from "@/hooks/features/connections/useConnections";
+
 export default function Connections() {
-  return (
-    <>
-      <div>Connections</div>
-    </>
-  );
+  const connectionsQuery = useConnectionsQuery();
+
+  if (connectionsQuery.isLoading) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-between h-full">
+          <h1>Loading...</h1>
+        </div>
+      </>
+    );
+  }
+
+  if (connectionsQuery.isError) {
+    console.log(connectionsQuery.error);
+    throw new Error("We were not able to fetch connections.");
+  }
+
+  if (connectionsQuery.isSuccess) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-between h-full">
+          <ConnectionsView connections={connectionsQuery.data} />
+        </div>
+      </>
+    );
+  }
 }

frontend/src/services/ConnectionService.ts

@@ -1,14 +1,14 @@
-import { Connection, ConnectionSchema } from "../types/Connection";
-import { http } from "./kySetup";
 import { z } from "zod";
+import { kyInstance } from "./ky.setup";
+import { ConnectionSchema } from "@/types/Connection";
 
 const ROUTES = {
-  FIND_ALL: "/connections",
+  FIND_ALL: "connections",
 };
 
 export const ConnectionService = {
-  async getAllConnections() {
-    const data = await http.get<Connection[]>(ROUTES.FIND_ALL).json();
+  findAll: async () => {
+    const data = await kyInstance.get(ROUTES.FIND_ALL).json();
     return z.array(ConnectionSchema).parse(data);
   },
 };

frontend/src/services/kySetup.ts → frontend/src/services/ky.setup.ts

@@ -2,7 +2,7 @@ import ky from "ky";
 
 const API_URL = import.meta.env.VITE_API_BASE_URL as string;
 
-export const http = ky.extend({
+export const kyInstance = ky.extend({
   prefixUrl: API_URL,
   hooks: {
     beforeRequest: [