feat: zod

src/client/routes/index.tsx

@@ -2,23 +2,44 @@ import { Alert, CircularProgress } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
+import z from "zod";
+
+const Announcements = z.array(
+	z.object({
+		id: z.number(),
+		title: z.string(),
+		text: z.string(),
+		publication_date: z.iso.datetime().transform((arg) => new Date(arg)),
+		image: z.string(),
+	}),
+);
 
 export const Route = createFileRoute("/")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
+	// the query to retrieve the announcements
 	const announcementsQuery = useQuery({
 		queryKey: ["announcements"],
-		queryFn: () => fetch("/api/announcements").then((x) => x.json()),
+		queryFn: async () => {
+			const response = await fetch("/api/announcements");
+			const data = await response.json();
+			const announcements = Announcements.parse(data);
+			console.log(announcements);
+			return announcements;
+		},
+		retry: false,
 	});
 
+	// log error only if we get one
 	useEffect(() => {
 		if (announcementsQuery.error) {
 			console.log(announcementsQuery.error);
 		}
 	}, [announcementsQuery.error]);
 
+	// handle loading / error / show values
 	return announcementsQuery.status === "pending" ? (
 		<CircularProgress aria-label="Loading…" />
 	) : announcementsQuery.status === "error" ? (