如何在refetch charter时强制重新请求payments（依赖未变更仍执行）

问题场景 #

现有两个需按顺序执行的RTK Query查询：

1. 先通过useCharterByIdQuery根据charterId获取主数据charter
2. 成功获取charter后，用usePaymentsByIdsQuery根据charter.payments数组获取关联支付数据

首次加载逻辑正常，但当isEdit或status变化时，调用getCharter()重请求主数据后，即使主数据的payments数组内容未变，也需要强制刷新关联的支付数据，原代码无法触发该重请求。

原核心代码：

const {
  refetch: getCharter,
  data: charter,
  isSuccess: isCharter,
  isFetching: isCharterLoading,
} = useCharterByIdQuery(charterId, { skip: !charterId });
const {
  data: payments = [],
  isFetching: isPaymentsLoading,
} = usePaymentsByIdsQuery(charter?.payments, { skip: !isCharter });

useEffect(() => {
  getCharter();
}, [isEdit, status]);

问题原因 #

RTK Query默认对查询参数做浅比较，仅当参数的引用或值发生变化时才会发起新请求。重请求返回的charter.payments数组与之前完全一致时，支付查询的参数未发生变化，因此不会触发重请求。

解决方案 #

方案一：手动触发关联查询重请求

直接获取支付查询的refetch函数，在主查询重请求完成后强制调用，确保支付数据同步刷新：

// 解构出支付查询的refetch函数
const {
  data: payments = [],
  isFetching: isPaymentsLoading,
  refetch: refetchPayments,
} = usePaymentsByIdsQuery(charter?.payments, { skip: !isCharter });

// 修改useEffect，保证主查询完成后再刷新支付数据
useEffect(() => {
  const refetchAll = async () => {
    await getCharter();
    // 强制刷新支付数据，不受参数变化限制
    refetchPayments();
  };
  refetchAll();
}, [isEdit, status, getCharter, refetchPayments]);

方案二：给关联查询添加刷新标识

将触发重请求的变量（isEdit/status）加入支付查询的参数中，让RTK Query识别到参数变化，自动触发重请求：

// 将原参数包装为包含刷新标识的数组
const {
  data: payments = [],
  isFetching: isPaymentsLoading,
} = usePaymentsByIdsQuery(
  // 把isEdit、status作为参数的一部分，确保变量变化时参数更新
  [charter?.payments, isEdit, status],
  { 
    skip: !isCharter,
    // 需在usePaymentsByIdsQuery的查询定义中处理包装后的参数，示例：
    // query: ([paymentIds, _, __]) => ({ url: '/payments', params: { ids: paymentIds } })
  }
);

// 原useEffect保持不变
useEffect(() => {
  getCharter();
}, [isEdit, status]);

方案对比 #

• 方案一更直接，无需修改查询定义，适合需要严格控制刷新顺序的场景。
• 方案二更贴合RTK Query的自动触发逻辑，但需调整查询的参数处理逻辑。

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