timeline db and react query

apps/web/package.json

@@ -17,14 +17,17 @@
     "@tanstack/react-form": "^1.23.5",
     "@tanstack/react-query": "^5.80.6",
     "@tanstack/react-router": "^1.141.1",
+    "@tanstack/react-router-ssr-query": "^1.162.6",
     "@tanstack/react-router-with-query": "^1.130.17",
     "@tanstack/react-start": "^1.141.1",
     "@tanstack/router-plugin": "^1.141.1",
     "@zendegi/auth": "workspace:*",
+    "@zendegi/db": "workspace:*",
     "@zendegi/env": "workspace:*",
     "better-auth": "catalog:",
     "clsx": "^2.1.1",
     "dotenv": "catalog:",
+    "drizzle-orm": "^0.45.1",
     "lucide-react": "^0.525.0",
     "next-themes": "^0.4.6",
     "react": "19.2.3",

apps/web/src/functions/get-timelines.ts

@@ -0,0 +1,20 @@
+import { eq } from "drizzle-orm";
+import { db } from "@zendegi/db";
+import { createServerFn } from "@tanstack/react-start";
+import { timeline } from "@zendegi/db/schema/timeline";
+import { queryOptions } from "@tanstack/react-query";
+
+export const getTimelines = createServerFn({ method: "GET" }).handler(
+  async () => {
+    return db.query.timeline.findMany({
+      where: eq(timeline.visibility, "public"),
+      orderBy: (t, { desc }) => [desc(t.createdAt)],
+    });
+  }
+);
+
+export const timelinesQueryOptions = () =>
+  queryOptions({
+    queryKey: ["timelines"],
+    queryFn: () => getTimelines(),
+  });

apps/web/src/functions/get-user.ts

@@ -1,5 +1,4 @@
 import { createServerFn } from "@tanstack/react-start";
-
 import { authMiddleware } from "@/middleware/auth";
 
 export const getUser = createServerFn({ method: "GET" })

apps/web/src/router.tsx

@@ -1,19 +1,29 @@
 import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+import { QueryClient } from "@tanstack/react-query";
 
 import Loader from "./components/loader";
 import "./index.css";
 import { routeTree } from "./routeTree.gen";
 
 export const getRouter = () => {
+  const queryClient = new QueryClient();
+
   const router = createTanStackRouter({
     routeTree,
+    context: { queryClient },
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
-    context: {},
     defaultPendingComponent: () => <Loader />,
     defaultNotFoundComponent: () => <div>Not Found</div>,
     Wrap: ({ children }) => <>{children}</>,
   });
+
+  setupRouterSsrQueryIntegration({
+    router,
+    queryClient,
+  });
+
   return router;
 };
 

apps/web/src/routes/__root.tsx

@@ -8,9 +8,12 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
 import Header from "../components/header";
 import appCss from "../index.css?url";
+import type { QueryClient } from "@tanstack/react-query";
 import { Toaster } from "@/components/ui/sonner";
 
-export interface RouterAppContext {}
+export interface RouterAppContext {
+  queryClient: QueryClient;
+}
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({
   head: () => ({

apps/web/src/routes/timelines.tsx

@@ -1,9 +1,24 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { timelinesQueryOptions } from "@/functions/get-timelines";
 
 export const Route = createFileRoute("/timelines")({
+  loader: async ({ context }) => {
+    await context.queryClient.ensureQueryData(timelinesQueryOptions());
+  },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return <div>List of timelines</div>;
+  const timelinesQuery = useSuspenseQuery(timelinesQueryOptions());
+  return (
+    <div>
+      <h1>List of timelines</h1>
+      <div>
+        {timelinesQuery.data.map((t) => (
+          <div key={t.id}>{t.title}</div>
+        ))}
+      </div>
+    </div>
+  );
 }