Single-page apps with Inertia 3

inertia-probe/app/Http/Controllers/FeeController.php

<?php

namespace App\Http\Controllers;

use App\Models\Instalment;
use App\Models\Student;
use Illuminate\Support\Facades\Gate;
use Inertia\Inertia;
use Inertia\Response;

class FeeController extends Controller
{
    // The fee page of one student, for that student's guardian: a Laravel route, policy and queries, as for any page.
    public function show(Student $student): Response
    {
        Gate::authorize('view', $student);

        return Inertia::render('Fees/Show', [
            // Only the fields the page draws: the staff notes never leave the server.
            'student' => $student->only('id', 'name', 'course'),

            // A closure runs only when the response includes this prop.
            'instalments' => fn () => $student->instalments()
                ->where('course', $student->course)
                ->get()
                ->map(fn (Instalment $i) => $i->only('id', 'label', 'amount_paise', 'receipt_no')),

            // Left out of the first response; the page asks for it in a second request once it has drawn.
            'reminders' => Inertia::defer(fn () => $student->reminders()->get()->map->only('channel', 'message')),

            // Sent only when the page asks for it by name, after a click on "Earlier courses".
            'earlierCourses' => Inertia::optional(fn () => $student->instalments()
                ->where('course', '!=', $student->course)
                ->get()
                ->map(fn (Instalment $i) => $i->only('course', 'label', 'amount_paise', 'receipt_no'))),
        ]);
    }
}

pages/Fees/Show.tsx · inertia-probe/resources/js/pages/Fees/Show.tsx

import { Deferred, Head, Link, router } from '@inertiajs/react';
import { edit } from '@/actions/App/Http/Controllers/ContactController';

type Instalment = { id: number; label: string; amount_paise: number; receipt_no: string | null };
type EarlierInstalment = Omit<Instalment, 'id'> & { course: string };

type Props = {
    student: { id: number; name: string; course: string };
    instalments: Instalment[];
    reminders?: { channel: string; message: string }[]; // deferred: arrives after the first paint
    earlierCourses?: EarlierInstalment[]; // optional: arrives only when asked for
};

const rupees = (paise: number) =>
    new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(paise / 100);

export default function Show({ student, instalments, reminders, earlierCourses }: Props) {
    return (
        <main>
            <Head title={`Fees of ${student.name}`} />
            <h1>Fees of {student.name}</h1>
            <table>
                <caption>{student.course}</caption>
                <thead>
                    <tr>
                        <th scope="col">Instalment</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {instalments.map((i) => (
                        <tr key={i.id}>
                            <th scope="row">{i.label}</th>
                            <td>{rupees(i.amount_paise)}</td>
                            <td>{i.receipt_no ? `Paid, receipt ${i.receipt_no}` : 'Due'}</td>
                        </tr>
                    ))}
                </tbody>
            </table>

            <h2>Reminders sent</h2>
            <Deferred data="reminders" fallback={<p>Loading reminders…</p>}>
                <ul>
                    {reminders?.map((r, n) => (
                        <li key={n}>
                            {r.channel}: {r.message}
                        </li>
                    ))}
                </ul>
            </Deferred>

            <h2>Earlier courses</h2>
            {earlierCourses ? (
                <ul>
                    {earlierCourses.map((i, n) => (
                        <li key={n}>
                            {i.course}, {i.label}: {rupees(i.amount_paise)}
                        </li>
                    ))}
                </ul>
            ) : (
                <button type="button" onClick={() => router.reload({ only: ['earlierCourses'] })}>
                    Show earlier courses
                </button>
            )}

            <p>
                <Link href={edit()}>Update your contact number</Link>
            </p>
        </main>
    );
}

routes/web.php · inertia-probe/routes/web.php

<?php

use App\Http\Controllers\ContactController;
use App\Http\Controllers\FeeController;
use App\Http\Controllers\Lab\LabFeeController;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

// Pathshala's guardian pages: Laravel routes, middleware and controllers, with React drawing each page.
Route::middleware('auth')->group(function () {
    Route::get('/students/{student}/fees', [FeeController::class, 'show'])->name('fees.show');
    Route::get('/guardian/contact', [ContactController::class, 'edit'])->name('contact.edit');
    Route::put('/guardian/contact', [ContactController::class, 'update'])->name('contact.update');

    // The lab's weak copy (folder props-lab) exists only in sessions that copy that folder in.
    if (class_exists(LabFeeController::class)) {
        Route::get('/lab/students/{student}/fees', [LabFeeController::class, 'show']);
    }
});

views/app.blade.php · inertia-probe/resources/views/app.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {{-- The app's entry and the chunk of the page being visited, so the browser fetches both at once. --}}
        @vite(['resources/js/app.tsx', "resources/js/pages/{$page['component']}.tsx"])
        <x-inertia::head>
            <title>Pathshala</title>
        </x-inertia::head>
    </head>
    <body>
        <x-inertia::app />
    </body>
</html>

js/app.tsx · inertia-probe/resources/js/app.tsx

import { createInertiaApp } from '@inertiajs/react';

// @inertiajs/vite finds the page components in resources/js/pages and mounts the app on <div id="app">.
void createInertiaApp({
    title: (title) => (title ? `${title} - Pathshala` : 'Pathshala'),
    strictMode: true,
});

inertia-probe/app/Http/Middleware/HandleInertiaRequests.php

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

// Made by `php artisan inertia:middleware`, then edited: every page gets the signed-in user's id and name, and nothing
// else of the user row.
class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';

    public function version(Request $request): ?string
    {
        return parent::version($request);
    }

    public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            'auth' => [
                'user' => fn () => $request->user()?->only('id', 'name'),
            ],
        ];
    }
}

bootstrap/app.php · inertia-probe/bootstrap/app.php

<?php

use App\Http\Middleware\HandleInertiaRequests;
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use Illuminate\Http\Request;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        // Inertia's middleware runs on every web route, after the session and CSRF middleware of the group.
        $middleware->web(append: [
            HandleInertiaRequests::class,
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        $exceptions->shouldRenderJsonWhen(
            fn (Request $request) => $request->is('api/*') || $request->expectsJson(),
        );
    })->create();

inertia-probe/vite.config.js

import inertia from '@inertiajs/vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.tsx'],
            refresh: true,
        }),
        inertia(),
        react(),
    ],
    build: {
        rolldownOptions: {
            // No warning about how long plugins took: its numbers change from one build to the next.
            checks: { bundlerTimings: false },
        },
    },
});

inertia-probe/browser.php

<?php

// Plays one browser tab with Inertia's client in it, through Laravel's HTTP kernel (as public/index.php does for a web
// server), signed in as the guardian whose email comes first:
//   php browser.php <email> [--tab=<file>] [--brief] [--find=<text>] '<step>' ['<step>' ...]
// Steps:
//   GET <path>            a full page load (typing the address): Laravel answers with the HTML document
//   VISIT <path>          an Inertia visit (a <Link> click): X-Inertia and the tab's asset version
//   RELOAD <prop,...>     a partial reload of the page on screen that asks for those props only
//   PUT <path> <json>     a <Form> submit: the XSRF-TOKEN cookie's value goes in the X-XSRF-TOKEN header
//   PUT! <path> <json>    the same request without that header
// Redirects are followed the way the browser follows them for Inertia's request: same headers, method GET.
// --tab=<file> keeps the tab's cookies and page between runs, as a tab left open during a deploy keeps them.
// Each response prints its status, its Inertia headers, the tables the request read or wrote and the page object
// (--brief: only the names of its props); --find=<text> says whether the body holds that text.
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

require __DIR__.'/vendor/autoload.php';
$app = require __DIR__.'/bootstrap/app.php';
$kernel = $app->make(Illuminate\Contracts\Http\Kernel::class);
$kernel->bootstrap();

$args = array_slice($argv, 1);
$email = array_shift($args);
$tabFile = null;
$brief = false;
$find = null;
while (str_starts_with($args[0] ?? '', '--')) {
    $option = array_shift($args);
    if (str_starts_with($option, '--tab=')) {
        $tabFile = substr($option, 6);
    } elseif ($option === '--brief') {
        $brief = true;
    } elseif (str_starts_with($option, '--find=')) {
        $find = substr($option, 7);
    }
}
$tab = $tabFile && is_file($tabFile) ? json_decode(file_get_contents($tabFile), true) : ['cookies' => [], 'page' => null];

$tables = [];
DB::listen(function ($query) use (&$tables) {
    if (preg_match('/^select\b.*?\bfrom\s+"(\w+)"/is', $query->sql, $m)) {
        $table = $m[1];
    } elseif (preg_match('/^(insert into|update|delete from)\s+"(\w+)"/i', $query->sql, $m)) {
        $table = strtok(strtolower($m[1]), ' ').' '.$m[2];
    } else {
        return;
    }
    if (! str_ends_with($table, 'sessions')) { // the session store's own reads and writes are left out
        $tables[] = $table;
    }
});

$first = true;
$send = function (string $method, string $path, array $headers, ?string $body) use ($app, $kernel, $email, &$tab, &$tables, &$first) {
    $server = [];
    foreach ($headers as $name => $value) {
        $server['HTTP_'.strtoupper(str_replace('-', '_', $name))] = $value;
    }
    if ($body !== null) {
        $server['CONTENT_TYPE'] = 'application/json';
    }
    $request = Request::create('https://pathshala.example'.$path, $method, [], $tab['cookies'], [], $server, $body);
    $app->instance('request', $request);
    if ($first) {
        Auth::setUser(User::where('email', $email)->firstOrFail()); // signed in, as after a login
        $first = false;
    }
    $tables = [];
    $response = $kernel->handle($request);
    foreach ($response->headers->getCookies() as $cookie) {
        $tab['cookies'][$cookie->getName()] = $cookie->getValue();
    }
    $kernel->terminate($request, $response);

    return $response;
};

$lastJson = null;
$show = function (string $label, $response) use (&$tab, &$tables, &$lastJson, $brief, $find) {
    $status = $response->getStatusCode();
    $content = (string) $response->getContent();
    $line = "{$label} -> HTTP {$status}";
    foreach (['Content-Type', 'X-Inertia', 'Vary', 'Location', 'X-Inertia-Location', 'X-Inertia-Version'] as $h) {
        if ($response->headers->has($h)) {
            $line .= ", {$h}: ".$response->headers->get($h);
        }
    }
    echo $line."\n  body ".number_format(strlen($content)).' bytes; tables read or written: '.($tables ? implode(', ', $tables) : 'none')."\n";
    if ($find !== null) {
        echo "  \"{$find}\" in the body: ".(str_contains($content, $find) ? 'yes' : 'no')."\n";
    }

    $json = null;
    if (str_starts_with((string) $response->headers->get('Content-Type'), 'text/html')) {
        // Every <script> and <link> of the document that loads a file: Vite's preloads, entry scripts and styles.
        preg_match_all('~<(script|link)\b([^>]*)>~', $content, $tags, PREG_SET_ORDER);
        foreach ($tags as [, $tag, $attrs]) {
            if (preg_match('~\b(?:src|href)="([^"]+)"~', $attrs, $url) && preg_match('~\b(?:rel|type)="[^"]+"~', $attrs, $kind)) {
                echo "  <{$tag} {$kind[0]}> ".preg_replace('~^https://pathshala\.example~', '', $url[1])."\n";
            }
        }
        if (preg_match('~<script data-page="app" type="application/json">(.*?)</script>\s*<div id="app"></div>~s', $content, $m)) {
            echo '  page object in <script data-page="app" type="application/json">, '.strlen($m[1])." bytes, then <div id=\"app\"></div>\n";
            $json = $m[1];
        }
    } elseif ($response->headers->get('X-Inertia') === 'true') {
        echo "  page object: the whole body\n";
        $json = $content;
    }
    if ($json === null) {
        return;
    }
    $tab['page'] = json_decode($json, true);
    $page = json_decode($json); // objects stay objects, so an empty {} prints as {}
    if ($brief) {
        echo '  props: '.implode(', ', array_keys((array) $page->props))."\n";
        foreach (['deferredProps', 'flash'] as $key) {
            if (isset($page->{$key})) {
                echo "  {$key}: ".json_encode($page->{$key}, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)."\n";
            }
        }
        if ((array) $page->props->errors) {
            echo '  errors: '.json_encode($page->props->errors, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)."\n";
        }
        echo "  version: {$page->version}\n";
    } elseif ($json === $lastJson) {
        echo "  (the same page object as above, byte for byte)\n";
    } else {
        echo preg_replace('/^/m', '    ', json_encode($page, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE))."\n";
    }
    $lastJson = $json;
};

$inertiaHeaders = function () use (&$tab) {
    $headers = [
        'Accept' => 'text/html, application/xhtml+xml',
        'X-Requested-With' => 'XMLHttpRequest',
        'X-Inertia' => 'true',
        'X-Inertia-Version' => $tab['page']['version'] ?? '',
    ];
    if (isset($tab['page']['url'])) {
        $headers['Referer'] = 'https://pathshala.example'.$tab['page']['url']; // the page on screen, as browsers send it
    }

    return $headers;
};

foreach ($args as $step) {
    [$verb, $rest] = explode(' ', $step, 2) + [1 => ''];
    if ($verb === 'GET') {
        $show("GET {$rest}", $send('GET', $rest, ['Accept' => 'text/html,application/xhtml+xml'], null));
        continue;
    }
    if ($verb === 'VISIT') {
        $headers = $inertiaHeaders();
        $show("VISIT {$rest} (X-Inertia-Version: ".($headers['X-Inertia-Version'] ?: 'empty').')', $send('GET', $rest, $headers, null));
        continue;
    }
    if ($verb === 'RELOAD') {
        $headers = $inertiaHeaders() + [
            'X-Inertia-Partial-Component' => $tab['page']['component'],
            'X-Inertia-Partial-Data' => $rest,
        ];
        $show("RELOAD {$tab['page']['url']} (X-Inertia-Partial-Data: {$rest})", $send('GET', $tab['page']['url'], $headers, null));
        continue;
    }
    // PUT or PUT!: a form submit, then the redirect it answers with, followed as GET.
    [$path, $body] = explode(' ', $rest, 2);
    $headers = $inertiaHeaders();
    if ($verb === 'PUT') {
        $headers['X-XSRF-TOKEN'] = $tab['cookies']['XSRF-TOKEN'] ?? '';
    }
    $label = "{$verb} {$path} {$body}".($verb === 'PUT' ? ' (X-XSRF-TOKEN from the cookie)' : ' (no X-XSRF-TOKEN)');
    $response = $send('PUT', $path, $headers, $body);
    $show($label, $response);
    while ($response->isRedirection()) {
        $next = parse_url($response->headers->get('Location'), PHP_URL_PATH);
        $response = $send('GET', $next, $inertiaHeaders(), null);
        $show("  followed: GET {$next}", $response);
    }
}

if ($tabFile) {
    file_put_contents($tabFile, json_encode($tab));
}

inertia-probe/database/seeders/FeeSeeder.php

<?php

namespace Database\Seeders;

use App\Models\Instalment;
use App\Models\Reminder;
use App\Models\Student;
use App\Models\User;
use Illuminate\Database\Seeder;

// Two fictional guardians, a student each, and the student's instalments and reminders.
class FeeSeeder extends Seeder
{
    public function run(): void
    {
        $sunita = User::create(['name' => 'Sunita Rao', 'email' => 'sunita@pathshala.example', 'password' => 'unused', 'phone' => '9876543210']);
        $ravi = User::create(['name' => 'Ravi Menon', 'email' => 'ravi@pathshala.example', 'password' => 'unused']);

        $aarav = Student::create([
            'guardian_id' => $sunita->id,
            'name' => 'Aarav Rao',
            'course' => 'Python, evening batch',
            'staff_note' => 'Sibling discount in place; fees often late, phone the guardian first',
        ]);
        Student::create(['guardian_id' => $ravi->id, 'name' => 'Kabir Menon', 'course' => 'Spoken English, Saturday']);

        foreach ([['Term 1', 'PSL-2041'], ['Term 2', null], ['Term 3', null]] as [$label, $receipt]) {
            Instalment::create([
                'student_id' => $aarav->id, 'course' => 'Python, evening batch', 'label' => $label,
                'amount_paise' => 850000, 'receipt_no' => $receipt,
                'staff_note' => $label === 'Term 2' ? 'Promised to pay in cash at the front desk' : null,
            ]);
        }
        Instalment::create([
            'student_id' => $aarav->id, 'course' => 'Spoken English, Saturday', 'label' => 'Full course',
            'amount_paise' => 600000, 'receipt_no' => 'PSL-1877',
        ]);

        Reminder::create(['student_id' => $aarav->id, 'channel' => 'sms', 'message' => 'Term 2 fee of Rs 8,500 is due.']);
        Reminder::create(['student_id' => $aarav->id, 'channel' => 'email', 'message' => 'Term 2 fee of Rs 8,500 is due.']);
    }
}

the migration · inertia-probe/database/migrations/0001_01_01_000003_create_fee_tables.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

// Pathshala's fee records: a guardian (a user) has students, a student has instalments and gets fee reminders.
// The two staff_note columns are for the centre's staff only: a guardian's page must never carry them.
return new class extends Migration
{
    public function up(): void
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('phone', 10)->nullable();
        });

        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->foreignId('guardian_id')->constrained('users');
            $table->string('name');
            $table->string('course');
            $table->text('staff_note')->nullable();
        });

        Schema::create('instalments', function (Blueprint $table) {
            $table->id();
            $table->foreignId('student_id')->constrained();
            $table->string('course');
            $table->string('label');
            $table->unsignedInteger('amount_paise');
            $table->string('receipt_no')->nullable(); // set when the instalment is paid
            $table->text('staff_note')->nullable();
        });

        Schema::create('reminders', function (Blueprint $table) {
            $table->id();
            $table->foreignId('student_id')->constrained();
            $table->string('channel');
            $table->string('message');
        });
    }
};

LAB: LabFeeController.php · props-lab/app/Http/Controllers/Lab/LabFeeController.php

<?php

namespace App\Http\Controllers\Lab;

use App\Http\Controllers\Controller;
use App\Models\Student;
use Illuminate\Support\Facades\Gate;
use Inertia\Inertia;
use Inertia\Response;

// LAB ONLY, never ship it: the same page fed with whole models, as a first version often is. The page draws the same
// table, but every column travels to the browser, the two staff notes among them.
class LabFeeController extends Controller
{
    public function show(Student $student): Response
    {
        Gate::authorize('view', $student);

        return Inertia::render('Fees/Show', [
            'student' => $student,
            'instalments' => $student->instalments()->where('course', $student->course)->get(),
        ]);
    }
}

inertia-probe/app/Models/Student.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Attributes\Fillable;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

// A student of Pathshala and the course they are in now; guardian_id is the user who pays the fees.
#[Fillable(['guardian_id', 'name', 'course', 'staff_note'])]
class Student extends Model
{
    public $timestamps = false;

    public function instalments(): HasMany
    {
        return $this->hasMany(Instalment::class);
    }

    public function reminders(): HasMany
    {
        return $this->hasMany(Reminder::class);
    }
}

inertia-probe/app/Policies/StudentPolicy.php

<?php

namespace App\Policies;

use App\Models\Student;
use App\Models\User;

// A guardian sees the fee page of their own students only.
class StudentPolicy
{
    public function view(User $user, Student $student): bool
    {
        return $student->guardian_id === $user->id;
    }
}

inertia-tests/tests/Feature/PropsAllowlistTest.php

<?php

namespace Tests\Feature;

use App\Models\User;
use Database\Seeders\FeeSeeder;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Inertia\Testing\AssertableInertia as Assert;
use PHPUnit\Framework\Attributes\DataProvider;
use Tests\TestCase;

// One check, run on the shipped controller and on the lab's weak copy: the fee page's student and instalment props
// hold exactly the fields the page draws. A closure given to has() fails when its scope holds a field it never named.
class PropsAllowlistTest extends TestCase
{
    use RefreshDatabase;

    public static function pages(): array
    {
        return ['shipped controller' => ['/students/1/fees'], 'lab weak copy' => ['/lab/students/1/fees']];
    }

    #[DataProvider('pages')]
    public function test_fee_page_sends_only_the_fields_it_draws(string $url): void
    {
        $this->seed(FeeSeeder::class);
        $this->withoutVite();

        $this->actingAs(User::where('email', 'sunita@pathshala.example')->firstOrFail())
            ->get($url)
            ->assertInertia(fn (Assert $page) => $page
                ->has('student', fn (Assert $student) => $student->hasAll(['id', 'name', 'course']))
                ->has('instalments.0', fn (Assert $row) => $row->hasAll(['id', 'label', 'amount_paise', 'receipt_no'])));
    }
}

inertia-tests/tests/Feature/FeePageTest.php

<?php

namespace Tests\Feature;

use App\Models\User;
use Database\Seeders\FeeSeeder;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Inertia\Testing\AssertableInertia as Assert;
use Tests\TestCase;

// The fee page and the contact form, tested on the Laravel side: the component, its props, the deferred reload,
// the policy and the error prop. No browser and no build: withoutVite() leaves the root view's @vite tags out.
class FeePageTest extends TestCase
{
    use RefreshDatabase;

    protected function setUp(): void
    {
        parent::setUp();
        $this->seed(FeeSeeder::class);
        $this->withoutVite();
    }

    private function guardian(string $email): User
    {
        return User::where('email', $email)->firstOrFail();
    }

    public function test_fee_page_renders_its_component_and_props(): void
    {
        $this->actingAs($this->guardian('sunita@pathshala.example'))
            ->get('/students/1/fees')
            ->assertOk()
            ->assertInertia(fn (Assert $page) => $page
                ->component('Fees/Show')
                ->where('student.name', 'Aarav Rao')
                ->has('instalments', 3)
                ->missing('reminders')
                ->missing('earlierCourses'));
    }

    public function test_deferred_reminders_arrive_in_the_follow_up_request(): void
    {
        $this->actingAs($this->guardian('sunita@pathshala.example'))
            ->get('/students/1/fees')
            ->assertInertia(fn (Assert $page) => $page
                ->loadDeferredProps(fn (Assert $reload) => $reload->has('reminders', 2)));
    }

    public function test_another_guardians_student_is_forbidden(): void
    {
        $this->actingAs($this->guardian('ravi@pathshala.example'))
            ->get('/students/1/fees')
            ->assertForbidden();
    }

    public function test_a_bad_number_comes_back_as_an_error_prop(): void
    {
        $this->actingAs($this->guardian('sunita@pathshala.example'))
            ->from('/guardian/contact')
            ->put('/guardian/contact', ['phone' => '12345'])
            ->assertRedirect('/guardian/contact');

        $this->get('/guardian/contact')
            ->assertInertia(fn (Assert $page) => $page
                ->component('Contact/Edit')
                ->where('errors.phone', 'Enter a 10-digit mobile number that starts with 6, 7, 8 or 9.'));
    }
}

inertia-probe/app/Http/Controllers/ContactController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;

class ContactController extends Controller
{
    public function edit(Request $request): Response
    {
        return Inertia::render('Contact/Edit', [
            'phone' => $request->user()->phone,
        ]);
    }

    // An ordinary Laravel form handler: validate, save, redirect. A failed rule redirects back with the errors.
    public function update(Request $request): RedirectResponse
    {
        $data = $request->validate([
            'phone' => ['required', 'regex:/^[6-9][0-9]{9}$/'],
        ], [
            'phone.regex' => 'Enter a 10-digit mobile number that starts with 6, 7, 8 or 9.',
        ]);

        $request->user()->update($data);

        Inertia::flash('status', 'Contact number saved.');

        return to_route('contact.edit');
    }
}

pages/Contact/Edit.tsx · inertia-probe/resources/js/pages/Contact/Edit.tsx

import { Form, Head, usePage } from '@inertiajs/react';
import { update } from '@/actions/App/Http/Controllers/ContactController';

export default function Edit({ phone }: { phone: string | null }) {
    const { flash } = usePage();

    return (
        <main>
            <Head title="Contact number" />
            <h1>Contact number</h1>
            <p role="status">{flash.status}</p>

            {/* Wayfinder's update() carries the URL and the method (PUT) of ContactController@update. */}
            <Form action={update()}>
                {({ errors, processing }) => (
                    <>
                        <label htmlFor="phone">Mobile number</label>
                        <input
                            id="phone"
                            name="phone"
                            type="tel"
                            inputMode="numeric"
                            autoComplete="tel-national"
                            defaultValue={phone ?? ''}
                            aria-invalid={errors.phone ? true : undefined}
                            aria-describedby={errors.phone ? 'phone-error' : undefined}
                        />
                        {errors.phone && <p id="phone-error">{errors.phone}</p>}
                        <button type="submit" disabled={processing}>
                            Save
                        </button>
                    </>
                )}
            </Form>
        </main>
    );
}

types/global.d.ts · inertia-probe/resources/js/types/global.d.ts

import '@inertiajs/core';

// The props HandleInertiaRequests shares with every page, and the flash data the controllers send.
declare module '@inertiajs/core' {
    export interface InertiaConfig {
        sharedPageProps: {
            auth: { user: { id: number; name: string } | null };
        };
        flashDataType: {
            status?: string;
        };
    }
}