integrate frontend and backend

frontend/src/components/pages/Edit.tsx

@@ -0,0 +1,9 @@
+import {Link} from "@tanstack/react-router";
+
+export const Edit = () => {
+  return (
+    <>
+      <Link search={() => {}} to="/">戻る</Link>
+    </>
+  )
+}

frontend/src/components/pages/Index.tsx

@@ -1,5 +1,36 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+import {Link} from "@tanstack/react-router";
+
+type ApiResponse = {
+  id: number,
+  name: string,
+  content: string,
+  updated_at: string
+}
+
+const BASE_URL = 'http://localhost:8000'
+
 export const Index = () => {
+  const {isLoading, data} = useQuery({
+    queryKey: ['diaries'],
+    queryFn: async () => {
+      const response = await axios.get<ApiResponse[]>(`${BASE_URL}/api/diaries/`)
+      return response.data
+    }
+  })
+
+  if (isLoading) return <div>Loading</div>
+
   return (
-    <p>hello</p>
+     <>
+       <h1>一覧</h1>
+       <ul>
+         {data.map((d)=> {
+           // search propsが必須なので、空の関数を渡しておく
+           return <li key={d.id}><Link search={() => {}} to={`${BASE_URL}/${d.id}`}>{d.name}</Link></li>
+       })}
+       </ul>
+    </>
   )
 }

frontend/src/main.tsx

@@ -4,6 +4,8 @@ import 'vite/modulepreload-polyfill'; // required for vite entrypoints
 import {Outlet, RootRoute, Route, Router, RouterProvider} from "@tanstack/react-router";
 import {TanStackRouterDevtools} from '@tanstack/router-devtools'
 import {Index} from "./components/pages/Index";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import {Edit} from "./components/pages/Edit";
 
 const rootRoute = new RootRoute(
   {
@@ -23,11 +25,21 @@ const indexRoot = new Route({
   component: Index
 })
 
-const routeTree = rootRoute.addChildren([indexRoot])
+const diaryRoot = new Route({
+  getParentRoute: () => rootRoute,
+  path: '/$diaryId',
+  component: Edit
+})
+
+const routeTree = rootRoute.addChildren([indexRoot.addChildren([diaryRoot])])
 const router = new Router({ routeTree })
 
+const queryClient = new QueryClient()
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </StrictMode>,
 )

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.14.6",
     "@tanstack/react-router": "^1.0.0",
     "@tanstack/router-devtools": "^1.0.0",
+    "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },