-
-
Notifications
You must be signed in to change notification settings - Fork 417
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Svelte page component instance is not refreshed #1670
Comments
Not quite confident making PR but here is a fix I came up with and deployed to prod. It has been running for couple of weeks now and I haven't noticed any issues so far - https://github.com/edgars-vasiljevs/inertiajs-svelte/pull/1/files It uses Hope this gives more clues. |
anyone any update on this? |
@edgars-vasiljevs Thank you for your fix! I can confirm that your changes work, I think it's safe to create a PR. |
Seems a PR was sent in so let's see how it goes. Thanks all. |
Issue is still present in latest release. See my original post for steps on how to reproduce. I expect |
The proposed fix from #1763 isn't working for me either, reverted back to @edgars-vasiljevs solution. |
@reinink @driesvints can we reopen this issue? |
Yup, reopened. To be honest I've never been able to reproduce this issue locally myself, can any provide a minimal reproduction using our Svelte playground (https://github.com/inertiajs/inertia/tree/master/playgrounds/svelte)? That would help me a ton, as it's impossible to fix something I can't reproduce. |
Hi! Found this issue while preparing to submit my own on this bug. Was going to name it - inertiajs-svelte ignores preserveState option and works as if it is always true. Minimal reproduction is simple inertia page like this <script>
import { router } from "@inertiajs/svelte";
let count = 0;
const increase = () => count += 1;
// same page url here to make revisit, preserveState: false is not needed as it should be default, `
const reload = () => router.visit('/page', { preserveState: false });
</script>
<button on:click={increase}>{count}</button>
<button on:click={reload}>reload</button> Try this and you'll see that counter value ir preserved between visits, which is different from other framework behaviour and makes In fact I have solution as well. Studied vue version and tried to apply $store.key value (which is changed on every visit if preserveState is false) aproximately the same way. Sorry, no PR, just code snippets. Made new component <script>
export let key = null;
</script>
{#key key}<slot />{/key} and then changed import Key from "./Key.svelte";
...
$: child =
$store.component && h(Key, { key: $store.key }, [
h($store.component.default, $store.page.props),
]); Hope this helps. |
I am experiencing the same issue. I have several pages, say The same happens when I click on a link to change the language of the current page (e.g. from Do you have a Band-Aid solution to trigger a full (including layout etc.) re-render whenever the URL changes? IMHO it makes no sense to preserve the current state when the URL changes. EDIT: also, the props ( |
For now, the only band-aid I found: I am removing all the It seems to do the trick (at a small cost of extra code for more complex cases). does not work
works
works too, for more complex needs
I am new to Svelte / Inertia so please forgive me if this solution is not completely elegant or optimized EDIT: there seems to be caveats, as now that I made this change, whenever I leave this page (aka "main component") to another one, Inertia still tries to refresh this page (whereas it should be discarded, as a new "main component" was returned from the ajax query). E.g. I first-load page |
Version:
@inertiajs/svelte
version: 1.0.11Describe the problem:
Page component is not refreshed (destroyed and recreated) when navigating to the same page.
Per documentation page component is supposed to refresh - "By default, page visits to the same page create a fresh page component instance."
Steps to reproduce:
Currently only exported properties are updated but page component instance stays the same.
This causes an issue where form is not updated when navigating to the same form but with different data.
Tried same scenario with Vue2 and it's updating form as expected. Component is being re-mounted every time.
The text was updated successfully, but these errors were encountered: