[V2] Vue3: Stale data being used on page reload

[ecom24]

Version:

• @inertiajs/vue3 version: 2.0.0-beta.1

Describe the problem:

When a component displays data passed down from a Laravel controller using Inertia::render and picked up with defineProps,, it displays correctly the first time. But when the page is reloaded, the data sent down by Inertia::render is correct but the component continues to display the previous data.

I tried disabling all response caching from the PHP response and also on the browser but no luck. The only thing that works is closing the browser, reopening and visiting the page again - then the new data is displayed.

Chrome and Safari tried and both had the same issue.

Steps to reproduce:

In Vue 3, create a component that has defineProps to accept a property, and display it in the template of the component:

defineProps([ 'formAction' ]);

Load the page and it will display correctly. Now, in your Laravel controller, change the value that is being sent down for that property. Reload the page and the old value is still being shown. Rebuilding the component with or without versioning does not solve the problem. The only way I found to solve the problem is to close the browser, reopen it and visit the page again - now the new data will be shown.

Looking at the payload that is being sent by the controller, the new value is in it - but the component does not use it.

[joetannenbaum]

Thanks for reporting this, should be fixed by #2023

[ecom24]

Great, thanks @joetannenbaum It seems I need to wait for an official NPM release for this as I tried cloning and installing locally but could not get a successful build that way.

[flow96]

@joetannenbaum deferred props is such a game changer to inertia, this boosts the user experience to a whole new level. Do you know, if you guys will release a hotfix for this issue here, since that seems to be a bit of a deal breaker at the moment. Thank you and the team for your work!

[CodeWithKyrian]

Hi @joetannenbaum, what's the ETA for the next release that includes this? This turned out to be a huge issue for me as well

[ecom24]

Just to highlight the impact, in case it's not clear. It's currently not possible to change any data sent down from a controller method to a page on page reload apart from the very first page load of a session, unless the browser is closed and reopened.

[RobertBoes]

Also experiencing this issue, it's a massive breaking change. To give a simple example:

• Index page that shows posts
• Load it once, shows the posts
• Add a new post in your DB (or someone else does)
• Perform a hard reload
• Still shows old content

And this old content doesn't ever disappear. Even an hour after initial load, performing a refresh (f5) still shows the old data. Note, I'm just upgrading an existing app, no deferred props, no prefetching, just the same code-base as 1.x

[joetannenbaum]

Hi everyone. We're looking to get the fix for this pushed tomorrow along with some other big fixes. Thank you for your patience.

[ecom24]

I am happy to confirm that this issue is resolved in version:

@inertiajs/vue3: 2.0.0-beta.2

Many thanks for a superb product, @joetannenbaum !