Kontrollverlust/frontend/src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RouterProvider, createBrowserRouter } from "react-router";
import { ApiError } from "./api";
import { Layout } from "./Layout";
import { FeedPage } from "./pages/FeedPage";
import { EntryPage } from "./pages/EntryPage";
import { UserPage } from "./pages/UserPage";
import { StatsPage } from "./pages/StatsPage";
import "./app.css";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 4xx ist eine Antwort, kein Aussetzer -- erneut fragen ändert nichts.
      retry: (count, err) => !(err instanceof ApiError && err.status < 500) && count < 2,
      // Beim Zurückwechseln in den Tab nicht den ganzen Feed neu laden; die
      // Daten werden gezielt nach eigenen Aktionen invalidiert.
      refetchOnWindowFocus: false,
      staleTime: 30_000,
    },
  },
});

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      { path: "/", element: <FeedPage /> },
      { path: "/e/:pid", element: <EntryPage /> },
      { path: "/u/:username", element: <UserPage /> },
      { path: "/stats", element: <StatsPage /> },
    ],
  },
]);

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </StrictMode>,
);