FE: Ueberfluessige Requests eliminieren (Landing-Page, updateEventRole, Gruppen-Liste) #174

New issue

Closed

opened 2026-07-02 20:13:18 +02:00 by niboer · 0 comments

niboer commented

2026-07-02 20:13:18 +02:00

Owner

Beschreibung

Drei unabhaengige Optimierungen zur Eliminierung von API-Calls, die ohne Backend-Aenderungen auskommen.

Datei + Zeile: frontend/src/routes/+page.svelte:7-14

IST:

async function checkSession() {
  const res = await fetch('/api/v1/persons', { signal: AbortSignal.timeout(3000) });
  isLoggedIn = res.ok;
}

Der Client ruft GET /api/v1/persons mit 3s Timeout auf, nur um zu prufen, ob die Session gueltig ist. Der Request geht durch den BFF-Proxy ans Backend und validiert das JWT — volle Backend-Last fuer einen Boolean.

SOLL:

Server-seitig: +page.server.ts checkt locals.user (im handle-Hook validiert) und steuert isLoggedIn via data
Oder Client-seitig: Existenz von Cookie session_token (= eingeloggt) pragen
In beiden Faellen: kein API-Call

Reduktion: 1 Call → 0

2. updateEventRole: roleId im Formular statt Name-Lookup

Datei + Zeile: frontend/src/routes/app/events/[eventId]/+page.server.ts:622-633

IST:

const rolesRes = await fetch(`/api/v1/events/${eventId}/roles`);
const roles = await rolesRes.json() as EventRole[];
const targetRole = roles.find((r: EventRole) => r.name === originalName);
// dann: PUT /api/v1/events/{eventId}/roles/{roleId}

Die Action macht erst einen GET aller Rollen, um die roleId per name-Vergleich zu finden.

SOLL:

Das Formular sendet die roleId direkt mit (statt nur originalName)
Der GET-Call entfaellt komplett
SvelteKit invalidiert die Seite nach der Action ohnehin

Reduktion: 2 Calls → 1

3. Gruppen-Liste: memberCount ohne N+1 (Frontend-Workaround)

Datei + Zeile: frontend/src/routes/app/groups/+page.server.ts:11-27

IST:

const res = await fetch('/api/v1/groups');
for (const g of groups) {
  const mRes = await fetch(`/api/v1/groups/${g.groupId}/members`);
  memberCounts[g.groupId] = members.length;
}

Serielle N+1-Calls nur fuer die Mitglieder-Anzahl pro Gruppe.

SOLL (bis #169 implementiert ist):

GET /api/v1/groups → Response mit memberCount-Feld erweitern lassen (leichter Backend-Fix in openapi.yaml + groups.ts)
Oder: Mindestens parallelisieren via Promise.all statt serieller for-Schleife

Langfristig: #169 (groups?include=members) eliminiert das Problem komplett.

Abhaengigkeiten

keine von #169/#170/#171 fuers Frontend — die ersten beiden Punkte sind standalone umsetzbar
Punkt 3 kann als Workaround parallelisiert werden; die echte Loesung kommt mit #169

Labels

component/frontend, prio/medium, type/refactor

Meilenstein

MS-REST (#32)

### Beschreibung Drei unabhaengige Optimierungen zur Eliminierung von API-Calls, die ohne Backend-Aenderungen auskommen. --- ### 1. Landing Page: Login-Check per Cookie statt API-Call **Datei + Zeile:** `frontend/src/routes/+page.svelte:7-14` **IST:** ```typescript async function checkSession() { const res = await fetch('/api/v1/persons', { signal: AbortSignal.timeout(3000) }); isLoggedIn = res.ok; } ``` Der Client ruft `GET /api/v1/persons` mit 3s Timeout auf, nur um zu prufen, ob die Session gueltig ist. Der Request geht durch den BFF-Proxy ans Backend und validiert das JWT — volle Backend-Last fuer einen Boolean. **SOLL:** - Server-seitig: `+page.server.ts` checkt `locals.user` (im `handle`-Hook validiert) und steuert `isLoggedIn` via `data` - Oder Client-seitig: Existenz von Cookie `session_token` (= eingeloggt) pragen - In beiden Faellen: **kein API-Call** **Reduktion: 1 Call → 0** --- ### 2. updateEventRole: roleId im Formular statt Name-Lookup **Datei + Zeile:** `frontend/src/routes/app/events/[eventId]/+page.server.ts:622-633` **IST:** ```typescript const rolesRes = await fetch(`/api/v1/events/${eventId}/roles`); const roles = await rolesRes.json() as EventRole[]; const targetRole = roles.find((r: EventRole) => r.name === originalName); // dann: PUT /api/v1/events/{eventId}/roles/{roleId} ``` Die Action macht erst einen GET aller Rollen, um die `roleId` per `name`-Vergleich zu finden. **SOLL:** - Das Formular sendet die `roleId` direkt mit (statt nur `originalName`) - Der GET-Call entfaellt komplett - SvelteKit invalidiert die Seite nach der Action ohnehin **Reduktion: 2 Calls → 1** --- ### 3. Gruppen-Liste: memberCount ohne N+1 (Frontend-Workaround) **Datei + Zeile:** `frontend/src/routes/app/groups/+page.server.ts:11-27` **IST:** ```typescript const res = await fetch('/api/v1/groups'); for (const g of groups) { const mRes = await fetch(`/api/v1/groups/${g.groupId}/members`); memberCounts[g.groupId] = members.length; } ``` Serielle N+1-Calls nur fuer die Mitglieder-Anzahl pro Gruppe. **SOLL (bis #169 implementiert ist):** - `GET /api/v1/groups` → Response mit `memberCount`-Feld erweitern lassen (leichter Backend-Fix in openapi.yaml + groups.ts) - Oder: Mindestens parallelisieren via `Promise.all` statt serieller `for`-Schleife **Langfristig:** #169 (`groups?include=members`) eliminiert das Problem komplett. ### Abhaengigkeiten - **keine von #169/#170/#171** fuers Frontend — die ersten beiden Punkte sind standalone umsetzbar - Punkt 3 kann als Workaround parallelisiert werden; die echte Loesung kommt mit #169 ### Labels component/frontend, prio/medium, type/refactor ### Meilenstein MS-REST (#32)

niboer added this to the MS-REST: Restliche Aufgaben milestone

2026-07-02 20:13:18 +02:00

niboer added the

component/frontend

prio/medium

type/refactor

labels

2026-07-02 20:13:18 +02:00

niboer referenced this issue from a commit

2026-07-02 21:01:26 +02:00

refactor: ueberfluessige requests eliminiert

niboer closed this issue