Я пытаюсь создать небольшой виджет с некоторыми входами и карточками, которые содержат данные, которые пересчитываются в бэкэнд с использованием 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()
, так что я уверен, что всегда получаю самые новые данные, что сейчас не так.