数据突变

由于 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('/posts/$postId/edit')

function EditPost() {
  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('/posts/$postId/edit')

function EditPost() {
  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