Inertia: [inertia-vue] Is it possible to update the cached local state?

[plmrlnsnts]

I am using local state caching to keep a list of items, that has been already loaded, available when a user navigates back to a page.

Let's just say these items can be "favorited/liked". When a user clicks the link of an item from that list, "favorites" that item on that page then clicked the back button, that item will still remain "unfavorited" (data from our cached state).

Is it possible to update the cached state, so that when a user navigates back, we could update the items that have been "cached/remembered"?

[claudiodekker]

Hi,

Since Inertia's local state caching gets stored in the browser's history state (which is per page), there unfortunately isn't a way to access it on different pages. This is done on browser-level (and works through the pushState method and the popState event).

---

What you could try instead, is to use persistent layouts for this instead, and to use this.$emit to emit an event to the layout instead. That way, you can keep track of this liked state there. Alternatively, you could use a state management library like Vuex for this.

Alternatively & personally, I'd use something on the back-end for this, so that things would still work if the user reloads the page. The biggest downside of this is that you would need to create more endpoints for this, in which you either add or delete the 'favorited' item from the session/database/etc.. This way, things will still be known if the user leaves and only comes back a few days later.

The way that this would work on the front-end, is that you could add a @click="toggleFavorites(item.id)" to the element that (un)favorites your item.

Then, inside this method, you can call the back-end by making a PUT call so that it knows that the item needs to be favorited, or make a DELETE call so that it knows it needs to be unfavorited. To determine which call you need to make, you'll need to however need to know the current favorited state. To become aware of this, one option I can think of is to pass the currently favorited item(s) in as a separate page prop when the page gets loaded, or make it part of some AJAX calls.

Either way, I hope you get the idea.

Good luck!

[reinink]

@plmrlnsnts One thing you'll find with Inertia.js is that we've designed it as much as possible to behave like the default browser behaviour. This is a "core principle" of the framework. History state is one of those areas. When navigating back (or forward) in history, we display the page as it was, and don't automatically update data from the server (or in some other way).

That said, there are workarounds, as per @claudiodekker suggestions. Hopefully that's helpful! 👍