[Optimistic updates] How to synchronously update query cache?

[raymondji]

I'm using React Query to fetch a list of items and mutate the list of items when the user re-orders them (manually via drag and drop). E.g. re-ordering tickets in Trello/Jira. Specifically, when the user finishes dragging an item and drops it into its new spot in the list, I synchronously call mutation.mutate() where const mutation = useMutation(...);

In order to immediately reflect the new ordering of items in the UI, I'm performing an optimistic update per the example code in the React Query docs. However, it seems like onMutate does not run synchronously*. My list component seems to flicker as the component first re-renders with the original item order, then onMutate gets run, and finally the component re-renders with the updated item order.

*At least this seems to be the case; when I add console.log("rendering") in the component render method and console.log("onMutate") inside the onMutate method, I see this printed:

rendering
onMutate

Appreciate any guidance/suggestions on:

1. Whether this assumption is correct (that onMutate does not run synchronously when mutate() is called)
2. How to work around this to avoid flickering before the optimistic update code gets run

Thanks in advance!

[TkDodo]

I'm not sure, I'd need to see an example. Generally, setQueryData only schedules an update, so "real synchronous update" might not be possible.

[Alex1899]

@raymondji Hi, did you figure out a solution to this? I am getting the same behaviour