stormy-gold

State and Inertia.js integration

I want to be able to store and then restore the full form state, with inertia. Is that possible, and if so, how do I get the full form state and how can I restore full form state?

33 Replies

stormy-gold•2mo ago

You mean something like persistence? See these threads for more info: https://discordapp.com/channels/719702312431386674/1406583847059066952 https://discordapp.com/channels/719702312431386674/1404490027538452511 we're planning on adding a persister to help with tackling this. If you could elaborate on how inertia saves and restores data, it could help for drafting the API for it

stormy-goldOP•2mo ago

Yes, I'm aware of that. In the future, I would prefer TanStack's persistent management, which will be much better, more integrated (less boilerplate code) and more flexible. For now, as a workaround, I can try to use Inertia https://inertiajs.com/remembering-state#manually-saving-state) for persistence. I just need a simple way to retrieve and write the entire form state.

stormy-gold•2mo ago

to receive form state, try an attached event listener in listeners. to set form state, pass defaultState to the hook

stormy-goldOP•2mo ago

You mean setting the defaultValues to the state and listening and storing state like this?

listeners: {
            onChange: ({ formApi }) => {
                const currentValues = {
                    username: formApi.getFieldValue('username') as string,
                    notifications_enabled: formApi.getFieldValue('notifications_enabled') as boolean,
                };
                router.remember(currentValues, FORM_STATE_KEY);
            },

listeners: {
            onChange: ({ formApi }) => {
                const currentValues = {
                    username: formApi.getFieldValue('username') as string,
                    notifications_enabled: formApi.getFieldValue('notifications_enabled') as boolean,
                };
                router.remember(currentValues, FORM_STATE_KEY);
            },

Is there not a more efficient way to retrieve the entire state and restore it without having to go over each field and use defaultValues?

stormy-gold•2mo ago

formApi.state.values is not reactive, but it's up to date. So no need to create a new currentValues object

listeners: {
  onChange: ({ formApi }) => {
    router.remember(formApi.state.values, FORM_STATE_KEY)
  }
}

listeners: {
  onChange: ({ formApi }) => {
    router.remember(formApi.state.values, FORM_STATE_KEY)
  }
}

stormy-goldOP•2mo ago

Thanks. Can I then restore it to formApi.state.values somehow or is my only option to use defaultValues?

stormy-gold•2mo ago

defaultState does exist, but I'm not confident enough to write code snippets in discord for that. Do you have a small svelte intertiajs example where I can implement this behaviour and tinker with it? stackblitz, codesandbox, something of that type?

stormy-goldOP•2mo ago

I have pushed it to the PR https://github.com/coollabsio/coolify/pull/6389/files#diff-0ed6c613ea283ce308682a69ea7512178f1fed18783b804bf87f3b52e260ec4c I left // comments where state stuff is. Also left a few comments on your review about the other things.

stormy-gold•2mo ago

that's a start, but I meant where I can insert that component to have the type errors that you're experiencing as well this is just one file of the full stack, no?

stormy-goldOP•2mo ago

Yes but it only works if you have the full laravel backend as well No the file Way1TanStackWithState.svelte and the few lines of TS for state is everything that is needed (rest is php) not important. If you want you could clone the coolify repo and run the laravel app?

stormy-gold•2mo ago

sure, I'll give it a try later this evening

stormy-goldOP•2mo ago

I will write you a quick guide and adjust some stuff so it is almost one click. This comment is no longer on the file https://github.com/coollabsio/coolify/pull/6389#discussion_r2285563804. I agree this would be very nice to have.

stormy-gold•2mo ago

we'll keep it in mind! Also thanks in advance for the guide

stormy-goldOP•2mo ago

Alright done: - Guide: https://github.com/coollabsio/coolify/blob/v5.x/CONTRIBUTING.md - To see the forms use the routes from routes/web.php there you can also adjust stuff like default values (hardcoded instead of from DB) and backend validation. If anything is unclear just let me know. Also thank you so much for all the help!

stormy-gold•2mo ago

I‘ll try to start it up this evening or tomorrow. The guide looks to be straightforward!

stormy-goldOP•2mo ago

I found a second bug in the TanStack Form Svelte docs: https://github.com/coollabsio/coolify/pull/6389#discussion_r2286082754. I think I also found a bug in Inertia.js that causes only one error to be passed to the front end. F**ck my life, man 😂. I searched so long on why only 1 error was displayed.

stormy-gold•2mo ago

good catch with the docs! I'll answer the question on the PR for clarity, but I'll reiterate here: Yes, isValid is just a shorthand check for errors.length > 0. There is no runtime difference

stormy-goldOP•2mo ago

Thank you so much! I hate to be this guy, but the Svelte docs are lacking a bit. Many pages are missing, for example Listeners page, Custom Errors and more. It would be great if they could be updated to match the React docs at least for all core features. If I find the time, I will maybe open a PR to improve the docs as it took me quite a while of reading React docs to get my Svelte code working.

stormy-gold•2mo ago

absolutely. Svelte and lit are quite behind, and vue / solid / angular are also missing some docs. Frankly, there‘s still documentation to be made for React too … it‘s quite a lot. Our PRs are open though, so even if it‘s just to fix that erroneous condition in the svelte example, feel free to open one! I‘ll see how much time I have the coming month, but I plan to test out frameworks apart from just React so I can expand the docs myself

stormy-goldOP•2mo ago

It would be nice and very helpful. As the docs is pretty much the only source of truth and also needed for AI as it is a newer library. I'll see what I can do in terms of PRs. My to-do list is also quite endless but I am sure I can make some time.

stormy-gold•2mo ago

Well, I didn't get around to it yet! Hopefully I'll have proper time this evening.

stormy-goldOP•2mo ago

Sounds good. Let me know if you have any issues.

stormy-gold•2mo ago

hmm, it looks like it almost works. However, none of the subroutes exist, they all return 404

stormy-gold•2mo ago

in the root route, this is what I see. Running the upstream v5.x-form-test branch and following the step-by-step

stormy-gold•2mo ago

doesn't seem like it reports any errors to the terminal. The routes in web.php don't lead to anywhere though

stormy-gold•2mo ago

AAAH, wrong port :facepalm: I went to 5173 instead of 8000. Nevermind, continuing the test!

stormy-goldOP•2mo ago

Was just about to write that.

stormy-gold•2mo ago

so how do you type what the router remembers and restores? It seems to default to string keys and unknown data

stormy-goldOP•2mo ago

Mmm I have no idea, would need to look more into that. Probably simmilar to props.

stormy-gold•2mo ago

it looks like the main issue with using the form state instead of only values is that it can't be cloned which I'm not sure why. First time I encounter that error

stormy-gold•2mo ago

this error in particular

stormy-gold•2mo ago

there's some SO questions addressing it, but they're all about vue and not svelte

stormy-goldOP•2mo ago

I'm not sure. I guess it kind of works but it would be much better if I could restore the state without having to hijack the default values for it. Can we make that possible (until we have state management built in), maybe the state can be reactive so it can be updated easier? Also what about these 2 issues https://github.com/coollabsio/coolify/pull/6389#discussion_r2285547693? and setting the success state https://github.com/coollabsio/coolify/pull/6389#discussion_r2285550435 ? I think we can type it const restoredState: FormState = router.restore(FORM_STATE_KEY) if inertia changes type from unknown to any. So maybe the type issue can be fixed like this.

Gaming

Programming

State and Inertia.js integration

Did you find this page helpful?