Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ammarsdc's avatar

Partial reload in nested structure

Hi. How to use inertia partial reload when returning response with a nested array:

return Inertia::render('InertiaTestPage', [
    ...
    'test' => Inertia::lazy(fn () => 'bcda1'),
    'go' => Inertia::lazy(fn () => 'abc'),
    'nested' => [ // how to do this?
        'item1' => Inertia::lazy(fn () => 'abc'),
        'item2' => Inertia::lazy(fn () => 'def'),
    ],
    ...
]);

If possible, how to partial load this from frontend?

Thanks!

0 likes
7 replies
Nakov's avatar

By partially you mean accessing just item1 for example? Have you tried this:

<Link href="/items" :only="['nested.item1']">Show items 1</Link>

using the . syntax.

Give some example on what you tried and what you want to achieve.

ammarsdc's avatar

Hi @Nakov thanks for your reply.

I had the same code as I shared implemented in a new Inertia project. What I saw is, Inertia already load them all (entire nested which includes item1 & item2) since the beginning which should not be. This is not the expected behaviour for having a Inertia::lazy there. I'm expecting the data will only be loaded when requested via router.visit/reload or by using the <Link /> as in your answer.

Nakov's avatar

@ammarsdc Got it. But look at it closely, you have the entries of the nested lazy loading, but not the nested itself. So you might want to add that one too

return Inertia::render('InertiaTestPage', [
    ...
    'test' => Inertia::lazy(fn () => 'bcda1'),
    'go' => Inertia::lazy(fn () => 'abc'),
    'nested' => Inertia::lazy(fn () => [
        'item1' => Inertia::lazy(fn () => 'abc'),
        'item2' => Inertia::lazy(fn () => 'def'),
    ]),
    ...
]);

Does it make sense? And of course if you want the whole array to load, remove the inner calls of Inertia::lazy for each of the entries of the array.

ammarsdc's avatar

@Nakov I tried this as a value in only:

  1. Using :only="['nested']":

    The content inside will also be loaded even though it has Inertia::lazy

    {
       ...,
          "nested": {
             "item1": "abc",
             "item2": "def"
          }
       },
       ...
    }
    
  2. Using :only="['nested.item1']":

    The nested did not loaded at all. Seem the nested it's not working.

Nakov's avatar

@ammarsdc so what you are describing is like number 2 is working, or when you click on the link it is not loading the item data?

Can you show the full component, and how are you trying to use it?

Because what lazy means is just instructing Inertia to not load the content in case it is not needed, but Inertia obviously thinks that you need the data in your component and that's why it is loading it. Are you using it on a link? Or you are using it in the current page on any container?

ammarsdc's avatar

@Nakov for #2 I would like to say that the whole nested data which including both items were not loading after clicking the link.

Sure, I'll share the code here:

In the controller:

return Inertia::render('Page', [
    ...
    'nested' => Inertia::lazy(fn () => [
        'item1' => Inertia::lazy(fn () => 'abc'),
        'item2' => Inertia::lazy(fn () => 'def'),
    ]),
    ...
]);

Inside the Page.jsx, I implemented these two links:

<Link href="?nested=normal" only={['nested']}>Load the whole nested</Link>
<Link href="?nested=dot" only={['nested.item1']}>Load only item1 in nested</Link>

On load, the nested were not included as part of Inertia props. This is still as expected.

Then, clicking on the first link, I saw the entire nested is loaded which includes item1 and item2. My expectation, any item which declared as a lazy loading prop should not loading while clicking on this link. However, what was happened is not as should.

Next, before testing the second link, I did refresh to ensure the loaded nested is cleared.

Then clicking on that link will only refreshing the page. While there is none was loaded in addition to any existing props.

Hence my conclusion as of now, the Inertia might still have no capability in handling this scenario. Really hope that this can be considered. Since imho, grouping certain props will makes code much cleaner and easier to maintain especially when dealing with a lot of props on the same page.

But, if this is actually possible, please share what else should I do or please consider to tag someone else to notice and help me on this.

Thanks!

Nakov's avatar
Nakov
Best Answer
Level 73

@ammarsdc got it. Yeah, tried it myself now, and it is as you said. I am not sure if that will ever be the plan, because in my opinion, I wouldn't nest something which does not belong in a group, or is doing any heavy computation. Those can be separate items, which then can be separately lazy loaded. I will group in a lazy loaded array, everything that needs to load for a specific link/page.

But again, this is only my opinion, not sure what is your use case, and what will this particular case improve.

And sorry, but I don't have anyone in mind that I can tag, I know that I am not the only one that has seen this post, so maybe someone will respond, or better yet, open this as an issue on Inertia github, with the last thing that you wrote here, and you will receive a proper answer, if it is intended to work as it does, or is there any plan to consider what you need.

1 like

Please or to participate in this conversation.