The Daily Commit · Edición de sección Portada PHP AI Dev EN DE FR ES

The Php Times

Lecturas — Ecosistema

Wayfinder lleva el tipado de Laravel al frontend React


Freek Van der Herten muestra, a partir de un proyecto de Spatie, cómo Laravel Wayfinder conecta React e Inertia con llamadas tipadas al backend.

FREEK.DEV, 9 de octubre de 2026 seleccionado por Sönke

Las funciones TypeScript generadas validan parámetros y controladores. Un plugin de Vite las regenera cuando cambian las rutas de Laravel y reduce los errores de URL que suelen aparecer tarde.

Wayfinder lleva el tipado de Laravel al frontend React
Imagen: freek.dev ↗

Freek Van der Herten sitúa Wayfinder en There There, el helpdesk que Spatie desarrolla tras dos décadas gestionando su propio soporte para proyectos open source y servicios SaaS. La aplicación usa Laravel e Inertia y está en beta privada. Su IA ayuda al agente de soporte, la persona conserva el control de la conversación y el modelo pule las respuestas.

Wayfinder
import {
 add as addTeamMember,
 remove as removeTeamMember,
} from '@/routes/app/settings/workspace/teams/members';
removeTeamMember.url({ team: team.ulid, user: member.ulid });
addTeamMember.url({ team: team.ulid, user: member.ulid });

Una aplicación React acumula URL en llamadas fetch, acciones de formularios y enlaces. Si una ruta de Laravel cambia de nombre o recibe un parámetro obligatorio, el problema puede llegar a producción sin aviso durante la compilación. Wayfinder genera una función para cada ruta con nombre. Su método .url() construye la URL y TypeScript comprueba los parámetros. Si el backend cambia user por member, TypeScript señala cada llamada afectada. Los nombres de las rutas también se convierten en rutas de importación, lo que facilita localizarlas con autocompletado.

Los controladores reciben sus propias funciones generadas. El ejemplo usa MessageRetryController con fetch y el método POST para reintentar un mensaje saliente fallido. Cambiar el nombre del controlador PHP rompe la compilación de TypeScript. El plugin @laravel/vite-plugin-wayfinder observa las rutas y los controladores durante el desarrollo y vuelve a generar las funciones después de cada cambio. Según el autor, el enfoque reduce los errores tras cambios de rutas. Las llamadas fetch devuelven menos respuestas 404 inesperadas, y las discusiones sobre las barras finales han desaparecido.

Leer la fuente original (en inglés) ↗

Valora este artículo: 0

Tribuna de lectores

Aún no hay aportaciones — abre el debate.

← Ecosistema — Page B1

"All the Code That's Fit to Ship" · The Daily Commit · Edición de pantalla · Información legal · Política de privacidad