inertia
inertia copied to clipboard
inertiajs
[V2] Post data on paginated list with Deferred data
Versions:
@inertiajs/vue3version: 2.0.0-beta.1inertiajs/inertia-laravelversion: 2.x-dev
Describe the problem:
I'm using Vue3, Laravel11 and Inertia v2 beta.
I want to create an editable list (with name and year of people) with pagination and stats about all this list (like number of people who have more than 18) . I have a controller that return my list, data about pagination (index, page) and statistics about this list.
When I paginate listing, everything works fine. The list is updated with next page and stats are not updated (because data didn't change)
Case 1 :
I would like to update year of a people in the list. When I update this data with a POST request, the redirect to the index page lost data from pagination (stored in url as query). Stat data is updated (not like Case 2).
In this case, query params for pagination in the url disappear
Case 2 : When I update year of people with POST request the pagination is kept but the deferred data is not updated.
In the network of browser, deferred props are not returned in props object. Only the name of deferred data is visible.
{
deferredProps: { default: ['numberOfAdults'] }
props: { people: [...] }
}
In Vue, the component Deferred display only #fallback template.
In the example, I've used Redirect::back()
Do you have any solution ?
Steps to reproduce:
create a controller :
class MyController extends Controller
{
// route : /list
public function index() {
$page = Request::input('page');
...
return Inertia::module('Time::Index', [
'people' => array(...),
'numberOfAdults' => Inertia::defer(fn () => 3)
]);
}
create another controller to update year of one people
class YearController extends Controller
{
// route : /year/{peopleId}
public function store() {
// Update in DB
...
return Redirect::route('wrhtm.index')->with('success', 'Day created.'); <-------------- Case 1
return Redirect::back(); <------------------------------------------------------------- Case 2
}
In Vue3 :
<script>
import { router } from '@inertiajs/vue3'
defineProps<{
people: [],
numberOfAdults: number
}>()
const save = (id) => {
router.post(
`/year/${id}`,
{
date: props.date,
ticket: newTicket,
},
}
</script>
<template>
...
<Deferred data="numberOfAdults">
<template #fallback>
Loading
</template>
{{ numberOfAdults }}
</Deferred>
<div v-for="person in people">
{{ person.name }}
<input :v-model='person.year'>
<button @click="save(person.id)">Save</button>
</div>
...
</template>
I wonder if this is also fixed by https://github.com/inertiajs/inertia/pull/2024 ?
You need to use Redirect::back() to keep the pagination query string, or pass it explicitly to the Redirect::route() method. I checked the deferred prop and it was indeed broken in the first beta, but it has been fixed even since v2.0.0.
