useQuery hook didn't update on response - reactjs

Question

I'm try to return user to previous step after some updates on backend via 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
};
};
but there is problem with refetch call,
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]);
so my question is why refetchData didn't update and why this useEffect hook didn't call?
My useCheckinOrder hook looks like:
export const useCheckinOrder = (
orderId: string,
options?: QueryHookOptions<GetCheckinOrder, GetCheckinOrderVariables>
) => {
return useQuery<GetCheckinOrder, GetCheckinOrderVariables>(CheckinOrderQuery.GetCheckinOrder, {
variables: {
id: orderId,
...options.variables
},
...options
});
};
there is what console print:
starting to unlock
order unlocked, refetch

Answer 1

The default fetchPolicy of apollo client is cache-first which means it does not perform a network request if the data is in the cache (see: https://www.apollographql.com/docs/tutorial/queries/#customizing-the-fetch-policy)
Try changing the fetchPolicy to cache-and-network