2

我正在尝试构建一个带有一些输入和卡片的小部件,这些输入和卡片包含在后端使用react和重新计算的数据apollo。卡片包含一个加载程序以指示请求正在进行中。

每当我更改输入时,我想触发对后端的请求,这需要很长时间(由于计算) - 大约 30 秒。

当您输入数据时 - 突变是通过一个 apollo 客户端触发的,但随后它会触发对另一个 apollo 客户端的查询,这需要 30 秒左右。

在那个时候,可以再次更新输入——在​​这种情况下,我想取消之前的请求并触发一个新的请求。

这是查询

  const {
    data,
    loading,
    refetch,
    networkStatus,
  } = useCalculationQuery({
    widget_id: widgetId,
    skip: !isCalcTriggered,
  });

代码useCalculationQuery

function useCalculationQuery({ widget_id, skip }: Options = {}) {
  const { teamId } = ... ;

  const query = useQuery(QUERY_CALCULATION, {
    skip,
    fetchPolicy: 'network-only',
    variables: {
      team_id: teamId,
      widget_id,
    },
    client: apolloCalculations,
  });

  return query;
}

这是获取功能

  async function handleCalcFetch() {
    if (isCalcTriggered) {
      setIsFetchInProgress(true);
      await refetch();
      setIsFetchInProgress(false);
    }
    if (!isCalcTriggered) {
      setIsCalcTriggered(true);
    }
  }

如您所见 - 使用isCalcTriggered标志我跳过查询执行直到handleCalcFetch被调用。然后我设置了标志,并且在除第一次调用之外的所有其他调用中refetch

这些其他标志(isFetchInProgress用 设置setIsFetchInProgress)表示请求已到位,因为在调用 refetch 之后,networkStatus 总是7而不是4。那是第一个问题。

第二个问题是我想在每次点击时取消以前的请求refetch(),这样我就可以确定我总是得到最新的数据,但现在情况并非如此。

4

0 回答 0