Typed routes from Laravel to React with Wayfinder

I have been writing about There There loads currently. It is a helpdesk we’re constructing at Spatie, born from twenty years of operating our personal buyer help for our open supply work and SaaS apps. In spite of everything that point being the shopper of different helpdesks, we lastly began on the one we really needed to make use of.

Our tackle AI right here is to intention it on the help agent, not the shopper. The human owns the dialog. The mannequin makes the reply just a little cleaner and just a little sooner. There There’s in non-public beta, and you may apply for early entry at there-there.app.

We’re constructing There There with Laravel and Inertia. One bundle we have come to depend on is Laravel Wayfinder. It generates typed TypeScript features for each route and controller in your Laravel app, so the frontend talks to the backend and not using a single hardcoded URL. This submit is about why that issues.

Utilizing Wayfinder

A React codebase rapidly fills up with URL strings. Each fetch, each type motion, each hyperlink factors to a route by means of a template literal. You then rename a route in Laravel, or add a required parameter, and nothing breaks at compile time. You discover out in manufacturing, or when a teammate clicks the improper factor.

Wayfinder fixes this by producing a operate per named route. You import it and name .url() to construct the URL.

This is a snippet from our crew membership toggle.

import {
    add as addTeamMember,
    take away as removeTeamMember,
} from '@/routes/app/settings/workspace/groups/members';

removeTeamMember.url({ crew: crew.ulid, person: member.ulid });
addTeamMember.url({ crew: crew.ulid, person: member.ulid });

Two issues are price mentioning. First, the parameters are type-checked. Should you rename the person route parameter to member, TypeScript catches each caller. Second, the route names map cleanly to import paths, so discovering them is simply autocomplete.

Wayfinder additionally generates a typed operate per controller. We use that after we discuss to an endpoint through plain fetch, outdoors of an Inertia go to. This is the retry motion for a failed outbound message.

import MessageRetryController from '@/actions/App/Http/Controllers/Tickets/MessageRetryController';

await fetch(
    MessageRetryController.url({ ticket: present.ulid, message: message.ulid }),
    { technique: 'POST' },
);

Similar deal. The URL is type-safe, the parameters are checked, and renaming the controller in PHP breaks the TypeScript construct quite than manufacturing.

To make all of this work, we hook Wayfinder into Vite. This is the related little bit of our vite.config.js.

import { wayfinder } from "@laravel/vite-plugin-wayfinder";

export default defineConfig({
    plugins: [
        
        wayfinder(),
    ],
});

The plugin watches your Laravel routes and controllers throughout growth, and regenerates the typed features at any time when one thing adjustments. Imports keep in sync along with your backend with none guide step.

In closing

Wayfinder has shaved an entire class of bug off our work. No extra grep-the-codebase when a route adjustments, no extra “why is that this fetch returning 404”, no extra arguing about trailing slashes. You write the route in Laravel, import it in TypeScript, and the 2 keep trustworthy with one another.

You possibly can learn extra about it in the Wayfinder repo on GitHub. And if you would like to attempt There There your self, we’re in non-public beta proper now and you may apply for early entry at there-there.app.