[2.x] Defer Props + Partial Reloads

[mreduar]

Version:

• @inertiajs/vue3 version: ^2.0.0-beta.3

Describe the problem:

It seems that deferred properties do not work correctly when combined with partial reloads.

For example, in the backend, you might define a response with deferred properties like this:

return Inertia::render('ExamplePage', [
    'prop1' => Inertia::defer(fn () => 'Deferred Value 1'),
    'prop2' => Inertia::defer(fn () => 'Deferred Value 2'),
]);

Then, from the frontend, you trigger a partial reload for a single property using:

return router.visit(route(route().current(), { only: ['prop1'] }), {
    preserveScroll: true,
    preserveState: true,
});

Both prop1 and prop2 are loaded.

It would be ideal to allow combining defer and lazy methods. For example:

Inertia::defer(fn () => $hoursService->getUsedHours())->lazy()
//or
Inertia::lazy(fn () => $hoursService->getUsedHours())->defer()

Steps to reproduce:

1. Install Inertia v2:

   • Ensure your project is using @inertiajs/vue3 version ^2.0.0-beta.3.

2. Set up a controller with deferred properties:

   • Create a route and controller method that uses Inertia::render with deferred properties:

     return Inertia::render('ExamplePage', [
         'prop1' => Inertia::defer(fn () => 'Deferred Value 1'),
         'prop2' => Inertia::defer(fn () => 'Deferred Value 2'),
     ]);

3. Trigger a partial reload from the frontend:

   • In your Vue component, trigger a partial reload for one property:

     router.visit(route(route().current(), { only: ['prop1'] }), {
         preserveScroll: true,
         preserveState: true,
     });

4. Observe the behavior:

   • Note that both prop1 and prop2 are loaded, even though the request specifies only: ['prop1'].

5. Optional - Test with Inertia::lazy:

   • Wrap the properties in Inertia::lazy() and verify that defer no longer works when combined.

[MarcEspiard]

In your examples, you are passing the { only: ['prop1'] } argument to the route() function, instead of the router.visit() options

It should be:

router.visit(route(route().current()), {
    only: ['prop1'],
    preserveScroll: true,
    preserveState: true,
});

Hope this helps