数据突变 | TanStack Router React 文档

由于 TanStack Router 不存储或缓存数据，因此它在数据突变中的作用微乎其微，除了对外部突变事件可能导致的 URL 副作用做出反应。尽管如此，我们还是整理了一份你可能会觉得有用的突变相关功能列表以及实现它们的库。

查找并使用支持以下功能的突变工具：

处理和缓存提交状态
提供本地和全局乐观 UI 支持
内置的钩子，用于连接失效（或自动支持）
同时处理多个进行中的突变
将突变状态组织为全局可访问的资源
提交状态历史和垃圾回收

一些建议的库

或者，甚至...

与数据获取类似，突变状态并非一劳永逸的解决方案，因此你需要选择一个适合你和你的团队需求的解决方案。我们建议尝试几种不同的解决方案，看看哪种最适合你。

⚠️ 还在看吗？提交状态在持久化方面是一个有趣的话题。你是否永远保留每个突变？你如何知道何时应该清除它？如果用户离开屏幕然后又返回呢？让我们深入探讨一下！

突变后使 TanStack Router 失效

TanStack Router 内置了短期缓存。因此，即使在路由匹配卸载后我们不存储任何数据，如果与 Router 中存储的数据相关的突变发生，当前路由匹配的数据很可能会变得过时。

当发生与加载器数据相关的突变时，我们可以使用 router.invalidate 强制路由器重新加载所有当前路由匹配。

tsx

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    router.invalidate()
  } catch {
    //
  }
}

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    router.invalidate()
  } catch {
    //
  }
}

所有当前路由匹配的失效发生在后台，因此现有数据将继续提供，直到新数据准备就绪，就像您正在导航到新路由一样。

如果您想等待所有加载器完成才失效，请将 {sync: true} 传递给 router.invalidate

tsx

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    await router.invalidate({ sync: true })
  } catch {
    //
  }
}

const router = useRouter()

const addTodo = async (todo: Todo) => {
  try {
    await api.addTodo()
    await router.invalidate({ sync: true })
  } catch {
    //
  }
}

长期突变状态

无论使用哪种突变库，突变通常会创建与其提交相关的状态。虽然大多数突变是“设置即忘记”的，但有些突变状态更持久，要么是为了支持乐观 UI，要么是为了向用户提供其提交状态的反馈。大多数状态管理器都会正确地保留此提交状态并将其暴露出来，以便显示加载指示器、成功消息、错误消息等 UI 元素。

让我们考虑以下交互

用户导航到 /posts/123/edit 屏幕来编辑帖子
用户编辑帖子 123，成功后，在编辑器下方看到帖子已更新的成功消息
用户导航到 /posts 屏幕
用户再次导航回 /posts/123/edit 屏幕

在未通知你的突变管理库路由更改的情况下，你的提交状态可能仍然存在，当用户返回到上一个屏幕时，仍然会看到**“帖子已成功更新”**消息。这并不理想。显然，我们的目的不是永远保留这个突变状态，对吧？！

使用突变键

希望并假设，最简单的方法是你的突变库支持一种键控机制，当键改变时，允许你的突变状态被重置。

tsx

const routeApi = getRouteApi('/room/$roomId/chat')

function ChatRoom() {
  const { roomId } = routeApi.useParams()

  const sendMessageMutation = useCoolMutation({
    fn: sendMessage,
    // Clear the mutation state when the roomId changes
    // including any submission state
    key: ['sendMessage', roomId],
  })

  // Fire off a bunch of messages
  const test = () => {
    sendMessageMutation.mutate({ roomId, message: 'Hello!' })
    sendMessageMutation.mutate({ roomId, message: 'How are you?' })
    sendMessageMutation.mutate({ roomId, message: 'Goodbye!' })
  }

  return (
    <>
      {sendMessageMutation.submissions.map((submission) => {
        return (
          <div>
            <div>{submission.status}</div>
            <div>{submission.message}</div>
          </div>
        )
      })}
    </>
  )
}

const routeApi = getRouteApi('/room/$roomId/chat')

function ChatRoom() {
  const { roomId } = routeApi.useParams()

  const sendMessageMutation = useCoolMutation({
    fn: sendMessage,
    // Clear the mutation state when the roomId changes
    // including any submission state
    key: ['sendMessage', roomId],
  })

  // Fire off a bunch of messages
  const test = () => {
    sendMessageMutation.mutate({ roomId, message: 'Hello!' })
    sendMessageMutation.mutate({ roomId, message: 'How are you?' })
    sendMessageMutation.mutate({ roomId, message: 'Goodbye!' })
  }

  return (
    <>
      {sendMessageMutation.submissions.map((submission) => {
        return (
          <div>
            <div>{submission.status}</div>
            <div>{submission.message}</div>
          </div>
        )
      })}
    </>
  )
}

使用 router.subscribe 方法

对于没有键控机制的库，我们可能需要在用户离开屏幕时手动重置突变状态。为了解决这个问题，我们可以使用 TanStack Router 的 invalidate 和 subscribe 方法，在用户不再需要时清除突变状态。

router.subscribe 方法是一个函数，用于订阅回调到各种路由器事件。这里我们将特别使用的事件是 onResolved 事件。重要的是要理解，当位置路径_改变（不仅仅是重新加载）并最终解析_时，此事件会触发。

这是重置旧突变状态的好地方。这是一个例子：

tsx

const router = createRouter()
const coolMutationCache = createCoolMutationCache()

const unsubscribeFn = router.subscribe('onResolved', () => {
  // Reset mutation states when the route changes
  coolMutationCache.clear()
})

const router = createRouter()
const coolMutationCache = createCoolMutationCache()

const unsubscribeFn = router.subscribe('onResolved', () => {
  // Reset mutation states when the route changes
  coolMutationCache.clear()
})

数据修改

突变后使 TanStack Router 失效

长期突变状态

使用突变键

使用 router.subscribe 方法

订阅 Bytes

订阅 Bytes