React Query更新Todo后模态框显示旧数据，求排查原因

核心问题分析 #

你遇到的问题本质是数据更新后，模态框没有同步获取到最新的Todo数据，结合你的代码，主要有以下几个可能的原因及对应解决办法：

1. 第三方模态框缓存了旧的Todo引用 #

你调用modal.open(todo)时，传递的是当前组件中todo的快照对象。第三方模态框通常会在打开时缓存传入的参数，不会自动监听外部数据的变化——即便后续React Query更新了Todo数据、组件完成重渲染，模态框展示的依然是缓存的旧对象。

解决办法：

• 方案一（推荐）：让模态框内部通过useTodoQuery传入todoId重新获取最新数据，而非直接传递Todo对象；
• 方案二：打开模态框时，直接从React Query缓存中拉取最新数据：

const { todo } = useTodoQuery()
const queryClient = useQueryClient()

const openModal = () => {
  // 从缓存中获取最新的Todo数据，确保传递给模态框的是最新值
  const latestTodo = queryClient.getQueryData(['todo', todoId])
  modal.open(latestTodo)
}

2. useUpdateTodo存在闭包陷阱 #

你的useUpdateTodo中，onSuccess回调里的todoId可能是组件初始化时捕获的旧值，导致invalidateQueries没有正确失效目标查询，缓存未触发更新。

解决办法：
将todoId作为参数传入useUpdateTodo，并将其加入mutation的查询键，避免闭包捕获旧值：

const useUpdateTodo = (todoId) => {
  const queryClient = useQueryClient()
  const todoMutation = useMutation(
    ['todo', todoId], // 将todoId纳入mutation键，确保依赖正确
    (updatedTodo) => getUpdatedTodo(updatedTodo),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(['todo', todoId])
      }
    }
  );

  const updateTodo = (todo) => todoMutation.mutateAsync(todo)
  return { updateTodo }
}

3. 缓存更新时机滞后 #

调用invalidateQueries后，React Query会异步重新发起请求获取最新数据。如果在请求完成前点击打开模态框，依然会拿到旧缓存。

解决办法：
在onSuccess中手动更新缓存，无需等待重新请求，让数据立刻同步：

const useUpdateTodo = (todoId) => {
  const queryClient = useQueryClient()
  const todoMutation = useMutation(
    ['todo', todoId],
    (updatedTodo) => getUpdatedTodo(updatedTodo),
    {
      onSuccess: (newTodo) => {
        // 直接更新缓存，组件会立刻拿到最新数据
        queryClient.setQueryData(['todo', todoId], newTodo)
      }
    }
  );

  const updateTodo = (todo) => todoMutation.mutateAsync(todo)
  return { updateTodo }
}

内容的提问来源于stack exchange，提问作者noer