How to use the response of one api call as a parameter to another api call? React-query

Question

I have a call to an api that returns some data and displays it in a table. Each row contains an icon that when clicking on it, it must make another call passing it as parameters 2 data from the response of the first call. Depending on the row, the data to be passed as parameters are different.

First call

const {data: eventReconciliationList, refetch, isError, isLoading, isFetching} = useQuery({
    queryKey: [
      "eventReconciliation",
      filters.value.page,
      filters.value.size,
      filters.value.sort,
    ],
    queryFn: () => getEventReconciliationService(
      mapEventReconciliation(
        filters.value
      )
    ),
    enabled: enabled.value

  });

const mapTollingResponseToRows = (rows: TGetEventReconciliation[] | undefined) => {
    return rows?.map((row: TGetEventReconciliation, index: number) => {
const icons =
row.codBillingEvent && (
            <Icons alt="search" className="cursor-pointer" height={18} icon="icon-search" onClick={() => {
              controller.goViewTripEvents();
              console.log(viewEventDetails);
              search();
            }} />
(the response returns more data, but I only want to show this data)
return {
        index,
        codInvoicingEvent: String(row.codInvoicingEvent),
        datOccurrence: row.datOccurrence,
icons: icons,
      };
});
  };

Second call

(this should be taken from the other caller's response)

const values: TViewEventDetails = {
  codInvoicingEvent: 202401000000016955n,
  codInvEventType: 3
};

const useGetViewEventDetails = () => {
  const {data: viewEventDetails, refetch} = useQuery({
    queryKey: ["viewEventDetails"],
    queryFn: () => getViewEventDetails(values.codInvoicingEvent, values.codInvEventType),
    enabled: true
  });

Answer 1

as mentioned in the comments you can solve this by using react state and effect hooks.

example solution:

import { useState, useEffect } from 'react';

// Define a state variable to hold parameters for the second API call
const [viewEventDetailsParams, setViewEventDetailsParams] = useState({
  codInvoicingEvent: null,
  codInvEventType: null
});

// Modify the click handler of the icon to update the state with parameters
const handleIconClick = (codInvoicingEvent, codInvEventType) => {
  setViewEventDetailsParams({
    codInvoicingEvent,
    codInvEventType
  });
  // Optionally, you can navigate or perform any other action here
  controller.goViewTripEvents();
};

// Trigger the second API call with the updated parameters
useEffect(() => {
  if (viewEventDetailsParams.codInvoicingEvent && viewEventDetailsParams.codInvEventType) {
    refetch(); // Assuming refetch is a function provided by useQuery to trigger the query again
    // Optionally, you can pass viewEventDetailsParams.codInvoicingEvent and viewEventDetailsParams.codInvEventType to the second API call
    // This should be handled by your useGetViewEventDetails hook
  }
}, [viewEventDetailsParams]);