Query Inter Dependencies

Hello,

I am trying to achieve something similar to

My entity is like
Entity A has EntityB-Id, EntityC-Id and EntityD-Id
{
a_id,
b_id,
c_id, //dependent on b_id
d_id //dependent on b_id
}

I have a form for filling up values. I am trying to load EntityA by id (from query param). The list of values of EntityB is from another API. In the form, I have JS Object function which loads list of values for C and D in separate queries, and this js object function is triggered onOptionChange for EntityB. There is a drop down for EntityC and EntityD as well and the values of which is dependent on a field of b_id which is selected.

I am using the same form for create / edit, just passing via the store.
In create mode everything is working fine.

The query url for loading list of Bs looks like

/v1/getAllBs

The query url for loading C/D looks like

/v1/getAllCsFor/{{ModifyForm.formData.selectB || GetA.data.b_id}}

Run API on Page load is true for all the APIs.

 I am expecting to create a dependency between queries, where C/D list is reloaded on change of value for selectB by user or when editing A, loadAllBs and if b_id is already set in A, then load the values for C/D and select the right option based on if c_id and d_id is set in A.

 For selectB, the default value is {{sourceData.b_id}}.

 For selectC, the default value is {{sourceData.c_id}}
 For selectD, the default value is {{sourceData.d_id}}

Okay, so here is what you do -

  1. Run the queries for C/D when onOptionChange for B and onChange for A b_id
  2. Probably have to use Async/Await to make sure that the values being used for fetching C/D are the most recent. How do I use Async/Await in Javascript?

Thanks for the reply Pranav

I had gotten the on change to work for C/D onOptionChange for B.
How do I do it specifically on A.b_id ? Since A is the base/sourceData for the json form

  1. The problem i see is that the b_id is going out as null in the below path, even though there is b_id present in GetA.data. Since I want the priority to be the select field in the form and fallback to what was loaded in GetA.data.

/v1/getAllCsFor/{{ModifyForm.formData.selectB || GetA.data.b_id}}

I do not have a specific way to use async await since, the object function is being called onOptionChange and in the method, im calling run on GetC