Laravel Wayfinder : Connectez votre backend Laravel à votre frontend TypeScript sans friction

Laravel Wayfinder est le tout nouveau package officiel proposé par l’équipe Laravel, actuellement en version bêta publique. Son objectif est de faciliter la communication entre votre backend Laravel et votre frontend TypeScript en générant automatiquement des fonctions TypeScript entièrement typées pour vos contrôleurs et routes. Fini les URLs en dur, les paramètres de route incertains ou les synchronisations manuelles fastidieuses.

Fonctionnalités principales

1. Génération automatique de fonctions TypeScript

Grâce à la commande artisan suivante :

php artisan wayfinder:generate

Wayfinder crée des fonctions TypeScript typées pour vos contrôleurs et routes Laravel. Ces fonctions peuvent être importées directement dans votre code client, vous permettant d’appeler vos endpoints Laravel comme n’importe quelle autre fonction.

2. Intégration transparente avec Vite

Wayfinder s’intègre parfaitement avec Vite. En configurant le plugin Vite approprié, la génération des définitions TypeScript est automatiquement déclenchée lors des modifications de vos fichiers de routes et de contrôleurs, garantissant une synchronisation constante entre le backend et le frontend.

3. Compatibilité avec InertiaJS et useForm

Wayfinder fonctionne de manière fluide avec InertiaJS. En passant simplement l’objet généré à la méthode submit() du formulaire, il détermine automatiquement l’URL et la méthode HTTP appropriées.

4. Personnalisation des chemins de génération

Vous pouvez configurer le chemin de base pour les définitions TypeScript générées, offrant une flexibilité dans l’organisation de vos assets frontend.

Exemple d’utilisation

Une fois les définitions TypeScript générées, vous pouvez les utiliser comme suit :

import { show } from "@actions/App/Http/Controllers/PostController";
show(1); // { url: "/posts/1", method: "get" }

Pour les contrôleurs invocables :

import StorePostController from "@actions/App/Http/Controllers/StorePostController";
StorePostController();

Et pour les routes nommées :

import { show } from "@routes/post";
show(1); // { url: "/posts/1", method: "get" }

Avec InertiaJS :

import { useForm } from "@inertiajs/react";
import { store } from "@actions/App/Http/Controllers/PostController";

const form = useForm({
  name: "Mon Super Post",
});

form.submit(store()); // Effectuera un POST vers `/posts`

Laravel Wayfinder est une avancée majeure pour les développeurs full-stack utilisant Laravel et TypeScript. En automatisant la génération de fonctions TypeScript pour vos routes et contrôleurs, il élimine les erreurs courantes liées aux URLs en dur et aux paramètres de route mal gérés. Actuellement en version bêta publique, il est prévu que l’API évolue jusqu’à la sortie stable en version 1.0.

Pour en savoir plus et consulter le code source, rendez-vous sur le dépôt GitHub officiel : https://github.com/laravel/wayfinder