Хук useQuery не обновлялся при ответе - PullRequest
Новая
       21

Хук useQuery не обновлялся при ответе

0 голосов
/ 22 апреля 2020

Я пытаюсь вернуть пользователя на предыдущий шаг после некоторых обновлений в бэкэнде через useQuery apollo hook 

export const useOrderUnlock = () => {
    const [isLoading, setIsLoading] = useState(false);
    const isBlocked = useSelector(getCheckinIsBlockedForPayment);
    const orderId = useSelector(getCheckinOrderId);
    const dispatch = useDispatch();
    const { goToNextStep } = useSteps();
    const [resetOrderPaymentBlock, { loading: resetOrderPaymentLoading, data: resetOrderPaymentData }] = useMutation<
        ResetOrderPaymentBlock,
        ResetOrderPaymentBlockVariables
    >(ResetOrderPaymentBlockMutation.ResetOrderPaymentBlock);
    const { refetch, loading: refetchLoading, data: refetchData } = useCheckinOrder(orderId, {
        skip: true,
        variables: { id: orderId }
    });

    useEffect(() => {
        if (refetchLoading || resetOrderPaymentLoading) {
            setIsLoading(refetchLoading || resetOrderPaymentLoading);
        }
    }, [refetchLoading, resetOrderPaymentLoading]);

    useEffect(() => {
        console.log(refetchData, refetchLoading); //  <-- didn't call after on response

        if (refetchData?.CheckinOrder) {
            console.log('order refetched, fill and go to passengers');
            dispatch(fillCheckinOrder(refetchData.CheckinOrder));
            goToNextStep(CheckinStep.Passengers);
            console.log('go to passengers');
        }
    }, [refetchData, refetchLoading]);

    useEffect(() => {
        if (resetOrderPaymentData?.ResetOrderPaymentBlock) {
            console.log('order unlocked, refetch');
            refetch();
        }
    }, [resetOrderPaymentLoading, resetOrderPaymentData]);

    const unlock = useCallback(() => {
        if (isBlocked) {
            console.log('starting to unlock');
            resetOrderPaymentBlock({ variables: { id: orderId } });
        } else {
            goToNextStep(CheckinStep.Passengers);
            console.log('go to passengers');
        }
    }, [isBlocked]);

    return {
        unlock,
        isLoading
    };
};

, но есть проблема с вызовом повторного вызова, 

useEffect(() => {
    console.log(refetchData, refetchLoading); //  <-- didn't call after on response

    if (refetchData?.CheckinOrder) {
        console.log('order refetched, fill and go to passengers');
        dispatch(fillCheckinOrder(refetchData.CheckinOrder));
        goToNextStep(CheckinStep.Passengers);
        console.log('go to passengers');
    }
}, [refetchData, refetchLoading]);

, поэтому мой Вопрос в том, почему refetchData не обновлялся и почему этот хук useEffect не вызывался? Мой хук useCheckinOrder выглядит так: 

export const useCheckinOrder = (
    orderId: string,
    options?: QueryHookOptions<GetCheckinOrder, GetCheckinOrderVariables>
) => {
    return useQuery<GetCheckinOrder, GetCheckinOrderVariables>(CheckinOrderQuery.GetCheckinOrder, {
        variables: {
            id: orderId,
            ...options.variables
        },
        ...options
    });
};

есть какая консольная печать: начало разблокировки ордера разблокировано, повторное получение

1 Ответ

0 голосов
/ 22 апреля 2020

По умолчанию fetchPolicy клиента apollo равен cache-first, что означает, что он не выполняет сетевой запрос, если данные находятся в кэше (см .: https://www.apollographql.com/docs/tutorial/queries/#customizing -the-fetch-policy )

Попробуйте изменить fetchPolicy на cache-and-network

...