Laravel Precognitionを試してみた - もがき系プログラマの日常

はじめに

こんばんは。

今回は Laravel Precognitionを試してみました。

readouble.com

試してみたいと思っててなかなか試せずいました。

本題

基本ドキュメントどおりに進めていきます。

自分がやっていたプロジェクトでは vue + inertiaをつかってたので、まずnpmでライブラリをインストールします。

コマンド

$ npm install laravel-precognition-vue-inertia

バックエンド側では HandlePrecognitiveRequests を使えるように対応します。

route.php

use App\Http\Controllers\UserStoreAction;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;

Route::post('/users', UserStoreAction::class)
  ->middleware([HandlePrecognitiveRequests::class]);

対象のコントローラはシンプルにバリデートが通ったやつを保存するだけです。

UserStoreAction.php

<?php

namespace App\Http\Controllers;

use App\Http\Requests\UserStoreRequest;

class UserStoreAction
{
    public function __invoke(UserStoreRequest $request)
    {
       $validatedRequest = $request->validated();
       User::create($validatedRequest);
    }
}

フォームリクエストはドキュメントの中身とほぼおんなじです。

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rules\Password;

class UserStoreRequest extends FormRequest
{
    protected function rules()
    {
        return [
            'password' => [
                'required',
                Password::min(8)
            ],
        ];
    }
}

sample.vue

<script setup>
import { useForm } from 'laravel-precognition-vue-inertia';

const form = useForm('post', '/users', {
    password: '',
});

const submit = () => form.submit({
    onSuccess: () => form.reset(),
});
</script>
<template>
    <form @submit.prevent="submit">
        <label for="email">Password</label>
        <input
            id="password"
            type="password"
            v-model="form.password"
            @change="form.validate('password')"
        />
        <div v-if="form.invalid('password')">
            {{ form.errors.password }}
        </div>

        <button :disabled="form.processing">
            Create User
        </button>
    </form>
</template>

こんな感じでスクリプトは useFormを使うだけ。

あとはフォームのchangeイベントで form.validate() を使います。

これでリアルタイムバリデーションが再現できます。

ただ、だいぶ手前とはいえ、当然ながらバックエンドにバリデーション毎にリクエストが飛んでしまいます。

そこが懸念といえば懸念ですね..