Convert api data to client state waiting for a save action
Hello folks,
I’ve been trying to figure out how to manipulate “server state” without immediately persisting it to the back-end.
Imagine you have “server state” as a list.
Each time want to add or remove an object, this would be persisted to the server
The solution to only use api data would be to update your back-end logic to store a draft and active version of your table or something like that (which sounds very weird)
Or, if you want a local version of the goals list and only update when clicking a Save button you can either:
1. queryClient.setQueryData and manually trigger the useMutation.
This is discouraged:
https://tkdodo.eu/blog/practical-react-query#dont-use-the-querycache-as-a-local-state-manager
If you tamper with the queryCache (queryClient.setQueryData), it should only be for optimistic updates or for writing data that you receive from the backend after a mutation. Remember that every background refetch might override that data, so use something else for local state.
2. synchronise “server state” with local state.
This also seems to be discouraged (see attached slide)
https://tkdodo.eu/blog/thinking-in-react-query
Do you have some informations concerning this use case? Is there a way to manipulate “server state” locally and decide when I want to persist it to the “server state” 🤔
Thinking in React Query
In this talk, we will learn how a different mindset can help us understand React Query and work with it efficiently.
Practical React Query
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...
6 Replies
extended-salmon•12mo ago
So form state then: 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.
xenial-blackOP•12mo ago
Hey @TkDodo 🔮 , yes I have read your article but in my case it's not a real form, it's a table where I can add/remove rows, I can't use default value as if it is a form. and I have seen that we should not convert the tanstack query data to local state, is it a edge case?
xenial-blackOP•12mo ago
Hey @TkDodo 🔮 do you have some inshights about this?
extended-salmon•12mo ago
if you want a local version that's a temp copy, you need "client state" one way or the other. defaultValue is one approach if you use actual form elements; if not, then use a client state manager; could be useState ,could be something else
xenial-blackOP•12mo ago
ok that's what I need, but how to sync the server data into my useState, are we agree that I should not use onSuccess? should I pass the setter to my queryFunction as a parameter?
extended-salmon•12mo ago
that's what the form article tells you: either you separate it into two components and use initialState, or you keep the states separte and derive the final state