Laravel Wayfinder: Route Laravel Jadi Fungsi TypeScript yang Type-Safe untuk React

Laravel Wayfinder menghasilkan fungsi TypeScript bertipe untuk setiap route dan controller di aplikasi Laravel, sehingga frontend React tidak perlu lagi menulis URL backend secara manual. Tim Spatie memakainya untuk membangun There There, helpdesk baru mereka yang dibuat dengan Laravel dan Inertia. Hasilnya, satu kategori bug hilang dari pekerjaan mereka.

Masalah URL hardcoded di React

Codebase React cepat sekali penuh dengan string URL. Setiap fetch, form action, dan link menunjuk ke route lewat template literal. Begitu route di Laravel diganti namanya atau mendapat parameter wajib baru, tidak ada yang error saat kompilasi. Masalahnya baru ketahuan di production, atau saat rekan setim mengklik tombol yang salah.

Cara kerja Laravel Wayfinder

Wayfinder membuat satu fungsi untuk setiap named route. Kamu tinggal meng-import fungsinya, lalu memanggil .url() untuk membentuk URL. Di There There, contohnya ada pada toggle keanggotaan tim: fungsi add dan remove di-import dari path routes untuk members, lalu dipanggil dengan parameter team dan user.

Tim Spatie menyoroti dua keuntungan utama:

• Parameter dicek tipenya. Kalau parameter route user diganti menjadi member, TypeScript langsung menandai setiap pemanggilnya.
• Nama route terpetakan rapi ke path import. Mencarinya cukup lewat autocomplete.

Wayfinder juga membuat fungsi bertipe untuk setiap controller. Spatie memakainya saat memanggil endpoint lewat fetch biasa, di luar Inertia visit. Contohnya aksi retry untuk pesan keluar yang gagal terkirim: MessageRetryController.url() dipanggil dengan parameter ticket dan message, lalu dikirim dengan method POST. URL-nya type-safe dan parameternya dicek. Kalau nama controller di PHP diganti, yang gagal adalah build TypeScript, bukan production.

Integrasi dengan Vite

Untuk menjalankannya, Wayfinder dipasang sebagai plugin Vite. Kamu mengimpor wayfinder dari @laravel/vite-plugin-wayfinder, lalu menambahkan wayfinder() ke daftar plugins di vite.config.js. Selama development, plugin ini memantau route dan controller Laravel dan membuat ulang fungsi bertipenya setiap ada perubahan. Import tetap sinkron dengan backend tanpa langkah manual.

Menurut tim Spatie, tidak ada lagi acara grep seluruh codebase saat route berubah, tidak ada lagi pertanyaan kenapa sebuah fetch mengembalikan 404, dan tidak ada lagi debat soal trailing slash. Route ditulis di Laravel, di-import di TypeScript, dan keduanya saling menjaga konsistensi. Detail lengkapnya ada di repo Wayfinder di GitHub.

Buat kamu yang membangun aplikasi dengan Laravel dan React atau Inertia, Wayfinder layak dicoba, terutama kalau proyekmu sering berganti struktur route. There There sendiri masih dalam private beta, dan pendaftaran early access dibuka di there-there.app.