Aller au contenu principal

Examen blanc – Laravel Inertia

Niveau 5.2 – Laravel Inertia

Objectif​

S'entraîner avant l'examen officiel : questions avec réponses à l'appui (corrections dépliables).
Cet examen blanc n'est pas noté et ne fait pas l'objet d'enregistrement.

Partie 1 – Notions de base​

Q1.1​

Qu'est-ce qu'Inertia.js et qui gère le routing dans une application Laravel + Inertia ?

Réponse attendue

Inertia.js est une bibliothèque qui relie Laravel (routes, contrôleurs) à React ou Vue sans construire une API REST dédiée. Le routing est géré par Laravel (fichier routes/web.php) : une URL = une route Laravel. Le contrôleur renvoie Inertia::render('NomComposant', $props) ; le client affiche le composant React/Vue correspondant avec ces props.

Q1.2​

Comment le contrôleur Laravel envoie-t-il les données à la page React/Vue ? Quel header le client envoie pour une requête Inertia ?

Réponse attendue
  • Côté Laravel : Inertia::render('NomDuComposant', [ 'prop' => $value ]). Laravel renvoie du JSON (ou HTML avec données inline) contenant le nom du composant et les props.
  • Le client Inertia envoie le header X-Inertia: true pour indiquer qu'il attend une réponse Inertia (composant + props) et non une page HTML classique.

Q1.3​

Pour créer un lien qui navigue sans rechargement complet en React + Inertia, que faut-il utiliser ?

Réponse attendue

Le composant <Link href="..."> fourni par @inertiajs/react (ou l'équivalent Vue). Un simple <a href="..."> provoquerait un rechargement complet. Link intercepte le clic, envoie une requête XHR à Laravel et met à jour le contenu de la page avec le composant renvoyé.

Partie 2 – Formulaires et validation​

Q2.1​

Comment soumettre un formulaire avec Inertia en conservant la navigation SPA ? Où s'exécute la validation ?

Réponse attendue
  • Soumission : router.post(url, data) ou un formulaire dont l'action et la méthode sont gérées par Inertia (composant Form ou formulaire avec onSubmit qui appelle router.post). Pas de form.submit() classique.
  • La validation s'exécute côté serveur (Laravel : $request->validate() ou Form Request). Les erreurs sont renvoyées dans la réponse et accessibles côté client (ex. usePage().props.errors).

Q2.2​

Comment partager des données (ex. user connecté, messages flash) avec toutes les pages Inertia ?

Réponse attendue

Via le middleware HandleInertiaRequests et la méthode share() (ou équivalent) : on ajoute des données (auth.user, flash.success, etc.) qui sont injectées dans chaque réponse Inertia. Côté client, usePage().props.auth.user ou usePage().props.flash.

Q2.3​

Comment afficher les erreurs de validation renvoyées par Laravel dans une page React Inertia ?

Réponse attendue

Les erreurs sont généralement dans usePage().props.errors (objet clé = nom du champ, valeur = message). On peut afficher à côté de chaque champ le message d’erreur du champ (ex. en JSX : condition sur errors.email et affichage dans un <span>).

Partie 3 – Technique​

Q3.1​

Que fait router.visit(url) côté client ? Et router.refresh() ?

Réponse attendue
  • router.visit(url) : envoie une requête à Laravel pour cette URL et affiche la page (composant) renvoyée, sans rechargement complet du navigateur.
  • router.refresh() : recharge les props de la page courante (re-fetch depuis Laravel) sans changer d'URL ni de composant.

Q3.2​

Pour une liste paginée, comment Laravel envoie-t-il souvent les données à Inertia ?

Réponse attendue

Souvent un objet avec data (les éléments de la page), links (liens first, prev, next, last) et meta (current_page, total, etc.) — le format standard de pagination Laravel. Le composant React/Vue utilise ces liens pour les boutons « Suivant / Précédent » en appelant router.visit(links.next) ou en utilisant un Link avec l’URL de la page suivante (ex. links.next).

Q3.3​

Quel fichier côté Laravel gère le middleware Inertia et les données partagées ?

Réponse attendue

app/Http/Middleware/HandleInertiaRequests.php. On y enregistre les données partagées (user, flash, etc.) et on peut personnaliser la racine du versioning des assets si besoin.

Partie 4 – Exercice (conceptuel)​

Q4.1​

Décrire en quelques phrases comment vous implémenteriez une page « Contact » : formulaire (nom, email, message), soumission vers Laravel, validation, et affichage d’un message de succès.

Réponse attendue
  • Route Laravel (ex. POST /contact) et contrôleur qui valide les champs avec $request->validate([...]).
  • Si erreur : renvoyer redirect()->back()->withErrors($validator) ; Inertia renverra la même page avec les props errors.
  • Si succès : redirect()->back()->with('success', 'Message envoyé') ; dans HandleInertiaRequests on partage flash.success ; en React on affiche usePage().props.flash.success.
  • Côté React : formulaire avec state local (ou non contrôlé), onSubmit qui appelle router.post(route('contact'), formData). Afficher errors.xxx sous chaque champ.

Suite​

Quand vous vous sentez prêt, passez l'examen officiel (noté) : 📝 Examen Inertia.