如何实现Redux Toolkit RTK Query useMutation缓存不随组件卸载清除

官方文档说明：'Subscribes' the component to keep cached data in the store, and 'unsubscribes' when the component unmounts

默认情况下useMutation的状态绑定到调用它的组件实例，组件卸载后状态会被清理，和Query的全局缓存逻辑不同。你可以通过以下两种方案实现全局持久化的mutation状态，跨组件同步且不受组件卸载影响：

• 方案1：使用mutationKey配合全局缓存配置
  TanStack Query v4及以上版本支持为mutation设置mutationKey，同时在QueryClient的全局配置中开启mutation的缓存留存：

  1. 初始化QueryClient时设置mutation的缓存时间：

  const queryClient = new QueryClient({
    defaultOptions: {
      mutations: {
        // 单位为毫秒，设置为Infinity即可永久留存缓存
        cacheTime: Infinity
      }
    }
  })
  

  2. 所有需要共享同一份mutation状态的组件，调用useMutation时传入相同的mutationKey：

  const { data, mutate } = useMutation({
    mutationKey: ['your-custom-mutation-key'],
    mutationFn: yourMutationApi
  })
  

  只要mutationKey一致，所有组件都会共享同一份mutation状态，即使有组件卸载，只要cacheTime未过期，缓存就不会被清理，其余组件依然可以读取完整状态。

• 方案2：封装全局复用的自定义Hook
  如果你使用的是不支持mutationKey的低版本，可以把useMutation的调用封装到一个自定义Hook，确保所有组件复用同一个mutation实例：

  // 全局仅初始化一次mutation实例
  const useGlobalMutation = () => {
    return useMutation({
      mutationFn: yourMutationApi
    })
  }
  

  所有组件都调用该自定义Hook获取mutation实例，即可实现状态跨组件同步。

如果需要在mutation执行完成后更新关联的query缓存，可在mutation的onSuccess回调中调用queryClient.setQueryData手动更新对应query的缓存，和现有query的同步逻辑保持一致。

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