SWR库中useSWRMutation参数传递问题的分析与解决

问题背景

在使用SWR库的useSWRMutation钩子时，开发者可能会遇到一个常见问题：传递给trigger函数的参数在fetcher函数中无法正确接收。这个问题通常表现为参数变为undefined，导致后续操作无法正常执行。

问题现象

在自定义hook中，开发者定义了一个删除草图的useDeleteSketch钩子，期望通过trigger函数传递sketchId参数。然而在实际调用时，发现fetcher函数中的arg参数变成了undefined，导致TypeError错误。

问题分析

经过排查，发现问题源于一个中间件的使用。该中间件原本是为了实现对象序列化为字符串的功能，但在处理useSWRMutation时产生了副作用。中间件在请求过程中修改了参数传递的流程，导致fetcher函数无法正确接收到原始参数。

解决方案

解决这个问题的关键在于：

1. 移除影响参数传递的序列化中间件
2. 确保fetcher函数的参数结构正确

修改后的代码示例如下：

const useDeleteSketch = ({ workspaceId, onSuccess, onError }) => {
  const { translate } = useTranslation()

  return useSWRMutation(
    ['delete-sketchs'],
    async (url, { arg }) => {  // 注意这里的参数解构
      return await deleteSketch({ workspaceId, sketchId: arg })
    },
    {
      onSuccess: (data) => {
        if (onSuccess) onSuccess(data)
        toast.success(translate('delete_sketch_success'))
      },
      onError: (error) => {
        if (onError) onError(error)
        toast.error(translate('delete_sketch_error'))
      },
    }
  )
}

最佳实践

在使用useSWRMutation时，建议遵循以下原则：

1. 明确参数传递结构：fetcher函数的第二个参数是一个包含arg属性的对象
2. 避免使用可能干扰参数传递的中间件
3. 在自定义hook中保持参数传递的透明性
4. 必要时添加类型定义以确保类型安全

总结

SWR库的useSWRMutation提供了强大的数据变更能力，但在使用时需要注意其特殊的参数传递机制。通过理解其内部工作原理和避免不必要的中间件干扰，可以确保参数正确传递，实现预期的功能。这个问题也提醒我们，在使用任何中间件时都应该充分了解其可能带来的副作用。