feat(client): setup tanstack query and axios

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/src/components/Time.tsx

@@ -0,0 +1,17 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function Time() {
+  const { data: time } = useSuspenseQuery({
+    queryKey: ['time'],
+    queryFn: async () => axios.get<{ datetime: string }>('https://worldtimeapi.org/api/timezone/Asia/Shanghai')
+      .then(res => res.data.datetime)
+      .then(isoString => new Date(isoString).toLocaleTimeString()),
+  });
+  return (
+    <p>
+      Current time:
+      {time}
+    </p>
+  );
+}

client/src/routes/__root.tsx

@@ -1,13 +1,18 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createRootRoute, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 import { ThemeProvider } from '@/components/theme-provider';
 import '@/index.css';
 
+const queryClient = new QueryClient();
+
 function RootLayout() {
   return (
     <>
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-        <Outlet />
+        <QueryClientProvider client={queryClient}>
+          <Outlet />
+        </QueryClientProvider>
       </ThemeProvider>
       <TanStackRouterDevtools />
     </>

client/src/routes/index.tsx

@@ -1,4 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
+import { Suspense } from 'react';
+import { Time } from '@/components/Time';
 
 export const Route = createFileRoute('/')({
   component: Index,
@@ -8,6 +10,9 @@ function Index() {
   return (
     <div className="p-2">
       <h3>Welcome Home!</h3>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Time />
+      </Suspense>
     </div>
   );
 }