处理依赖的反应查询

Question

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

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

你走在正确的道路上。

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

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

Answer 2

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

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),
  );

处理依赖的反应查询

Handling dependent react queries

javascript

react-query