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

deskT's avatar
Level 5

Using router.reload with Laravel, Inertia and React

I am trying to lazy load part of the data in the controller. I am trying the below:

return Inertia::render('TeamMembers', [
                'test1=> "123",
                'testLazy' => Inertia::lazy(fn () =>
                    User::where('company_id', '=', $id)->get()
                )
            ],
        );

I expect, that the testLazy props will not be loaded on the first load, and then I can use useEffect to re-request only the testLazy, as follows:

router.reload({only: ['testLazy']});

But the problem is, it doesn't work and results in a 409. The only headers I see in the request are:

x-inertia: true
x-inertia-partial-data: testLazy
x-requested-with: XMLHttpRequest

Judging by the documentation https://inertiajs.com/the-protocol and the code https://github.com/inertiajs/inertia/blob/5c9c2707dc5f2f1f36d8eff99d731b5e42dab021/packages/core/src/router.ts#L355-L356 there should be additional headers. If I try to pass the headers manually, they still don't show up.

        const inertiaPage = usePage();

            <button onClick={() => router.reload(
                {
                    only: ['testLazy'],
                    headers: {
                        "x-inertia-partial-component": inertiaPage.component, // doesn't show up
                        "x-test": "x-test2", // shows up
                        "version": inertiaPage.version || "not-found", // shows up
                        "component": inertiaPage.component // shows up
                    }
                }
            )}>Reload test</button>

Using Laravel 9, @inertiajs/react 1.0.0, laravel-mix 6.0.49 (tried building with Vite, no difference). Any ideas?

0 likes
11 replies
LaryAI's avatar
Level 58

The issue is likely related to the x-inertia-partial-component header not being sent. This header is required for the router.reload method to work correctly.

You can try adding the x-inertia-partial-component header manually to the headers object when calling router.reload:

const inertiaPage = usePage();

<button onClick={() => router.reload(
    {
        only: ['testLazy'],
        headers: {
            "x-inertia-partial-component": inertiaPage.component, // add this header
            "x-test": "x-test2",
            "version": inertiaPage.version || "not-found",
            "component": inertiaPage.component
        }
    }
)}>Reload test</button>

If that doesn't work, you can try using the Inertia.visit method instead of router.reload. This method will send the x-inertia-partial-component header automatically.

Inertia.visit(window.location.pathname, {
    only: ['testLazy']
});
Sinnbeck's avatar

Why send any headers at all? It should just work with only.

<button onClick={() => router.reload(
                {
                    only: ['testLazy'],
}
)}>Reload test</button>
deskT's avatar
Level 5

@Sinnbeck I understand, but as I said, it doesnt. It only sends these:

x-inertia: true
x-inertia-partial-data: testLazy
x-requested-with: XMLHttpRequest
Sinnbeck's avatar

@deskT is this react? But it does indeed sound like an issue with version. I had a similar error if I triggered the reload before inertia was done loading (in a useEffect)

Sinnbeck's avatar

@deskT ill see if I can recreate it in my react app. As I said i only experienced it when inertia wasn't done loading. I fixed it with a setTimeout of 0 mili seconds

deskT's avatar
Level 5

@Sinnbeck Looks like it actually works with the below:

Inertia.visit(window.location.pathname, {
    only: ['testLazy']
});

so it seems that there is maybe something wrong with the router import { router } from '@inertiajs/react' .

Sinnbeck's avatar

@deskT which import is that? I don't recall any Inertia exports existing in version 1

I would assume it is

router.visit(window.location.pathname, {
    only: ['testLazy']
}); 
Sinnbeck's avatar

Just checked my own react app and I have this on a button (in a function that it calls)

router.reload({only: ['respondents'], data: updatedData})
deskT's avatar
Level 5

@Sinnbeck Thanks for the tip on the timeout, I also ran into this issue as well.

Please or to participate in this conversation.