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.

4. Disable the running on page load for the queries

For the 2 queries, from the Settings tab, set the Run API on page load option to false.

Reload the page: you are now sure that the page will display the first user and its manager!