How to handle query dependencies
Learn how to handle dependencies between queries.
-
Difficulty: intermediate
-
Estimated time: 10 minutes
If your application needs to run several API calls and some of them depend on the result of others, you may have issues with the order of execution of the API calls.
For example, if you want to get the list of users and display the manager of the first one in the list, you need to make two API calls:
-
One to get the list of users
-
One to get the manager of the first user (which takes the manager ID of the first user from the first API call as a parameter)
Note: make sure the first user has a manager. If not, choose another user.
Since you want to get this information on page load, you may have an issue if the second API call is executed before the first one is done.
To handle this kind of situation, let’s do the following.
1. Create the API requests
Go to the Queries
tab and create a first Bonita query that will fetch the users:
-
Name
: getUsers -
Method
: GET -
URL
: /bonita/API/identity/user -
Params
:-
Key
: p -
Value
: 0 -
Key
: c -
Value
: 20
-
-
Settings
:-
Run API on page load
: true
-
Next, create a second Bonita query to fetch the manager of the first user:
-
Name
: getManagerOfFirstUser -
Method
: GET -
URL
: /bonita/API/identity/user/{{getUsers.data[0].manager_id}} -
Settings
:-
Run API on page load
: true
-
2. Configure the interface
On the interface, drag and drop a Text widget and set its text to {{First user: {{getUsers.data[0].lastname}}}}
.
Then, drag and drop a second Text widget and set its text to {{Manager: {{getManagerOfFirstUser.data.lastname}}}}
.
Reload the page and if the second query is called first you should get an error: The action "getManagerOfFirstUser" has failed
.
To solve this (potential) issue, we will create a JS Object that will run the queries in the right order.
3. Create a JS object
Go to the JS
tab (between Queries
and UI
), create a new JS Object called “runQueries” and copy paste the following code:
export default {
runQueries: async () => {
await getUsers.run();
getManagerOfTheFirstUser.run();
}
}
The first query is called synchronously (await
keyword), and the second one is called only when the first one is done.
Now, from the Settings
tab, enable the Run on page load
option.