I've implement two queries that expect to run one after another.
const {
refetch: getCharter,
data: charter,
isSuccess: isCharter,
isFetching: isCharterLoading,
} = useCharterByIdQuery(charterId, { skip: !charterId });
const {
data: payments = [],
isFetching: isPaymentsLoading,
} = usePaymentsByIdsQuery(charter?.payments, { skip: !isCharter });
- I expect to have charterId
- If charterId, I request charter by charterId using useCharterByIdQuery
- If I receive charter successfully, I request its payments using usePaymentsByIdsQuery
P.S. charter.payments looks like array of strings.
The code works perfectly when I open the page. The problem relates to refetch. I need to refetch charter and its payments when editMode or status changed.
useEffect(() => {
getCharter();
}, [isEdit, status]);
In this case charter is refetched but payments isn't. I found the problem. Payments is not refetched, because refetched charter has the same array of payments. The logic is the following:
- We get a charter for the first time. It has payments: ["paymentid1", "paymentid2"]
- We refetch the charter when edit mode changed. Refetched charter has the same payments: ["paymentid1", "paymentid2"]. Actual result: no request for payments because they are the same Expected result: I need to request payments in any case, when charter is requested.
How can I fix this?