Passer au contenu principal
Menu
Full Stack

CMS HEADLESS

API GraphQL Node.js servie à un front React avec système de cache Redis.

Dépôt bientôt disponible
Node.jsGraphQLReactRedisMongoDB
Phase 1

Contexte

WordPress/Drupal imposaient couplage front/contenu. J'ai voulu construire un CMS headless (API-first) pour comprendre comment découpler contenu et présentation. Occasion d'apprendre GraphQL (inconnu à l'époque).

Phase 2

Méthodologie d'Apprentissage

  1. 1

    Comparaison REST vs GraphQL : avantages precise fetching

  2. 2

    Schema-first GraphQL : définition depuis les besoins du frontend

  3. 3

    Backend Apollo Server + MongoDB pour flexibilité schéma

  4. 4

    Redis comme cache layer (post-observation de latences requêtes imbriquées)

  5. 5

    Frontend React Apollo Client (cache côté client + optimistic UI)

Phase 3

Défis Techniques

N+1 problem GraphQL

Requêtes imbriquées (articles→auteurs→commentaires) = dizaines de queries MongoDB. Solution : DataLoader pour batching → temps réponse /8.

Invalidation cache Redis

Contenu mis à jour restait en cache. Solution : cache invalidation basée mutations GraphQL pour fraîcheur garantie.

Upload de fichiers dans GraphQL

GraphQL ne gère pas nativement uploads. Solution : endpoint REST dédié (Multer) + références dans schéma GraphQL.

Phase 4

Résultats

  • CMS headless CRUD complet + média + prévisualisation temps réel

  • Latence requêtes GraphQL 45ms (grâce cache Redis + DataLoader)

  • GraphQL maîtrisé : architecture schema, résolution N+1, optimisation resolvers

  • 5 technologies nouvelles apprises en parallèle = validation capacité d'apprentissage

Explore More

All Projects