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”
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”
In this talk, we will learn how a different mindset can help us understand React Query and work with it efficiently.
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...
