Tanstack Query：如何监测mutation中installedBuckets数据的变化？

针对你通过mutation手动更新installedBuckets缓存的场景，以下几种方式可以实现类似isLoading的状态标识：

1. 复用mutation的isMutating状态 #

因为installedBuckets的缓存更新是在mutation的onSuccess阶段执行的，整个卸载操作+缓存更新的周期刚好和isMutating的状态周期完全匹配。直接在组件中关联两个Hook的状态即可：

// 组件内使用
const { buckets, isLoading } = useInstalledBuckets();
const { mutate, isMutating } = useUninstallBucket();

// isMutating为true时，代表正在执行卸载并更新installedBuckets缓存
const isInstalledBucketsUpdating = isMutating;

这种方式无需修改现有Hook代码，简单高效，适合大部分场景。

2. 改用invalidateQueries触发自动重取，利用isRefetching状态 #

如果希望缓存更新时和后端数据保持强一致，可以替换手动setQueryData为invalidateQueries，让React Query自动重新拉取installedBuckets数据，此时可以使用useQuery提供的isRefetching状态标识更新过程：

修改mutation代码： #

const useUninstallBucket = () => {
  const queryClient = useQueryClient();
  const { mutate, isLoading: isMutating } = useMutation({
    mutationFn: (bucketName: string) => uninstallBucket(bucketName),
    onSuccess(bucket) {
      queryClient.setQueryData(["availableBuckets"], (buckets: any) => [
        ...buckets,
        bucket,
      ]);
      // 替换setQueryData，触发自动重取
      queryClient.invalidateQueries(["installedBuckets"]);
    },
  });
  return { mutate, isMutating };
};

修改query代码： #

const useInstalledBuckets = () => {
  const {
    isLoading,
    isRefetching, // 新增：标识正在重取数据
    data: buckets,
    error,
  } = useQuery(["installedBuckets"], getInstalledBuckets);
  return { isLoading, isRefetching, buckets, error };
};

在组件中，isRefetching会在缓存更新（重取）阶段变为true，适合需要确保数据最新的场景。

3. 自定义缓存更新状态（细粒度控制） #

如果需要精准控制缓存更新的状态时机（比如只在修改installedBuckets缓存的过程中标记为更新中），可以自行维护一个状态变量：

修改mutation代码： #

import { useState } from 'react';

const useUninstallBucket = () => {
  const queryClient = useQueryClient();
  const [isUpdatingInstalled, setIsUpdatingInstalled] = useState(false);
  
  const { mutate, isLoading: isMutating } = useMutation({
    mutationFn: (bucketName: string) => uninstallBucket(bucketName),
    // 开始执行mutation时标记为更新中
    onMutate() {
      setIsUpdatingInstalled(true);
    },
    onSuccess(bucket) {
      queryClient.setQueryData(["availableBuckets"], (buckets: any) => [
        ...buckets,
        bucket,
      ]);
      queryClient.setQueryData(["installedBuckets"], (buckets: any) => [
        ...buckets.filter((b: string) => b !== bucket),
      ]);
      // 缓存更新完成后取消标记
      setIsUpdatingInstalled(false);
    },
    // 失败时也要取消标记，避免状态异常
    onError() {
      setIsUpdatingInstalled(false);
    },
  });
  
  return { mutate, isMutating, isUpdatingInstalled };
};

在组件中直接使用isUpdatingInstalled即可标识installedBuckets的缓存更新状态，这种方式灵活性最高。

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