diff --git a/package.json b/package.json
index 9111fad..180852a 100644
--- a/package.json
+++ b/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",
diff --git a/src/client/App.tsx b/src/client/App.tsx
deleted file mode 100644
index 082a243..0000000
--- a/src/client/App.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Button from "@mui/material/Button";
-
-function App() {
- return (
-
- the app:
-
- );
-}
-
-export default App;
diff --git a/src/client/components/DashboardLayout.tsx b/src/client/components/DashboardLayout.tsx
index e28bbac..8daacba 100644
--- a/src/client/components/DashboardLayout.tsx
+++ b/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,
diff --git a/src/client/main.tsx b/src/client/main.tsx
index 92377cd..a35039d 100644
--- a/src/client/main.tsx
+++ b/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(
-
+
+
+
,
);
diff --git a/src/client/query-client.ts b/src/client/query-client.ts
new file mode 100644
index 0000000..6c7b9de
--- /dev/null
+++ b/src/client/query-client.ts
@@ -0,0 +1,3 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();
diff --git a/src/client/routeTree.gen.ts b/src/client/routeTree.gen.ts
index d204c26..3dcced5 100644
--- a/src/client/routeTree.gen.ts
+++ b/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)
diff --git a/src/client/routes/index.tsx b/src/client/routes/index.tsx
index 3bbfc9a..adaabad 100644
--- a/src/client/routes/index.tsx
+++ b/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 Hello "/"!
;
+ 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" ? (
+
+ ) : announcementsQuery.status === "error" ? (
+ Error (see console)
+ ) : (
+ {JSON.stringify(announcementsQuery.data, null, 2)}
+ );
}
diff --git a/src/client/routes/subroute/index.tsx b/src/client/routes/subroute/index.tsx
new file mode 100644
index 0000000..6744eca
--- /dev/null
+++ b/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 Hello "/subroute/"!
;
+}
diff --git a/src/server/main.ts b/src/server/main.ts
index 1a6804a..b6ac040 100644
--- a/src/server/main.ts
+++ b/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"])
diff --git a/yarn.lock b/yarn.lock
index 1e2a665..96f0ea0 100644
--- a/yarn.lock
+++ b/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"