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.

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

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.

const {todo} = useTodoQuery() const openModal = () => modal.open(todo) return ( Open Todo Preview Modal )

const useTodoQuery = () => { const {data, ...rest} = useQuery(['todo', todoId], async () => { if (todoId) { return await getTodo(todoId) } return null; }) return {data, ...rest} }

const queryClient = new QueryClient({ defaultOptions: { suspense: false, keepPreviousData: true, } })

If I remove keepPreviousData, the todo will be undefined.

const todoMutation = useMutation( ['todo'], getUpdatedTodo, {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])} );

I tried using {onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)} But the effect is not ideal.