React Query 的竞争条件

Question

我正在尝试使用反应查询创建一个 Todo 应用程序，但我面临竞争条件问题。 我有一个待办事项页面，用户更新/创建新的待办事项，然后单击保存。 保存过程可能需要大约 3 秒，具体取决于用户的互联网连接。 编辑待办事项后，用户仍保留在待办事项页面中。 创建新的待办事项后，用户将导航到待办事项页面。

问题是， 当用户创建/更新待办事项然后单击显示待办事项模式（这是外部组件，我无法编辑它） 模式显示编辑前的待办事项/如果是新待办事项则为空

当我调试问题时，我可以看到在模式打开后反应查询获取待办事项。 如果我关闭模式并再次打开它，它将显示更新的待办事项。

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，待办事项将是未定义的。

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

我尝试过使用 {onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)} 但效果并不理想。

Answer 1

只需等待 onSuccess 回调并打开模型后:)解决:D

如果不可能，请提供更多详细信息