Skip to content

Conversation

@reinink
Copy link
Member

@reinink reinink commented Oct 29, 2020

This PR implements the new "lazy props" feature, as discussed here: inertiajs/inertia#287

This feature allows you to define optional (lazy) properties that are not included on the initial visit to a page. These properties are only ever included when using partial reloads (the only option).

You mark a prop as lazy using the new Inertia::lazy() method, which behind the scenes wraps the prop in a new LazyProp class:

return Inertia::render('Users/Index', [
    'users' => User::paginate('id', 'name', 'email'),
    'companies' => Inertia::lazy(fn () => Company::get('id', 'name')),
]);

Then, to load this prop later on, you perform a partial reload from your page component:

<inertia-link class="hover:underline" href="/users" :only="['companies']">Load companies</inertia-link>

Or programatically:

Inertia.reload({ only: ['companies'] })

Lazy Props

@reinink reinink marked this pull request as ready for review October 29, 2020 11:02
@reinink reinink requested a review from claudiodekker October 29, 2020 11:02
@reinink reinink merged commit c153877 into master Oct 29, 2020
@reinink reinink deleted the lazy-props branch October 29, 2020 11:38
@gajosadrian
Copy link

What's the difference between Lazily evaluated and Lazy prop?

Lazily evaluated

return Inertia::render('Users/Index', [
    // Lazily evaluated (only run if required)
    'companies' => function () {
        return Company::orderBy('name')
            ->get('id', 'name');
    },
    // Evaluated immediately
    'users' => User::orderBy('name')
        ->select('id', 'name')
        ->paginate(),
]);

Lazy prop

return Inertia::render('Users/Index', [
    'users' => User::paginate('id', 'name', 'email'),
    'companies' => Inertia::lazy(fn () => Company::get('id', 'name')),
]);

@pkboom
Copy link

pkboom commented Oct 29, 2020

What's the difference between Lazily evaluated and Lazy prop?

Lazily evaluated

return Inertia::render('Users/Index', [
    // Lazily evaluated (only run if required)
    'companies' => function () {
        return Company::orderBy('name')
            ->get('id', 'name');
    },
    // Evaluated immediately
    'users' => User::orderBy('name')
        ->select('id', 'name')
        ->paginate(),
]);

Lazy prop

return Inertia::render('Users/Index', [
    'users' => User::paginate('id', 'name', 'email'),
    'companies' => Inertia::lazy(fn () => Company::get('id', 'name')),
]);

The difference is 'This feature allows you to define optional (lazy) properties that are not included on the initial visit to a page.'

@gajosadrian
Copy link

gajosadrian commented Oct 29, 2020

And the first one also Lazily evaluated (only run if required). So I assume that Lazily evaluated is always required on initial visit.

@reinink
Copy link
Member Author

reinink commented Oct 29, 2020

@gajosadrian It works like this:

return Inertia::render('Users/Index', [
    // ALWAYS included on first load
    // OPTIONALLY included on partial reloads
    // ALWAYS evaluated
    'users' => User::get(),

    // ALWAYS included on first load
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => fn () => User::get(),

    // NEVER included on first load
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => Inertia::lazy(fn () => User::get()),
]);

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

Successfully merging this pull request may close these issues.

5 participants