React Query执行Mutation后无法自动失效查询的问题求助

问题分析 #

转账操作后，你仅失效了["account"]查询键，但交易记录（["transactions"]）的缓存也需同步更新；同时useTransactions的查询键未关联具体账户ID，导致缓存匹配不精准，另外模块初始化时获取的账户ID可能不是实时最新值，这些因素共同导致了数据无法自动更新。

解决方案 #

1. 同时失效账户与交易记录的查询 #

在转账成功的onSuccess回调中，同时触发["account"]和["transactions"]的查询失效，确保两类数据的缓存都被更新：

onSuccess: async () => {
  await queryClient.invalidateQueries({ queryKey: ["account"] });
  await queryClient.invalidateQueries({ queryKey: ["transactions"] });
  setTransactionSuccess(true);
},

2. 修复useTransactions的查询键，绑定账户ID #

当前useTransactions的查询键为固定值["transactions"]，无法关联具体账户，修改为包含accountId的查询键，确保缓存与账户绑定，且能精准触发失效：

export const useTransactions = (accountData) => {
  const accountId = accountData?.map((acc) => acc.accountId).at(0);
  
  const {
    isPending: isLoadingTransactions,
    data: transactionsData,
    error: errorTransactions,
  } = useQuery({
    // 将accountId加入查询键，关联具体账户的交易缓存
    queryKey: ["transactions", accountId],
    queryFn: () => fetchTransactions(accountId),
    // 当accountId不存在时暂停查询，避免无效请求
    enabled: !!accountId,
  });

  return { isLoadingTransactions, transactionsData, errorTransactions };
};

同步修改fetchTransactions函数，直接接收accountId参数：

const fetchTransactions = async (accountId) => {
  const { data, error } = await supabase
    .from("transactions")
    .select("*")
    .eq("accountId", accountId);

  if (error) {
    throw new Error(error.message);
  }
  return data;
};

3. 确保账户/客户ID实时获取 #

模块顶部的accountIdInfoData和customerIdInfoData是在模块加载时执行的，若这些值是动态变化的（比如登录后更新），会导致查询使用旧值。将获取逻辑移到fetch函数内部，每次查询都获取最新值：

const fetchCustomerData = async () => {
  // 每次查询时获取最新的customerId
  const customerIdInfoData = customerIdInfo();
  const { data, error } = await supabase
    .from("customers")
    .select("*")
    .eq("customerId", customerIdInfoData);
  if (error) {
    throw new Error(error.message);
  }
  return data;
};

const fetchAccountData = async () => {
  // 每次查询时获取最新的accountId
  const accountIdInfoData = accountIdInfo();
  const { data, error } = await supabase
    .from("accounts")
    .select("*")
    .eq("accountId", accountIdInfoData);
  if (error) {
    throw new Error(error.message);
  }
  return data;
};

验证 #

完成以上修改后，转账成功后React Query会自动失效account和transactions的缓存，触发重新查询，页面数据会实时更新，无需手动操作或重启浏览器。

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