Optimistic updates and useHttp in Inertia 3 with Vue: a like button and a live search

Schema::create('post_likes', function (Blueprint $table) {
    $table->foreignId('post_id')->constrained()->cascadeOnDelete();
    $table->foreignId('user_id')->constrained()->cascadeOnDelete();
    $table->timestamps();
    $table->primary(['post_id', 'user_id']);
});

public function likes(): BelongsToMany
{
    return $this->belongsToMany(User::class, 'post_likes')->withTimestamps();
}

public function index(Request $request): Response
{
    return Inertia::render('posts/Index', [
        'posts' => Post::query()
            ->withCount('likes')
            ->withExists(['likes as liked' => fn ($q) => $q->whereKey($request->user()->id)])
            ->latest()
            ->limit(20)
            ->get(['id', 'title', 'excerpt']),
    ]);
}

public function store(Request $request, Post $post): RedirectResponse
{
    $post->likes()->syncWithoutDetaching([$request->user()->id]);

    return back();
}

public function destroy(Request $request, Post $post): RedirectResponse
{
    $post->likes()->detach($request->user()->id);

    return back();
}

public function __invoke(Request $request): JsonResponse
{
    $validated = $request->validate([
        'q' => ['required', 'string', 'min:2', 'max:100'],
    ]);

    return response()->json(
        Post::query()
            ->where('title', 'like', '%'.$validated['q'].'%')
            ->orderBy('title')
            ->limit(8)
            ->get(['id', 'title'])
    );
}

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('posts', [PostController::class, 'index'])->name('posts.index');
    Route::get('posts/search', PostSearchController::class)->name('posts.search');
    Route::post('posts/{post}/like', [PostLikeController::class, 'store'])->name('posts.like');
    Route::delete('posts/{post}/like', [PostLikeController::class, 'destroy'])->name('posts.unlike');
});

export interface Post {
    id: number
    title: string
    excerpt: string
    likes_count: number
    liked: boolean
}

<script setup lang="ts">
import { router } from '@inertiajs/vue3'
import type { Post } from '@/types/post'

const props = defineProps<{ post: Post }>()

function toggleLike() {
    const liked = props.post.liked

    router
        .optimistic<{ posts: Post[] }>((pageProps) => ({
            posts: pageProps.posts.map((p) =>
                p.id === props.post.id
                    ? { ...p, liked: !liked, likes_count: p.likes_count + (liked ? -1 : 1) }
                    : p,
            ),
        }))
        [liked ? 'delete' : 'post'](`/posts/${props.post.id}/like`, {
            preserveScroll: true,
            only: ['posts'],
        })
}
</script>

<template>
    <button type="button" :aria-pressed="post.liked" @click="toggleLike">
        <span aria-hidden="true">{{ post.liked ? '♥' : '♡' }}</span>
        {{ post.likes_count }}
        <span class="sr-only">{{ post.liked ? 'Unlike' : 'Like' }}</span>
    </button>
</template>

router.optimistic(/* … */).post(url, {
    preserveScroll: true,
    onHttpException: () => {
        toast.error('Could not save your like. Please try again.')
        return false // stay on the page, no error screen
    },
})

<script setup lang="ts">
import { useHttp } from '@inertiajs/vue3'
import { ref } from 'vue'

interface Result {
    id: number
    title: string
}

const search = useHttp<{ q: string }, Result[]>({ q: '' })
const results = ref<Result[]>([])
let timer: ReturnType<typeof setTimeout> | undefined

function onInput() {
    clearTimeout(timer)
    search.cancel() // drop the request for the previous keystroke

    if (search.q.trim().length < 2) {
        results.value = []
        return
    }

    timer = setTimeout(async () => {
        try {
            results.value = (await search.get('/posts/search')) ?? []
        } catch {
            // Cancelled by a newer keystroke, or a network/server error:
            // keep the previous results on screen.
        }
    }, 250)
}
</script>

<template>
    <label for="post-search" class="sr-only">Search posts</label>
    <input id="post-search" v-model="search.q" type="search" placeholder="Search posts…" @input="onInput" />

    <p v-if="search.errors.q">{{ search.errors.q }}</p>
    <p v-if="search.processing">Searching…</p>
    <ul v-else-if="results.length">
        <li v-for="r in results" :key="r.id">{{ r.title }}</li>
    </ul>
</template>

// route: POST posts/{post}/like/toggle
public function toggle(Request $request, Post $post): JsonResponse
{
    $post->likes()->toggle([$request->user()->id]);

    return response()->json([
        'liked' => $post->likes()->whereKey($request->user()->id)->exists(),
        'likes_count' => $post->likes()->count(),
    ]);
}

<script setup lang="ts">
import { useHttp } from '@inertiajs/vue3'
import type { Post } from '@/types/post'

type LikeState = { liked: boolean; likes_count: number }

const props = defineProps<{ post: Post }>()
const like = useHttp<LikeState, LikeState>({
    liked: props.post.liked,
    likes_count: props.post.likes_count,
})

async function toggle() {
    try {
        const server = await like
            .optimistic((data) => ({
                liked: !data.liked,
                likes_count: data.likes_count + (data.liked ? -1 : 1),
            }))
            .post(`/posts/${props.post.id}/like/toggle`)

        Object.assign(like, server) // trust the server's numbers
    } catch {
        // already rolled back for us
    }
}
</script>

<template>
    <button type="button" :aria-pressed="like.liked" @click="toggle">
        <span aria-hidden="true">{{ like.liked ? '♥' : '♡' }}</span> {{ like.likes_count }}
    </button>
</template>

use App\Models\Post;
use App\Models\User;

it('likes and unlikes a post', function () {
    $user = User::factory()->create();
    $post = Post::factory()->create();

    $this->actingAs($user)->from('/posts')
        ->post("/posts/{$post->id}/like")
        ->assertRedirect('/posts');

    $this->actingAs($user)->get('/posts')
        ->assertInertia(fn ($page) => $page
            ->component('posts/Index')
            ->where('posts.0.liked', true)
            ->where('posts.0.likes_count', 1)
        );

    $this->actingAs($user)->delete("/posts/{$post->id}/like");

    expect($post->likes()->count())->toBe(0);
});

it('searches posts by title as JSON', function () {
    Post::factory()->create(['title' => 'Optimistic updates in Inertia 3']);
    Post::factory()->create(['title' => 'Queues in Laravel']);

    $this->actingAs(User::factory()->create())
        ->getJson('/posts/search?q=inertia')
        ->assertOk()
        ->assertJsonCount(1)
        ->assertJsonPath('0.title', 'Optimistic updates in Inertia 3');
});

it('validates the search term', function () {
    $this->actingAs(User::factory()->create())
        ->getJson('/posts/search?q=a')
        ->assertUnprocessable()
        ->assertJsonValidationErrors('q');
});