ugly-tan

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

rising-crimson•6d 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

ugly-tanOP•6d 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.

rising-crimson•6d ago

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

ugly-tanOP•6d 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?

rising-crimson•6d 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)
  }
}

ugly-tanOP•6d ago

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

rising-crimson•6d 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?

ugly-tanOP•6d 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.

rising-crimson•6d 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?

ugly-tanOP•6d 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?

rising-crimson•6d ago

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

ugly-tanOP•6d 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.

rising-crimson•6d ago

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

ugly-tanOP•6d 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!

rising-crimson•6d ago

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

ugly-tanOP•6d 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.

rising-crimson•6d 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

ugly-tanOP•6d 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.

rising-crimson•6d 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

ugly-tanOP•6d 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.

rising-crimson•5d ago

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

ugly-tanOP•4d ago

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

rising-crimson•4d ago

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

rising-crimson•4d ago

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

rising-crimson•4d ago

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

rising-crimson•4d ago

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

ugly-tanOP•4d ago

Was just about to write that.

rising-crimson•4d ago

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

ugly-tanOP•4d ago

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

rising-crimson•4d 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

rising-crimson•4d ago

this error in particular

rising-crimson•4d ago

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

ugly-tanOP•4d 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?