Is it possible to persist form state?
Hey there,
I am looking to migrate a rather complex form over from RHF to Tanstack. My original form had its own custom context and a dedicated Zustand store for managing state along with accessing state in various components. I can see so much potential in Tanstack Form and I really want to switch over to it but one thing I am unsure of is the best method for persisting the state of the form?
Because there's some great integrations with Tanstack Query I did contemplate making use of that and creating an auto-save mechanism to my form instead of using a client-side library? I'd love to add auto save one day anyway. Is it realistic to implement a state management through Tanstack Query and either live feed the data from the form to the database (and vice-versa) or implement a manual 'save progress' button? I want to avoid handling server-side state and client-side state synchronisation manually if I can
4 Replies
optimistic-gold•3w ago
this thread may be worth reading, I have a feeling it's a similar topic:
https://discord.com/channels/719702312431386674/1395639585643565077
other-emeraldOP•3w ago
Oh man this might be exactly what I am looking for tysm
so this person went with a local session storage hook layer? I'm assuming it's probably not a great idea to simply swap that out with a Tanstack Query call instead as client-side would be much more reactive (even taking optimistic updates into account which could make it more complex?)
My challenge is very similar - I have an app that uses a tab navigation system and I'd like to persist state not only when switching tabs but ideally when refreshing or changing devices. I originally had a sync system but this lead to edge cases where users refreshed in between a sync refresh and would lose partial state but tbh I'm not really sure of a better system for handling client-side + server-side state (other than optimistic updates)
optimistic-gold•3w ago
that wasn't what they ended up using either. Localstorage was merely an easy way to give an example
other-emeraldOP•3w ago
I've ended up with a system I'm not sure is good or is a 'it just works' lol
1. The pre-saved form is loaded via a form ID (from database) and loaded into the default values (Tanstack Query)
2. Debounced auto-save (1 second) after user has stopped interacting with form (isDirty, isValid...)
3. Auto-save is a tRPC/TQ mutation that saves the user's form data as a jsonb in database
4. onSuccess, form is reset - onSettled the original getForm query is invalidated (because I cba to deal with optimistic updates better but that could improve it)
The only issue is if the user tries to switch tabs in between auto-refresh states/calls, this will lose the state and also not save the form (possible solution being just to prevent the user from switching tabs until audo-save has occurred/finished)?