useQuery 钩子没有更新响应答案

【问题标题】：useQuery hook didn't update on responseuseQuery 钩子没有更新响应
【发布时间】：2020-08-05 02:47:09
【问题描述】：

在通过 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
    };
};

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

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

【问题讨论】：

标签： reactjs react-hooks react-apollo

【解决方案1】：

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

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

【讨论】：