Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V2 Partial reloads #2094

Open
101Admin opened this issue Nov 20, 2024 · 2 comments
Open

V2 Partial reloads #2094

101Admin opened this issue Nov 20, 2024 · 2 comments

Comments

@101Admin
Copy link

Versions:

  • @inertiajs/vue3 version: 2.0.0-beta.2

  • @inertiajs/inertia-laravel version: 2.x-dev

problem:

I know it's still beta for V2 but just wanted to bring this bug to the attention.
I setup a simple partial reload.
But triggering the partial reload also triggers the other props not specified in :only array
So it still executes queries/functions you don't want on a partial reload.

In V1 it skipped other props not mentioned for the partial reload.
And also did not execute the queries/functions

Steps to reproduce:

The setup for a simple dashboard page ( I stripped down the default Laravel Dashboard.vue file)

<script setup>
import { Link } from "@inertiajs/vue3";

const props = defineProps({
    timestamp: Date,
    timeStampPartial: Date

})
</script>

<template>


        <Link href="/" >full page reload</Link>
        <br/>
    <br/>
    <h1>test</h1>
        <Link href="/" :only="['timestampPartial']">trigger only partial reload</Link>

</template>

Default web.php added the Route::get('/') so it would point to the default controller

<?php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', [\App\Http\Controllers\Controller::class,'index']);

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
    Route::get('/dashboard', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');
});

Default controller file.
Added index function with the 2 props setup as partials directing to a separate function.
Creating logs to show what is being triggered by clicking on the partial Link in de Dashboard.vue file.

<?php

namespace App\Http\Controllers;

use Carbon\Carbon;
use Illuminate\Support\Facades\Log;
use Inertia\Inertia;

class Controller
{
    public function index(){

        return Inertia::render('Dashboard', [
            'timestamp' => fn() => $this->timestamp(),
            'timestampPartial' => fn() => $this->timestampPartial()
        ]);
    }

    public function timestamp()
    {
        Log::info('hello');
        return Carbon::now();
    }

    public function timestampPartial()
    {
        Log::info('partial function');
        return Carbon::now();
    }
}

English isn't my native language so tried explaining as best as i could.
If any more info i needed let me know, glad to help out!!

@RobertBoes
Copy link
Contributor

RobertBoes commented Nov 20, 2024

Created a repo that reproduces the issue: RobertBoes/partial-props-bug@0b904a0

As is evident there, upon a partial reload it still takes 2 seconds, since the time prop is also executed, even though it's not requested and not returned in the response

Did a little debugging, seems like it's going wrong here: https://github.com/inertiajs/inertia-laravel/blob/a836013b5b86b999189b4eb2ce60835cd1329136/src/Response.php#L138-L142
In the case of my demo repo, it just resolves all props. It doesn't check which props should be partially loaded

@mreduar
Copy link

mreduar commented Dec 11, 2024

I see that the PR was merged. But this is happening to me with deferred props. Is it possible to combine deferred with partials?
I have several properties, but let's give the example with only two property.

return Inertia::render('Hours/HourIndex', [
    'usedHours' => Inertia::defer(fn () => $hoursService->getUsedHours()),
    'expiringHours' => Inertia::defer(fn () => $hoursService->getExpiringHours()),
]);

If from the frontend, I execute:

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

It will load both props. The thing is that if I wrap this in Inertia::lazy(...), the defer does not work.

Should I open a separate issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants