Recommended pattern to compare and select server/local state?
I am building a document editing app where each document is represented as a JSON object with properties including
updatedAt. Currently, I have a simple queryFn that just connects to the DB to get the server version and sets that as the query data. Is there a recommended way to compare this version to the local version (for example, an optimistic update pre-mutation success) and keep whichever is more recent? I do not want an automatic refresh to override local content if the local content is more recent.
I want to avoid this:
* User makes edit to form, triggering an optimistic update and a mutation
* User sees their edit, mutation still pending
* Automatic refetch triggers, pulls older data from server
* User sees flash of old content
* Mutation succeeds
* Another automatic refresh
* User sees new content1 Reply
national-gold•3y ago
I think you'd need to handle this inside the queryFunction:
- read the currently cached data with queryClient.getQueryData
- make the request
- compare updatedAt and return the newer one