Below is my scenario that I want achieve in an action in the root store:

1. Call API-1 and get the list
2. Send ids map from the list to API-2 and fetch the data
3. Data from API-2 needs to be mapped to the data received from API-1
4. Return the final query with the newly formed data

Action in the store

loadListForDashboard() {
      const firstQuery = self.queryFirst(
        {
          context: {
            locale: getLanguage().id,
          },
        },
        FIRST_QUERY_STRING,
      );
      query.then(({ first }) => {
           const secondQuery = self.querySecond(
          {
            ids: first.list.map( p => p.id),
          },
          SECOND_QUERY_STRING,
        );
        secondQuery.then(({ second }) => {
         const newData = getNewData(first?.data, second?.data);
          **return {...firstQuery, data: newData};**
        })
      })
      return null;   // return firstQuery;
    },

In my HOC I use useQuery hook to get the data like this :

const { data, loading, setQuery } = useQuery();
// in an useEffect call with setQuery
setQuery(store.fetchAction);

Issue I face is, the query I am trying to return from the then block of secondQuery is never observed by the useQuery hook.
If we return the firstQuery instead of null, only the firstQuery gets observed in the HOC and I receive the initial data but could not get the newly formed data.

How can I make use of the useQuery hook to observe the queries returned from the then block within the action in the store.

I haven’t found any solutions. since its a generic part in the codebase I need a solution using the useQuery hook. I have tried creating a Promise helper that uses async-await, but with that approach I am not able to use the useQuery hook, and if I don’t then I would need to maintain additional state for loading and error in the data provider HOC.

Thanks!