Race conditions in React Query

Question

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 (
   <TodoModalButton onClick={openModal}>Open Todo Preview Modal</TodoModalButton>
)

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.

Answer 1

Just wait for the onSuccess callback and open the model:) Solution: D

If not possible, please provide more details