Migreer PDC Frontend naar Strapi v5 API

[AliKdhim87]

Beschrijving

Update PDC Frontend (afhankelijk van PDC Dashboard) voor de nieuwe
Strapi v5 API response format.

ℹ️ Context

Strapi v5 verwijderde het data/attributes envelope.

Strapi v4 response:

{
  "data": {
    "id": 1,
    "attributes": {
      "title": "Hello",
      "content": "World"
    }
  }
}

Strapi v5 response:

{
  "id": 1,
  "title": "Hello",
  "content": "World"
}

Je code moet deze flattened format gebruiken.

Acceptance Criteria

• Alle Strapi API calls geaudit
• Data fetching layer gemigreerd
• API response format updated
• Types regenerated/updated (if TypeScript)
• Build successful
• Dev server starts
• Pages load
• API calls tested (mock data or dev server)
• No console errors

Taken

Stap 1: API calls auditen

• Find all Strapi API calls:
  • /pages/api/
  • /lib/api/
  • /hooks/ (custom hooks)
  • /lib/queries/ (GraphQL)
  • /lib/fetchers/

Stap 2: Response format aanpassingen

For each API call, change:

// VOOR (Strapi v4)
const response = await fetch('/api/articles');
const articles = response.data.map(article => article.attributes);

// NA (Strapi v5)
const response = await fetch('/api/articles');
const articles = response;  // Already flattened

Stap 3: Data destructuring

// VOOR
const { data } = await fetchArticle(id);
const { title, content } = data.attributes;

// NA
const article = await fetchArticle(id);
const { title, content } = article;

Stap 4: GraphQL updates (if applicable)

If you use GraphQL:

• Update query structure
• Remove attributes nesting
• Update resolvers

Stap 5: Environment variables

• Check .env.example
• Any Strapi v4-specific config? (update if needed)
• STRAPI_URL still correct?

Stap 6: Build testen

pnpm --filter @frameless/pdc-frontend build

Stap 7: Dev server testen

pnpm --filter @frameless/catalogi-data dev

# Check:
# - Pages load
# - No console errors
# - Data fetching works (with dev Strapi v5 running)

Stap 8: API contract testing

• Connect to PDC Dashboard (running Strapi v5)
• Create test data in CMS
• Frontend fetches and displays it

Expected Result

✅ PDC Frontend WORKS with Strapi v5 API
✅ PDC Dashboard WORKS
❌ Dashboard 2 still being migrated or just finished
❌ Frontend 2 not yet updated (will be next)
❌ Services not yet updated