【Laravel Inertia】wayfinder でらくらくページ遷移（REST-Link編）

Laravel に新しいルート共有ツールが誕生しました！

以前は Ziggy というものが入っていたのですが、スターターキットもこちらに移行したので、これからは WayFinder の時代になってくと思います。

お試しする

では、さっそく試してみます。
以下のようなルートがあるとします。

routes/web.php

Route::get('/test', [TestController::class, 'index'])->name('tests.index');
Route::get('/test/{user}', [TestController::class, 'show'])->name('tests.show');
Route::post('/test', [TestController::class, 'store'])->name('tests.store');

これを作成した後、生成コマンドを打ちます。

$ php artisan wayfinder:generate
 [Wayfinder] Generated actions in /test-inertia/resources/js/actions
 [Wayfinder] Generated routes in /test-inertia/resources/js/routes

すると、二つフォルダとファイル群が生成されます。

使い方

使い方はとても簡単！
js/actions フォルダ内に PHP のコントローラーの namespace と同じ構成でファイルが作られています。
その中にはメソッドと同じ関数が生えています。

それを使うだけです！

<script setup lang="ts">
import { onMounted } from 'vue'
import { index, show, store } from '@/actions/App/Http/Controllers/TestController'

onMounted(() => {
  console.log(index())
  console.log(show(1))
  console.log(store())
})
</script>

それぞれ url と method が入っています。
href などに、この url を入れればいいというわけです！

もう一つ使い方があり、 js/routes に名前付きルートと同じ構成でもファイルが作られています。
これらも同様に利用することが可能です！

<script setup lang="ts">
import { onMounted } from 'vue'
import { index, show, store } from '@/routes/tests'

onMounted(() => {
  console.log(index())
  console.log(show(1))
  console.log(store())
})
</script>

これらはプロジェクト内で混在すると大変なので統一したほうがいいです。
以下のコマンドで生成しない設定をすることができます。

$ php artisan wayfinder:generate --skip-actions
$ php artisan wayfinder:generate --skip-routes

個人的には名前付きルートがおススメですかねぇ...？
複数のコントローラーで同じリソースを操作する可能性もあるので。

QueryParameter の使い方

GET 通信の時に検索などに利用するURLの末尾 ?foo=1&bar=test のことです！
これにもちゃんと対応しています。

このように query にパラメタを書き込むと、、、

onMounted(() => {
  console.log(index({
    query: {
      foo: 1,
      bar: 'test',
    }
  }))
})

URL に自動的に展開されます！便利！

もう一つ mergeQuery というパラメタもあります。
これに書き込むと、、、

onMounted(() => {
  console.log(index({
    mergeQuery: {
      foo: 1,
      bar: 'test',
    }
  }))
})

自身が http://localhost:8000/test?baz=add&foo=2 というURLの時に、そのパラメータと指定したパラメータをマージすることができます！
これはうまく使い分けたいですね。

ちなみに配列形式にも対応していて、

onMounted(() => {
  console.log(index({
    query: {
      baz: ['aaa', 'bbb', 'ccc']
    }
  }))
})

こんな感じで展開されます。
bracket 式ってやつですね。
展開すると /test?baz[]=a&baz[]=b&baz[]=c

なので大概のことには使えそうです。

VILT スタックでの wayfinder

これが神機能なんですよ。
Inertia.js との相性がすさまじくて、様々な記述を簡略化することができます。

<template>
  <div>
    <!-- (1) リンク要素 -->
    <Link :href="show(1)"></Link>

    <!-- (2) フォーム -->
    <Form :action="store()"></Form>
  </div>
</template>

<script setup lang="ts">
import { show, store } from '@/routes/tests'
import { Link, useForm } from '@inertiajs/vue3'

const form = useForm({})

// (3) 手動フォーム
form.submit(store())
</script>

もう URL や METHOD に気を付ける必要はありません！！！

終わりに

ただ唯一対応していないのが Ziggy にはあった現在の URL の名前付きルート名の取得機能です；；
これは自作するしかないのかなぁ...プルリク候補かもしれないです。

新しい Inertia.js のホームページ、めっちゃかっこよくない？？