Add TanStack Router, TanStack Query, Directus client, entity types

frontend/src/routes/__root.tsx

@@ -0,0 +1,37 @@
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import { lazy, Suspense } from 'react'
+import { globalsQuery, menusQuery } from '@/lib/queries'
+
+const TanStackRouterDevtools =
+  import.meta.env.PROD
+    ? () => null
+    : lazy(() =>
+        import('@tanstack/react-router-devtools').then((m) => ({ default: m.TanStackRouterDevtools })),
+      )
+
+const ReactQueryDevtools =
+  import.meta.env.PROD
+    ? () => null
+    : lazy(() =>
+        import('@tanstack/react-query-devtools').then((m) => ({ default: m.ReactQueryDevtools })),
+      )
+
+export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+  loader: async ({ context: { queryClient } }) => {
+    await Promise.all([queryClient.ensureQueryData(globalsQuery), queryClient.ensureQueryData(menusQuery)])
+  },
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <>
+      <Outlet />
+      <Suspense>
+        <TanStackRouterDevtools />
+        <ReactQueryDevtools buttonPosition="bottom-left" />
+      </Suspense>
+    </>
+  )
+}