Do I need to transfer react-query (trpc) values into local state first, if I want editable Inputs?
I am learning react-query and I get roughly how it works when I'm fetching & mutating some very simple data.
What I don't understand is this:
Say I have a Settings Page with multiple input fields where users can change their names, addresses and other things. Now I would love to put the data I get from react-query directly into a
<Input value={data.name} />, but since the user will maybe want to change that data, I will need to have some way of updating it.
But since I do not want to trigger a mutation every time the users triggers an onChange event of an input, the only solution I see is doing the mutation call in the onSubmit part of the form. This then means that I will have to put all the data I get from react-query into state (e.g. initialise my state with props that ultimately come from react-query), which then gets updated via onChange and only when the user submits the form will I do the mutate call.
I am generally O.K. with this architecture, but is this really the best way? Or am I missing something?
Is there some way to integrate & use the react-query values directly and somehow tell it to update those only in the very end and allow some front-end state changes to happen first? Or is there a pattern I am not aware of? It seems like such a pain to do this for a lot of inputs / forms in a Settings Page.2 Replies
React Query and Forms
Forms tend to blur the line between server and client state, so let's see how that plays together with React Query.
thanks a lot. i was actually reading an article of the very same series of blog posts when trying to fix this, but didn't see this one! so it does seem to be ok to be doing this.