Change defaultValues after submission?
I am wondering if anyone has ever dealt with changing defaultValues on a form after submission? I use Query to initialize the defaultValues in the form, then once the form is submitted I refetch the query. I want to change the defaultValues to the associated, new query data and reset the form. This kind of state syncing becomes rather complex in my opinion, but I am exploring this idea. Let me know if it's a dumb one. This would be useful in user settings forms, where the page is not left after submitting the form.
It would be super cool if we could subscribe the defaultValue fields to query data so all we need to do is run reset() after refetching the query (following a form submission) and the fields should already reflect the database.
3 Replies
eager-peach•10mo ago
Isn't that exactly what this example does?
https://tanstack.com/form/latest/docs/framework/react/examples/query-integration
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
eastern-cyan•8mo ago
I don't think that example completely covers setting the default values after submission.
Basically I wanted the user to have the same experience if they had submitted a form as if they just loaded the page.
In my case, I needed to invalidate the query cache as part of the mutation's onSuccess callback to see the default values update.
I think another thing that is potentially unexpected for those coming from react-hook-forms was that my form remained dirty after submission. So for my use case, which is that I wanted to enable the submit button only when changes are present, I had to also add form.reset() to my mutation's onSuccess.
I'm not sure if this is the best way to achieve refreshing state after a submit, but it worked. If anyone knows of a better way let me know.
harsh-harlequinOP•8mo ago
form.reset() is the way 🙂