still bug

client-electron/src/App.tsx

@@ -5,6 +5,7 @@ import HomePage from './pages/Home'
 import LoginPage from './pages/Login'
 import AndroidPage from './pages/Android'
 import RecipesPage from './pages/recipes/recipes'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 function router() {
   const routes: RouteObject[] = [
@@ -50,8 +51,14 @@ function router() {
   return createBrowserRouter(routes)
 }
 
+const queryClient = new QueryClient()
+
 const App: React.FC = () => {
-  return <RouterProvider router={router()} />
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router()} />
+    </QueryClientProvider>
+  )
 }
 
 export default App

client-electron/src/pages/recipes/recipes.tsx

@@ -2,7 +2,7 @@ import { type Task, taskSchema } from './models/schema'
 import { z } from 'zod'
 import DataTable from './components/data-table'
 import { columns } from './components/columns'
-import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 
 // Simulate a database read for tasks.
 async function getTasks() {
@@ -14,15 +14,9 @@ async function getTasks() {
 }
 
 const RecipesPage = () => {
-  const [tasks, setTasks] = useState<Task[]>([])
-  const [loading, setLoading] = useState(true)
+  const { data: tasks, isLoading } = useQuery({ queryKey: ['tasks'], queryFn: getTasks })
 
-  useEffect(() => {
-    getTasks().then(tasks => {
-      setTasks(tasks)
-      setLoading(false)
-    })
-  }, [])
+  console.log('here')
 
   return (
     <div className="flex flex-col w-full gap-3">
@@ -30,7 +24,7 @@ const RecipesPage = () => {
         <h1 className="text-3xl font-bold text-gray-900">Recipes</h1>
       </section>
       <section>
-        <DataTable data={tasks} columns={columns} isLoading={loading} />
+        <DataTable data={tasks} columns={columns} isLoading={isLoading} />
       </section>
     </div>
   )