<p>I'm trying to create a Todo app using reactive queries, but I'm facing a race condition issue. I have a to-do page where the user updates/creates a new to-do and then clicks save. The saving process may take approximately 3 seconds depending on the user's internet connection. After editing a to-do item, the user remains in the to-do page. After creating a new to-do item, the user will navigate to the to-do item page. </p> <p>The problem is, When user creates/updates todo and then clicks show todo modal (this is external component, I can't edit it) Mode displays the to-do before editing/empty if it is a new to-do</p> <p>When I debug the issue, I can see that the react query gets the todo items after the modal is turned on. If I close the modal and open it again, it displays the updated to-do items. </p> <pre class="brush:php;toolbar:false;">const {todo} = useTodoQuery() const openModal = () => modal.open(todo) return ( <TodoModalButton onClick={openModal}>Open Todo Preview Modal</TodoModalButton> )</pre> <pre class="brush:php;toolbar:false;">const useTodoQuery = () => { const {data, ...rest} = useQuery(['todo', todoId], async () => { if (todoId) { return await getTodo(todoId) } return null; }) return {data, ...rest} }</pre> <pre class="brush:php;toolbar:false;">const queryClient = new QueryClient({ defaultOptions: { suspense: false, keepPreviousData: true, } })</pre> <p>If I remove keepPreviousData, the todo will be undefined. </p> <pre class="brush:php;toolbar:false;">const todoMutation = useMutation( ['todo'], getUpdatedTodo, {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])} );</pre> <p>I tried using <code>{onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)}</code> But the effect is not ideal. </p>