Laravel Wayfinder: Integrando seu backend Laravel ao frontend TypeScript com facilidade

Sempre acompanho lançamentos no ecossistema Laravel em busca de ferramentas que possam tornar o desenvolvimento mais eficiente e organizado. Ontem 02 de Abril, fiquei interessado em uma ferramenta promissora chamada Laravel Wayfinder, que parece resolver muitos dos desafios na integração entre backend Laravel e frontend TypeScript.

O que é o Laravel Wayfinder?

O Laravel Wayfinder é uma solução que gera automaticamente funções TypeScript totalmente tipadas diretamente a partir das rotas e controllers Laravel. Essa funcionalidade promete acabar com a necessidade de URLs hardcoded e elimina os erros comuns de digitação ou parâmetros incorretos no frontend.

Com o Wayfinder, desenvolvedores podem chamar endpoints Laravel diretamente como funções comuns do TypeScript, garantindo uma integração mais fluida e segura entre backend e frontend.

Instalação simples

A instalação é realmente bem simples:

composer require laravel/wayfinder
npm i -D vite-plugin-run

Configure o vite.config.js para monitorar mudanças automaticamente:

import { run } from "vite-plugin-run";

export default defineConfig({
    plugins: [
        run([
            {
                name: "wayfinder",
                run: ["php", "artisan", "wayfinder:generate"],
                pattern: ["routes/*.php", "app/**/Http/**/*.php"],
            },
        ]),
    ],
    resolve: {
        alias: {
            "@actions/": "./resources/js/actions",
            "@routes/": "./resources/js/routes",
        },
    },
});

Gerando definições automáticas

Com um simples comando, as definições são geradas automaticamente:

php artisan wayfinder:generate

Essas definições são organizadas automaticamente nos diretórios wayfinder, actions e routes, proporcionando um ambiente de desenvolvimento mais claro e eficiente.

Potencializando o uso com funções TypeScript

O Wayfinder permite acessar URLs e métodos HTTP facilmente, como neste exemplo:

import { show } from "@actions/App/Http/Controllers/PostController";

const postUrl = show.url(1); // Retorna "/posts/1"
const postHead = show.head(1); // { url: "/posts/1", method: "head" }

Suporte avançado para formulários HTML

Outra promessa interessante do Wayfinder é a geração automática de atributos para formulários convencionais:

php artisan wayfinder:generate --with-form

Exemplo de uso:

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

const Page = () => (
    <form {...store.form()}>
        {/* action="/posts" method="post" */}
    </form>
);

Integração com Inertia.js

Para desenvolvedores que utilizam Inertia.js, o Wayfinder é particularmente promissor ao facilitar ainda mais o processo de comunicação com backend:

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

const form = useForm({ name: "Meu novo post" });

form.submit(store()); // POST automático para `/posts`

Conclusão

O Laravel Wayfinder é uma ferramenta com grande potencial para melhorar significativamente a produtividade e a segurança em projetos Laravel com TypeScript. Estou bastante entusiasmado com suas possibilidades e recomendo que desenvolvedores fiquem atentos a esta solução para o futuro próximo.

Experimente e veja o quanto ela pode ajudar no seu dia a dia de desenvolvimento!

Veja o passo a passo no youtube

Meet Laravel Wayfinder — Wayfinder automatically generates fully-typed, importable TypeScript functions for your controllers and named routes so you can call your Laravel endpoints directly in your client code just like any other function.

Available now in public beta.… pic.twitter.com/1qhknrr3RO

— Taylor Otwell (@taylorotwell) April 2, 2025