Query it with react query

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^4.0.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",

frontend/src/App.js

@@ -5,7 +5,9 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Dashboard from "./Dashboard/Dashboard";
 import Preferences from "./Preferences/Preferences";
 import PocketBase from "pocketbase";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+const queryClient = new QueryClient();
 function App() {
   const [token, setToken] = useState();
   console.log(token);
@@ -18,13 +20,15 @@ function App() {
   return (
     <div className="wrapper">
       <h1>Application</h1>
-      <BrowserRouter>
-        <Routes>
-          {/* <Route path="/" element={<App />} /> */}
-          <Route path="dashboard" element={<Dashboard client={client} />} />
-          <Route path="preferences" element={<Preferences />} />
-        </Routes>
-      </BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Routes>
+            {/* <Route path="/" element={<App />} /> */}
+            <Route path="dashboard" element={<Dashboard client={client} />} />
+            <Route path="preferences" element={<Preferences />} />
+          </Routes>
+        </BrowserRouter>
+      </QueryClientProvider>
     </div>
   );
 }

frontend/src/Dashboard/Dashboard.js

@@ -1,27 +1,25 @@
 import React, { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 export default function Dashboard({ client }) {
-  const getCars = async () => {
+  const { isLoading, error, data } = useQuery(["repoData"], () =>
     client.Records.getList("user_nums", 1, 50, {
       filter: "created >= '2022-01-01 00:00:00'",
     })
-      .then(function (list) {
-        // success...
-        console.log("list", list);
-      })
-      .catch(function (error) {
-        // error...
-        console.error("getlist error", error);
-      });
-  };
-  //   console.log(client);
-  useEffect(() => {
-    getCars();
-  });
+  );
+
+  if (isLoading) return "Loading...";
+
+  if (error) return "An error has occurred: " + error.message;
+  console.log(data);
+  console.log(data.items);
+  let favorite_numbers = [];
+  for (const item of data.items) {
+    favorite_numbers.push(item.num + " ");
+  }
   return (
     <div>
-      <h2>Dashboard {client.AuthStore.model.email}</h2>
-      {/* <div>{getCars()}</div> */}
+      <div>{favorite_numbers}</div>
     </div>
   );
 }