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

Max100's avatar

Implementing partial reloads with Inertia

I'm having trouble getting partial reloads to work in Inertia.

My index function returns entries and each entry is associated with a folder. The first time the index function is called I return the entries along with several other props, including the folder data.

When refreshing the entry list, I already have the folder data, so I only need the entries this time. I've tried partial reloads, but can't get it to work.

To refresh the index I call:

router.get( next_url , {                                                        
   only: ['entries'], 
   preserveState: true,
   replace: true,
   },
});

'next_url' is the same page but additional parameters, such as the page number, may change.

On the server I've tried two things. First:

return Inertia::render('Entries/Index', 
   [
   'folders' => fn () => $this->getFolders(),
   'entries' => $entries,
   ]);

This approach returns the folder data along with the entries.

The second approach:

return Inertia::render('Entries/Index', 
   [
   'folders' => Inertia::lazy( fn () => $this->getFolders() ),
   'entries' => $entries,
   ]);

This does not return the folder data, but then the folders prop is undefined upon return, so there is no folder data on the front end which causes an error.

The Inertia documentation is a bit unclear about the distinction between these two approaches, but suggests that using the lazy function will increase performance. It does prevent re-sending the folder data, which is what I want, but then the prior folder data is lost on the front end.

Any ideas why this isn't working? Is it possible the url change could be the problem?

0 likes
6 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

It seems like you're on the right track with using Inertia's partial reloads and lazy evaluation, but there might be a misunderstanding in how the state is preserved or replaced in the frontend when using these features. Here's a step-by-step approach to ensure that the partial reloads work as expected without losing the existing state:

1. Ensure Proper Usage of preserveState

When you use preserveState: true, Inertia will merge the new page's components' props with the old page's props. This is useful when you want to update parts of the page without losing the state of other parts. However, you need to ensure that the backend properly handles what data to send based on the request.

2. Correctly Implementing Lazy Loading on the Server

Your second approach using Inertia::lazy() is correct for improving performance by not sending unnecessary data. However, you need to ensure that the existing state in the frontend is not overwritten when new data is fetched. Here's how you can modify your server-side code:

return Inertia::render('Entries/Index', [
    'folders' => Inertia::lazy(fn () => request()->input('only') ? [] : $this->getFolders()),
    'entries' => $entries,
]);

In this modification, the getFolders() method is only called when the 'only' parameter does not include 'folders'. This means that if the frontend requests only 'entries', the 'folders' data will not be recalculated and sent.

3. Handling Data on the Frontend

On the frontend, ensure that your components properly handle the possibility of 'folders' being an empty array or not being updated at all. You might need to add conditional rendering or state management logic to keep the old 'folders' data intact unless explicitly updated.

4. Debugging

If you're still facing issues, it might be helpful to log or inspect the actual network requests and responses. Check if the correct parameters are being sent and what response is received. Tools like your browser's developer tools network tab can be very helpful here.

Example Frontend Request

Make sure your frontend request logic correctly specifies what data it needs:

router.get(next_url, {
    only: ['entries'],
    preserveState: true,
    replace: true,
});

This setup should work as intended, with 'entries' being updated and 'folders' being preserved unless they are explicitly requested again.

Conclusion

By carefully managing what data is sent from the server based on the request parameters and ensuring that the frontend handles partial data updates correctly, you should be able to achieve efficient partial reloads with Inertia.

Max100's avatar

Lary's answer doesn't work and the inertia docs are sort of vague on this question.

In the end, the main problem is that on return from the refresh, if the other props are not sent (because this is a partial reload), they become undefined upon return to the component.

Does anyone have an example of doing a partial reload, ideally from both sides, but particularly from the component after the data is returned? Thanks for any ideas or suggestions.

coni's avatar
coni
2 years ago
Best Answer
Level 28

@Max100 to make it work, please use this syntax:

router.reload({ only: ['entries'], replace: true })

and in the backend:

return Inertia::render('Entries/Index', [
    'folders' => fn () => $this->getFolders(),
    'entries' => $entries,
]);

You do not have to use router.get(url, ...) if you want to add ?page=2, you can use:

router.reload(
    data: { page: 2 },
    only: ['entries'],
    replace: true
)

or alternatively use this syntax, if you want pass full url:

router.visit(
    url, // only current url
    { only: ['entries'], preserveState: true, replace: true }
)

router.get() method will cause full reload.

Max100's avatar

@coni It worked!! It seems like router.get() and the url was the problem. Thank you for your reply and for explaining everything so well! I really appreciate your help!

1 like
Max100's avatar

@DhPandya I had seen that section, but still was unsure why things weren't working. Fortunately, @coni set things straight in the answer above. But thanks for your reply!

Please or to participate in this conversation.