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

如果不可能，請提供更多詳細資訊