Оптимистичное обновление в Inertia

Допустим, под записью есть счётчик лайков и кнопка, которую нажимают часто. Ждать ответ сервера перед сменой цифры кажется медленным: человек уже нажал, и интерфейс должен сразу показать новое значение, а Laravel подтвердит или вернёт старое, если запрос не удался.

Перед визитом методом post или другим методом router можно вызвать цепочку optimistic. Колбэк получает текущие пропсы страницы и возвращает частичное обновление: только те ключи, которые нужно подменить. Inertia сразу сливает их с пропсами, компонент перерисовывается, запрос уходит на сервер, а при успехе приходит настоящий ответ. При ошибке затронутые ключи откатываются к прежним значениям.

Давайте отдадим пост со счётчиком и примем лайк:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts/1', function () {
		return Inertia::render('Posts/Show', [
			'post' => ['id' => 1, 'likes' => 3],
		]);
	});

	Route::post('/posts/1/like', function () {
		return back();
	});
?>

Давайте выведем счётчик и увеличим его оптимистично перед отправкой:

<script setup>
	import { router } from '@inertiajs/vue3'

	defineProps({
		post: Object,
	})

	function like() {
		router
			.optimistic((props) => ({
				post: {
					...props.post,
					likes: props.post.likes + 1,
				},
			}))
			.post('/posts/1/like')
	}
</script>

<template>
	<h1>Post</h1>
	<p>Likes: {{ post.likes }}</p>
	<button type="button" @click="like">
		Like
	</button>
</template>

Сделайте страницу работника Mila с пропсом rating и кнопкой оценки, чтобы число на экране росло сразу после нажатия, не дожидаясь ответа сервера.