我试图创建一个Todo应用程序与React查询，我面临的竞争条件问题。我有一个待办事项页面，用户更新/创建新的待办事项，并单击保存。取决于用户因特网连接，保存过程可能花费大约3秒。编辑完待办事项后，用户仍停留在待办事项页面中。创建新的待办事项后，用户将被导航到待办事项页面。
问题是，当用户创建/更新一个todo，然后单击show todo modal（这是外部组件，我不能编辑它），modal在编辑之前显示todo/如果它是新的todo，则为空
当我调试这个问题时，我可以看到react查询在模式打开后获取todo。如果我关闭模式并再次打开它，它将显示更新的todo。

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,
  }
})

如果我删除keepPreviousData，todo将是undefined。

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

我试过使用{onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)}，但它没有工作得很好。