Comment utiliser Zod fr FR

Résumé : Zod est une bibliothèque de validation de schéma et de déclaration de type. StartER l'utilise pour garantir l'intégrité des données à la fois dans le backend (API) et le frontend (Formulaires).

Validation côté React

Dans StartER, les formulaires récupèrent les données avec l'objet natif FormData. Avant d'envoyer ces données ou d'appeler l'action, utilisez Zod pour vous assurer que les données sont valides.

Dans vos composants (par exemple ItemForm.tsx), définissez votre schéma :

import { z } from "zod";

const itemSchema = z.object({
  title: z.string().min(1, "Le titre est requis"),
});

Puis, utilisez-le lors de la soumission dans action={} :

<form
  action={(formData) => {
    const title = formData.get("title")?.toString() ?? "";

    // 1. Validation avec Zod
    const parsed = itemSchema.safeParse({ title });

    if (!parsed.success) {
      // Afficher les erreurs à l'utilisateur
      alert(z.prettifyError(parsed.error));
      return;
    }

    // 2. Les données sont validées (parsed.data) et typées
    action(parsed.data);
  }}
>

Validation côté Express

Côté backend, les middlewares Express utilisent Zod pour intercepter les requêtes HTTP invalides avant qu'elles n'atteignent vos actions.

Dans votre module (par exemple itemValidator.ts), ajoutez un schéma métier et créez un middleware de validation. Vous pouvez le faire "à la main" (voir ci-dessous) ou utiliser le helper createValidator de src/express/modules/utils.ts (voir le "tip" juste après).

import { z } from "zod";
import type { RequestHandler } from "express";

// Définition du schéma métier

const itemSchema = z.object({
  title: z.string().max(255, "Le titre ne doit pas dépasser 255 caractères"),
});

// Middleware de validation

const validate: RequestHandler = (req, res, next) => {
  const parsed = itemSchema.safeParse(extract(req));

  if (!parsed.success) {
    const { issues } = parsed.error;

    res.status(400).json(issues);

    return;
  }

  // Injecte les données validées en remplaçant req.body pour l'action suivante
  req.body = parsed.data;

  next();
};

export default { validate };

Tip

Vous pouvez aussi utiliser le helper createValidator de src/express/modules/utils.ts. Le code :

// Middleware de validation
const validate: RequestHandler = (req, res, next) => {
  const parsed = itemSchema.safeParse(extract(req));

  if (!parsed.success) {
    const { issues } = parsed.error;

    res.status(400).json(issues);

    return;
  }

  // Injecte les données validées en remplaçant req.body pour l'action suivante
  req.body = parsed.data;

  next();
};

export default { validate };

Devient :

// Middleware de validation avec le helper

export default createValidator(itemSchema);

C'est la méthode recommandée dans StartER.

Puis insérez ce middleware dans vos déclarations de routes API (dans itemRoutes.ts) :

import { validateItem } from "./itemValidator";
import itemActions from "./itemActions";

// Le middleware de validation s'exécute AVANT l'action `add`
router.post("/api/items", validateItem, itemActions.add);

Bonnes pratiques et cas d'usage

Code partagé : vous pouvez théoriquement partager vos schémas Zod entre le frontend et le backend en les plaçant dans un répertoire partagé (ex: src/types), bien que StartER conseille par défaut de garder les validations frontend dédiées à l'expérience utilisateur et les validations backend dédiées à la rigueur de la base de données.
Affichage des erreurs : côté client, z.treeifyError(parsed.error) structure facilement les messages d'erreur afin de pouvoir les afficher sous les champs fautifs.