Optimistic updates to text fields (handling each keypress)
For my task list, if you click on a task it opens a modal for that task where you can make edits. For the edits like changing status and due date, the optimistic updates require only 1 invalidate each. However, for the text fields, I was not sure how to make it such that I am not invalidating on each key press.
I thought of having the invalidate when the component loses focus as one idea but the issue is that the query cache still needs to be updated on each keypress so that the user can see what they're typing (obviously).
Another option would be to replace the textfield with another textfield on focus and manage the state locally for that textfield. Then when it loses focus 1) change the query cache to the text just typed and invalidate it 2) hide the temporary textfield and show the original textfield with the new text. This approach feels quite hacky though. Any recommendations?
1 Reply
generous-apricot•4y ago
it sounds like you are directly manipulating the query cache, which is not advised. as long as the form is active, the displayed data basically becomes client state. I'm going into some options to form handling here: https://tkdodo.eu/blog/react-query-and-forms
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.