queries not returning as objects, stuck

frontend/.prettierrc

@@ -0,0 +1 @@
+{}

frontend/package.json

@@ -20,11 +20,13 @@
     "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.2.5",
     "vite": "^5.1.6"
   }
 }

frontend/src/App.jsx

@@ -1,5 +1,7 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Details from "./components/details";
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -16,7 +18,7 @@ function App() {
       <BrowserRouter>
         <h1> NEAT-O </h1>
         <Routes>
-          <Route path="/details/" element={<div> insert CRUD here </div>} />
+          <Route path="/details/" element={<Details />} />
           <Route path="/" element={<div> ROOT TOOTY </div>} />
         </Routes>
       </BrowserRouter>

frontend/src/bin/fetchOne.js

@@ -0,0 +1,12 @@
+const fetchOne = async ({ queryKey }) => {
+  const id = queryKey[1];
+  const apiRes = await fetch(`http://localhost:3000/api/getOne/?id=${id}`);
+
+  if (!apiRes.ok) {
+    throw new Error(`getOne/${id} fetch not ok`);
+  }
+
+  return apiRes.json();
+};
+
+export default fetchOne;

frontend/src/bin/getAll.js

@@ -0,0 +1,12 @@
+const getAll = async (queryKey) => {
+  const id = queryKey[1];
+  const apiRes = await fetch(`http://localhost:3000/api/getall/?id=${id}`);
+
+  if (!apiRes.ok) {
+    throw new Error(`getAll fetch not ok`);
+  }
+
+  return apiRes.json();
+};
+
+export default getAll;

frontend/src/components/details.jsx

@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import getAll from "../bin/getAll.js";
+import { useParams } from "react-router-dom";
+
+const Details = () => {
+  const { data } = useParams();
+
+  const results = useQuery({ queryKey: [data], getAll });
+
+  if (results.isLoading) {
+    return (
+      <div className="loading-pane">
+        <h2 className="loader">🌀</h2>
+      </div>
+    );
+  }
+
+  const stuff = results;
+
+  console.log(stuff);
+
+  return (
+    <div>
+      {stuff.data.map((id) => (
+        <div key={id}>{id}</div>
+      ))}
+    </div>
+  );
+};
+export default Details;