Question

在尝试通过useQuery apollo挂钩对后端进行一些更新后，我尝试将用户返回到上一步

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
    };
};

但是refetch调用存在问题

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
    });
};

有什么控制台打印：开始解锁订单已解锁，请重新获取

Answer 1

阿波罗客户端的默认fetchPolicy为cache-first，这意味着如果数据在缓存中，则它不会执行网络请求（请参阅：https://www.apollographql.com/docs/tutorial/queries/#customizing-the-fetch-policy）

尝试将fetchPolicy更改为cache-and-network

useQuery挂钩未响应时更新

1 个答案: