在 apollo 中取消对 refetch 的查询

Question

我正在尝试构建一个带有一些输入和卡片的小部件，其中包含使用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;
}

这是获取 function

  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()时，我都想取消以前的请求，所以我确信我总是得到最新的数据，但现在情况并非如此。