Refetch data authomatically even if dependency is not changed

Viewed 36

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

  1. I expect to have charterId
  2. If charterId, I request charter by charterId using useCharterByIdQuery
  3. 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:

  1. We get a charter for the first time. It has payments: ["paymentid1", "paymentid2"]
  2. 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?

0 Answers
Related