Query API, use values returned to query a second API

💬 Queries and Resources
1

Hi Folks

Goal: Display API results in a mobile app listcollection. For each row returned, use one of the values in another API call and return a value from that second API call along with some data from the first API

Steps:

  • Query API#1 (GET qGetInspectionsDue) for a list of inspections due (demo is limited three, live feed could have up to 50)
  • Display returned values in listcollection
  • Take item.equipment.id from API#1 and pass that through API#2 (GET qGetItemDetails)
    like this: http://apiquery.com/endpoint/item/{{item.equipment.id}}/
  • Take the name value returned by API#2 and display in the listcollection as well.

I've played with the magic i, tried setting a variable for each row loaded and passing that to API#2, Tried (and failed) to dig into additional scopes and using map.

Nearest I've got to is the image below but can't get my head around how I pass a usable variable into to the API path itself and get it to loop through each

image
image994×225 17.8 KB

Wondering if I'm heading the right way with this.

Also tried using a transformer in API#1 to call API#2, had a chat with the AI that indicated that using the map command would be the way forward, then trigger API#2, but again, stuck how I pass the ID into the API.

  • Screenshots:

image
image1636×741 86.6 KB

Edit:

looking at additional scopes again, these 'feels' like it should work...but it grumbles about "TypeError: qGetItemDetails.trigger is not a function"

ID: {{ item.id }}
Name: {{ 
qGetItemDetails.trigger({
  additionalScope: {
    itemid: item.id
  }
}) }}
Due {{ window.format_date(item.dateDue) }}

image

2

Hello there Charles, welcome to the forum!
I've had a similar issue with setting variables and looping them within a Retool Query resource to no avail. Also, when having to subsequently hit 2 different API endpoints, the event handling in Retool seems to not respect the order in which the events are configured inside a component.
What I found to be the best solution, although it may not be as pretty, is to perform all fetch functions inside a JavaScript code snippet.
Keep in mind: Triggering Retool resources within the same JS code did not work for me, and I had to fetch manually to every API endpoint using native JS.
If you have any questions, please let me know. Hope this helps!

1 Like
3

Have you considered using a workflow in your app as that has looping code blocks?

Something like this:

image
image3492×579 156 KB

Then import the workflow into your app and call it.

1 Like
4

Thanks for the responses.

@sidetool - glad it was not just me!

@ferret141 - no I had not....but I have now and now I've got it working! Many thanks.

1 Like
5

Glad to hear it, @Charles_McRobert!

Keep in mind that, while workflows are great, they do come with some inherent limitations. Of particular note - organizations on at least a Team plan are allocated a total of 5000 workflow runs every month, with each additional 5000 runs costing $75.

Depending on the number of active users, it's possible to hit that initial limit fairly quickly. You can easily track the number of runs you've used, though.

image
image1596×408 14.2 KB

Let me know if you have any follow up questions but, otherwise, happy building!

1 Like