feat: download announcements via react query

package.json

@@ -15,6 +15,7 @@
 		"@fontsource/raleway": "5.2.8",
 		"@mui/icons-material": "^9.1.1",
 		"@mui/material": "^9.1.1",
+		"@tanstack/react-query": "^5.101.0",
 		"@tanstack/react-router": "^1.170.16",
 		"@tanstack/react-router-devtools": "^1.167.0",
 		"better-sqlite3": "^12.11.1",

src/client/App.tsx

@@ -1,11 +0,0 @@
-import Button from "@mui/material/Button";
-
-function App() {
-	return (
-		<div>
-			the app: <Button variant="contained">Click here</Button>
-		</div>
-	);
-}
-
-export default App;

src/client/components/DashboardLayout.tsx

@@ -20,7 +20,10 @@ interface Page {
 	to: ValidRoutes;
 }
 
-const pages: Page[] = [{ title: "Announcements", to: "/" }];
+const pages: Page[] = [
+	{ title: "Announcements", to: "/" },
+	{ title: "Subroute", to: "/subroute" },
+];
 
 export default function DashboardLayout({
 	children,

src/client/main.tsx

@@ -3,10 +3,11 @@ import "@fontsource/raleway/400.css";
 import "@fontsource/raleway/500.css";
 import "@fontsource/raleway/700.css";
 
+import { QueryClientProvider } from "@tanstack/react-query";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import React from "react";
 import ReactDOM from "react-dom/client";
-
+import { queryClient } from "./query-client";
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
@@ -22,6 +23,8 @@ declare module "@tanstack/react-router" {
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
-		<RouterProvider router={router} />
+		<QueryClientProvider client={queryClient}>
+			<RouterProvider router={router} />
+		</QueryClientProvider>
 	</React.StrictMode>,
 );

src/client/query-client.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();

src/client/routeTree.gen.ts

@@ -10,33 +10,43 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as SubrouteIndexRouteImport } from './routes/subroute/index'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SubrouteIndexRoute = SubrouteIndexRouteImport.update({
+  id: '/subroute/',
+  path: '/subroute/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/subroute/': typeof SubrouteIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/subroute': typeof SubrouteIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/subroute/': typeof SubrouteIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/subroute/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/subroute'
+  id: '__root__' | '/' | '/subroute/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  SubrouteIndexRoute: typeof SubrouteIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -48,11 +58,19 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/subroute/': {
+      id: '/subroute/'
+      path: '/subroute'
+      fullPath: '/subroute/'
+      preLoaderRoute: typeof SubrouteIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  SubrouteIndexRoute: SubrouteIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/client/routes/index.tsx

@@ -1,9 +1,29 @@
+import { Alert, CircularProgress } from "@mui/material";
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <div>Hello "/"!</div>;
+	const announcementsQuery = useQuery({
+		queryKey: ["announcements"],
+		queryFn: () => fetch("/api/announcements").then((x) => x.json()),
+	});
+
+	useEffect(() => {
+		if (announcementsQuery.error) {
+			console.log(announcementsQuery.error);
+		}
+	}, [announcementsQuery.error]);
+
+	return announcementsQuery.status === "pending" ? (
+		<CircularProgress aria-label="Loading…" />
+	) : announcementsQuery.status === "error" ? (
+		<Alert severity="error">Error (see console)</Alert>
+	) : (
+		<pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
+	);
 }

src/client/routes/subroute/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/subroute/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/subroute/"!</div>;
+}

src/server/main.ts

@@ -9,6 +9,7 @@ app.get("/hello", (_, res) => {
 });
 
 app.get("/api/announcements", async (_, res) => {
+	// await new Promise((resolve) => setTimeout(resolve, 1000));
 	const announcements = await db
 		.selectFrom("announcements")
 		.select(["id", "title", "text", "publication_date", "image"])

yarn.lock

@@ -586,7 +586,7 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz#10064ee44f4347b90c9a02b446bbf80a91632b12"
   integrity sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==
 
-"@fontsource/raleway@^5.2.10":
+"@fontsource/raleway@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@fontsource/raleway/-/raleway-5.2.8.tgz#d011757f5b80ca5f86321fba0c7b904f96b47b47"
   integrity sha512-OATNM+J4XniKQRlI1e67v3euOnCUiXwpqgMofomKc5JNYOq0JPE6E5uTXMnFaZejKN1Z7s05JrHpmYB7/tg1Fw==
@@ -849,6 +849,18 @@
   resolved "https://registry.yarnpkg.com/@tanstack/history/-/history-1.162.0.tgz#5e12a52edd82a5d6d3b081255ec899ccca335443"
   integrity sha512-79pf/RkhteYZTRgcR4F9kbk84P2N8rugQJswxfIqovlbRiT3yI7eBE+5QorIrZaOKktsgzRlXh1l/du/xpl4iA==
 
+"@tanstack/query-core@5.101.0":
+  version "5.101.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.101.0.tgz#45391ce143c270b7e7a55bd1a6696918f20782d1"
+  integrity sha512-cQetA74EB+seWySv1TTKr828TnP0u39m6LykwDXIo84SNortpDkp30TMEjkqtYCNP9c40uT/iwl6MLiufEt0Ow==
+
+"@tanstack/react-query@^5.101.0":
+  version "5.101.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.101.0.tgz#2dd56c5b96ec816d6b6ec9cee5c80ed298974733"
+  integrity sha512-rLlJXSpkqfizLWgkR5+eLeIk0MvTx/meEIR7LRjxic+qxiQP8zVjq7BqQkiCMNLQBlLfuOLqqr6KO5GtrDlmSg==
+  dependencies:
+    "@tanstack/query-core" "5.101.0"
+
 "@tanstack/react-router-devtools@^1.167.0":
   version "1.167.0"
   resolved "https://registry.yarnpkg.com/@tanstack/react-router-devtools/-/react-router-devtools-1.167.0.tgz#e2eac03269484558274be74eb2922a0548eb7152"