我正在尝试构建一个带有一些输入和卡片的小部件,这些输入和卡片包含在后端使用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()
,这样我就可以确定我总是得到最新的数据,但现在情况并非如此。