[V2] Post data on paginated list with Deferred data

[EtiennePASSOT]

Versions:

• @inertiajs/vue3 version: 2.0.0-beta.1
• inertiajs/inertia-laravel version: 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>