Dicken/LaunchPad
1
0
Fork 0
generated from Dicken/dickendock
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

round71: Abfrage-Cache in localStorage gespiegelt - kein leerer Ladezustand mehr bei echtem Seiten-Reload

Browse Source
This commit is contained in:
Dicken
2026-07-26 23:43:52 +02:00
parent 1e90eb2905
commit ee7bd9fcbf
2 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/frontend/package.json
View File

@@ -16,7 +16,9 @@
"@fortawesome/react-fontawesome": "^3.5.0", "@fortawesome/react-fontawesome": "^3.5.0",
"@launchpad/shared": "workspace:*", "@launchpad/shared": "workspace:*",
"@launchpad/ui": "workspace:*", "@launchpad/ui": "workspace:*",
"@tanstack/react-query": "^5.51.23", "@tanstack/react-query": "5.101.2",
"@tanstack/query-sync-storage-persister": "5.101.2",
"@tanstack/react-query-persist-client": "5.101.2",
"@tanstack/react-router": "^1.58.3", "@tanstack/react-router": "^1.58.3",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"

27
apps/frontend/src/main.tsx
View File

@@ -1,6 +1,8 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient } from "@tanstack/react-query";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { RouterProvider } from "@tanstack/react-router"; import { RouterProvider } from "@tanstack/react-router";
import { router } from "./router.js"; import { router } from "./router.js";
import "./index.css"; import "./index.css";
@@ -31,10 +33,29 @@ const queryClient = new QueryClient({
}, },
}); });
// NEU: Ohne das hier verlor ein ECHTER Seiten-Reload (z. B. "Runterziehen
// zum Aktualisieren" auf dem Handy) den kompletten Abfrage-Cache - alle
// Daten (Dienste, Lesezeichen, Kategorien, "Zuletzt besucht", Einstellungen)
// mussten neu vom Server geholt werden, bis dahin zeigte die Startseite
// zwangsläufig einen leeren Lade-Platzhalter (siehe Bugreport-Screenshot).
// Der Persister spiegelt den Cache zusätzlich in localStorage - beim
// nächsten Laden wird SOFORT der zuletzt bekannte Stand angezeigt (keine
// Lücke mehr), während im Hintergrund still neu geladen wird und die
// Ansicht bei Abweichungen automatisch aktualisiert. maxAge begrenzt, wie
// alt ein aus dem Speicher geladener Stand höchstens sein darf, bevor er
// verworfen wird (dann normaler Ladevorgang wie bisher).
const persister = createSyncStoragePersister({
storage: window.localStorage,
key: "launchpad-query-cache",
});
ReactDOM.createRoot(document.getElementById("root")!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode> <React.StrictMode>
<QueryClientProvider client={queryClient}> <PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister, maxAge: 24 * 60 * 60 * 1000 }}
>
<RouterProvider router={router} /> <RouterProvider router={router} />
</QueryClientProvider> </PersistQueryClientProvider>
</React.StrictMode> </React.StrictMode>
); );