In this episode, we're diving into the new polling feature that Inertia now supports natively (from v2 onwards). Polling is all about automatically reloading and keeping your page's data fresh every few seconds—super handy for things like live dashboards.
First, we look at the old way of doing things, where you had to manually set up a JavaScript timer and use things like router.reload
. It was definitely more work than it needed to be. But now, with the usePoll
helper, things are way simpler! You just specify how often you want the data to refresh (like every five seconds), and Inertia takes care of the rest.
We start off by adding a simple user count to a dashboard page and set up polling so the count updates automatically whenever someone adds a new user. You’ll see how polling initially fetches all the props, which could be overkill sometimes. No worries though—there's a way to limit polling to only the props you care about, making those network requests super efficient.
Next, we kick it up a notch and explore manual control over polling. You'll learn how to add "Live On" and "Live Off" buttons, letting your users start or stop the polling whenever they want. Plus, we make use of a ref and a watcher so we always know whether we're currently polling.
We also get into some UX details, like showing a loading spinner whenever new data is being fetched. For that, we create an isRefreshing
value and show an animated icon only while data is refreshing, making your dashboard feel super responsive and alive.
And last but not least, we talk about the keepAlive
option. By default, polling pauses when the user isn't looking at the tab (which is usually what you want), but if you have a case where you want polling to continue in the background, you can turn that on too.
By the end of this episode, you'll be able to set up polling with Inertia to easily keep your data up to date, add user controls, and make your pages feel a lot more dynamic—all with just a few lines of code!