Inertia and Starter Kits

<?php
// app/Http/Controllers/BookController.php
namespace App\Http\Controllers;

use App\Models\Book;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;

class BookController extends Controller
{
    public function index(Request $request): Response
    {
        $search = $request->string('search')->toString();

        return Inertia::render('books/index', [
            'filters' => ['search' => $search],
            'books' => fn () => Book::query()                              // evaluated only when requested
                ->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%"))
                ->orderBy('title')
                ->get(['id', 'title', 'author', 'published_year']),
            'stats' => Inertia::defer(fn () => [                           // fetched after the first render
                'books' => Book::count(),
                'newest' => Book::max('published_year'),
            ]),
        ]);
    }

    public function store(Request $request): RedirectResponse
    {
        $data = $request->validate([
            'title' => ['required', 'string', 'max:200'],
            'author' => ['required', 'string', 'max:120'],
            'published_year' => ['nullable', 'integer', 'between:1450,'.now()->year],
        ]);

        Book::create($data);

        Inertia::flash('toast', ['type' => 'success', 'message' => 'Book added.']);

        return to_route('books.index');
    }
}

$ curl -s localhost:8010/books | grep -o '<script data-page="app" type="application/json">.*</script>'
<script data-page="app" type="application/json">{"component":"books\/index","props":{"errors":{},"name":"Laravel","auth":{"user":null},
 "sidebarOpen":true,"currentTeam":null,"teams":[],"filters":{"search":""},"books":[{"id":1,"title":"Kindred",…},…]},"url":"\/books",
 "version":"f88c…","sharedProps":["errors","name","auth","sidebarOpen","currentTeam","teams"],"deferredProps":{"default":["stats"]}}</script>

$ curl -s -H 'X-Inertia: true' -H 'X-Inertia-Version: f88c…' -H 'X-Inertia-Partial-Component: books/index' -H 'X-Inertia-Partial-Data: stats' localhost:8010/books
{"component":"books\/index","props":{"errors":{},"stats":{"books":3,"newest":1993}},"url":"\/books","version":"f88c…",…}

$ curl -s -H 'X-Inertia: true' -H 'X-Inertia-Version: f88c…' -H 'X-Inertia-Partial-Component: books/index' -H 'X-Inertia-Partial-Data: books,filters' 'localhost:8010/books?search=kin'
{"component":"books\/index","props":{"errors":{},"filters":{"search":"kin"},"books":[{"id":1,"title":"Kindred","author":"Octavia E. Butler","published_year":1979}]},…}

$ curl -s -D - -o /dev/null -H 'X-Inertia: true' -H 'X-Inertia-Version: old' localhost:8010/books | grep -iE '^HTTP|^x-inertia'
HTTP/1.1 409 Conflict
X-Inertia-Location: http://localhost:8010/books
X-Inertia-Version: f88c…

<?php
// app/Http/Middleware/HandleInertiaRequests.php (excerpt, as generated by the teams starter kit)
use Illuminate\Http\Request;

function share(Request $request): array
{
    $user = $request->user();

    return [
        ...parent::share($request),
        'name' => config('app.name'),
        'auth' => [
            'user' => $user,
        ],
        'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
        'currentTeam' => fn () => $user?->currentTeam ? $user->toUserTeam($user->currentTeam) : null,
        'teams' => fn () => $user?->toUserTeams(includeCurrent: true) ?? [],
    ];
}

// resources/js/pages/books/index.tsx
import { Deferred, Head, router, useForm } from '@inertiajs/react';
import { store } from '@/actions/App/Http/Controllers/BookController';

type Book = { id: number; title: string; author: string; published_year: number | null };

type Props = {
    filters: { search: string };
    books: Book[];
    stats?: { books: number; newest: number | null };
};

export default function BooksIndex({ filters, books, stats }: Props) {
    const form = useForm({ title: '', author: '', published_year: '' });

    function search(value: string) {
        // a partial reload: same page component, only the books prop is re-evaluated
        router.reload({ data: { search: value }, only: ['books', 'filters'] });
    }

    function submit(e: React.FormEvent) {
        e.preventDefault();
        form.submit(store(), { preserveScroll: true, onSuccess: () => form.reset() });
    }

    return (
        <>
            <Head title="Books" />
            <div className="space-y-6 p-4">
                <Deferred data="stats" fallback={<p>Counting…</p>}>
                    <p>{stats?.books} books, newest from {stats?.newest}</p>
                </Deferred>
                <input type="search" defaultValue={filters.search} onChange={(e) => search(e.target.value)} placeholder="Search titles" />
                <ul>
                    {books.map((book) => (<li key={book.id}>{book.title} · {book.author}</li>))}
                </ul>
                <form onSubmit={submit} className="grid max-w-sm gap-2">
                    <input value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} placeholder="Title" />
                    {form.errors.title && <p className="text-red-600">{form.errors.title}</p>}
                    <input value={form.data.author} onChange={(e) => form.setData('author', e.target.value)} placeholder="Author" />
                    {form.errors.author && <p className="text-red-600">{form.errors.author}</p>}
                    <button type="submit" disabled={form.processing}>Add book</button>
                </form>
            </div>
        </>
    );
}

<div data-server-rendered="true" id="app"><div class="space-y-6 p-4"><p>Counting…</p><input type="search" placeholder="Search titles" value=""/><ul><li>Kindred<!-- --> · <!-- -->Octavia E. Butler</li><li>Parable of the Sower<!-- --> · <!-- -->Octavia E. Butler</li><li>The Dispossessed<!-- --> · <!-- -->Ursula K. Le Guin</li></ul>…

<?php
// tests/Feature/BooksTest.php (the cloned kit uses PHPUnit classes; laravel new --pest installs Pest instead)
namespace Tests\Feature;

use App\Models\Book;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Inertia\Testing\AssertableInertia as Assert;
use Tests\TestCase;

class BooksTest extends TestCase
{
    use RefreshDatabase;

    public function test_it_renders_lazy_and_deferred_props(): void
    {
        Book::factory()->create(['title' => 'Kindred']);
        Book::factory()->create(['title' => 'Dawn']);

        $this->get('/books?search=kin')
            ->assertInertia(fn (Assert $page) => $page
                ->component('books/index')
                ->where('filters.search', 'kin')
                ->has('books', 1)
                ->where('books.0.title', 'Kindred')
                ->missing('stats')                               // deferred: not in the first response
                ->loadDeferredProps(fn (Assert $reload) => $reload
                    ->where('stats.books', 2)));
    }

    public function test_it_redirects_back_with_errors(): void
    {
        $this->from('/books')
            ->post('/books', ['title' => '', 'author' => 'Anon'])
            ->assertRedirect('/books')
            ->assertSessionHasErrors('title');
    }

    public function test_it_stores_a_book_and_flashes_a_toast(): void
    {
        $this->post('/books', ['title' => 'Dawn', 'author' => 'Octavia E. Butler', 'published_year' => 1987])
            ->assertRedirect('/books')
            ->assertInertiaFlash('toast.message', 'Book added.');

        $this->assertDatabaseHas('books', ['title' => 'Dawn']);
    }
}

$ php artisan test --filter=BooksTest
   PASS  Tests\Feature\BooksTest
  ✓ it renders lazy and deferred props                                   0.19s
  ✓ it redirects back with errors                                        0.02s
  ✓ it stores a book and flashes a toast                                 0.01s

  Tests:    3 passed (35 assertions)
  Duration: 0.32s