Return updated query from store

[sapiens-shahbaz-khan]

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

loadMainLineProductsForDashboard(email, pagination) {
      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

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 I am working on, I won't be able to use async-await approach specifically. There are lot of actions in the store and the HOC uses setQuery on dynamic action names (unlike I mentioned above).

@jesse-savary or anyone please help. Thanks!

[beepsoft]

Hi @sapiens-shahbaz-khan,

there seem to be some confusing things in your example. For example, at

query.then(({ first }) ...

do you mean

firstQuery.then(({ first }) ...

?

Then in line

setQuery(store.fetchAction);

is the store.fetchAction is actually passing loadMainLineProductsForDashboard or somehow it results in calling that function, right?

Anyways, although the docs state that you cannot use async actions and should use generators instead, this is not actually true if you do your async logic carefully.

What you cannot do in an async actions is that you cannot set a property directly in the action, eg.

  .actions((self) => ({
    doesNotWork: async () => {
      const newSlug = await longRunningTask();
      self.slug = newSlug;
    },
  })

You cannot set slug like this directly self.slug = newSlug;. However you can create a setter for the slug and call that:

.actions((self) => ({
    doesNotWork: async () => {
      const newSlug = await longRunningTask();
      self.slug = newSlug;
    },
    works: async () => {
      const newSlug = await longRunningTask();
      // Using an action is the key to making this work.
      self.setSlug(newSlug);
    },
    // This action will work, even if it's called from an async function.
    setSlug(s) {
      self.slug = s;
    },
  })

I copied the examples from here and you can find more explanation here as well:

https://coolsoftware.dev/blog/write-async-await-with-mobx-state-tree/

Would this kind of async action trick help with your issue?