处理依赖反应查询

Question

我在同一个组件中有两个响应查询

const { data: sdrData, status: sdrDataLoading } = useQuery(
    [queryInfo[0]?.dcsSysId, data[0]?.dcsStructSysId, data[cardIndex]?.dcsStructNodeId],
    () => getSDR(queryInfo[0]?.dcsSysId, data[0]?.dcsStructSysId, data[cardIndex]?.dcsStructNodeId),
  );



  const { isIdle, data: sdrTemplateData, status: sdrTemplateDataLoading } = useQuery(
    [sdrData[0]?.dcsSdrSysId, queryInfo[0]?.fldTemplateSysId],
    () =>
      SDRTemplateValues(sdrData[0]?.dcsSdrSysId, queryInfo[0]?.fldTemplateSysId, {
        // The query will not execute until the userId exists
        enabled: !!sdrData[0]?.dcsSdrSysId,
        retry: true,
      }),
  );

我的第二个查询取决于我需要访问sdrData[0] 以获取查询中的第一个参数的第一个查询，但是当我这样做时，查询最初是未定义的并且它失败了。有没有好的方法来处理这个。我看到你可以将它设置为一个变量，但我仍然面临同样的问题。

我需要一种方法来告诉第一个查询等到第二个查询完成后再尝试访问参数。我以为你可以像我一样设置enabled，但这也没有用。

Answer 1

我可以通过像这样将我需要的数据参数添加到参数数组的开头来解决这个问题。

const { data: sdrData, status: sdrDataLoading } = useQuery(
    queryInfo[0]?.dcsSysId && [
      queryInfo[0]?.dcsSysId,
      data[0]?.dcsStructSysId,
      data[cardIndex]?.dcsStructNodeId,
    ],
    () => getSDR(queryInfo[0]?.dcsSysId, data[0]?.dcsStructSysId, data[cardIndex]?.dcsStructNodeId),
  );

  const { data: sdrTemplateData, status: sdrTemplateDataLoading } = useQuery(
    sdrData?.[0]?.dcsSdrSysId && [sdrData?.[0]?.dcsSdrSysId, queryInfo[0]?.fldTemplateSysId],
    () => SDRTemplateValues(sdrData?.[0]?.dcsSdrSysId, queryInfo[0]?.fldTemplateSysId),
  );

Answer 2

你在正确的道路上。

您只需要检查sdrData 是否未定义。您正在尝试访问第一个元素 (sdrData[0])，但最初它是未定义的。

...
{
  enabled: !!(sdrData && sdrData[0]?.dcsSdrSysId
}
...