Traitement des requêtes de mutations
Lorsqu'une requête de mutation est effectuée (méthodes POST, PATCH, PUT ou DELETE) sur notre route, la fonction action est appelé. Cette fonction est exécutée côté serveur uniquement.
Nous allons maintenant permettre la modification des playlists en traitant ces requêtes de mutation.
Créer une fonction action qui, lorsqu'elle est exécutée, ajoute la track identifiée par son track_id à la playlist.
Guide
💿 Définir une fonction action
Voir une solution
export const action = () => {};
💿 Récupérer des données soumises
La fonction action nous expose les mêmes paramètres que la fonction loader : request et params. On va pouvoir ainsi récupérer l'id de la playlist dans les paramètres de l'URL et l'id de la track à ajouter dans le form data de la requête.
Nous pourrons utiliser la methode formData() de la request
Voir une solution
export const action = async ({ request, params: { id = "" } }: ActionArgs) => {
const rawFormData = await request.formData();
};
💿 Valider les données soumises
Pour s'assurer que les données soumises sont valides, nous allons utiliser la librairie zod. Cette librairie nous permet de définir la structure d'un objet et de valider au runtime cette structure.
Cela nous permet en plus de la validation d'avoir par la suite des données correctement typées.
Pour en savoir plus sur Zod voir la docs.
Voir une solution
const FormDataRequestSchema = z.object({
track_id: z.string(),
});
export const action = async ({ request, params: { id = "" } }: ActionArgs) => {
const rawFormData = Object.fromEntries(await request.formData());
const formData = FormDataRequestSchema.parse(rawFormData);
return null;
};
💿 Changer l'état du serveur
action étant une fonction exécuté côté serveur uniquement, nous allons pouvoir ici appeler directement notre repository.
Voir une solution
export const action = async ({ request, params: { id = "" } }: ActionArgs) => {
const rawFormData = Object.fromEntries(await request.formData());
const formData = FormDataRequestSchema.parse(rawFormData);
await playlists.addTrack(id, formData.track_id);
return null;
};
Ajoutons maintenant la possibilité de retirer des tracks de la playlist.