All topics

Best practice to chain API calls

benjabievres

1 month ago
Hello,

I have a select element filled from a API Call 1.
When I choose an item in this select element, I call an API 2 and fill a second select element.
And when I select an item from the second select element, it calls an API 3; results are displayed in a List.

So far, it works fine, I leverage the « Changed » trigger of each select element. But I have some issues:

- each select elements refreshed the change event of the other element show the last item of the resulting API calls => how could I ensure the first element is displayed first?

- when I select another item in the first select element, API call 1 refreshes the second select element. But the list is not refreshed => shall I use a different event than « changed » in the second select element?

Do you have any best practice to handle chained elements that leverage API Call?

Thanks
Tom Ireland

1 month ago
Thanks for the thorough detail. Would you be able to share a short video of it in action - it's easier to visualise this way and - fingers crossed - we might be able to point you in the right direction. 👍
👍1
NoCode ProCode

1 month ago
Why not do that on the backend?
👍1
benjabievres

1 month ago
@Tom Ireland I will record a video asap 😊. @NoCode ProCode what do you mean? So far, I built 3 endpoints; 1 that returns the list of TV Series (it's my personal TVSeries check-list), one that returns the list of Seasons (receiving the selected Series ID), and one that returns the list of Episodes (receiving the selected Season ID). The first one is called on Page Load, the second one is called when there is a change in Select 1, the third one is called when there is a change in Select 2. Is there a better way to implement this type of user experience?
@benjabievres
@Tom Ireland I will record a video asap 😊. @NoCode ProCode what do you mean? So far, I built 3 endpoints; 1 that returns the list of TV Series (it's my personal TVSeries check-list), one that returns the list of Seasons (receiving the selected Series ID), and one that returns the list of Episodes (receiving the selected Season ID). The first one is called on Page Load, the second one is called when there is a change in Select 1, the third one is called when there is a change in Select 2. Is there a better way to implement this type of user experience?
Tom Ireland

1 month ago
Awesome. For your first call, you could also just use auto fetch with your API. That way you get SSR. It won't help the main problem but will be helpful for that first call and also avoid page flash. Look forward to seeing your video. 👍
👍1
benjabievres

1 month ago
@Tom Ireland Thanks! Waht does SSR mean?
@benjabievres
@Tom Ireland Thanks! Waht does SSR mean?
Tom Ireland

1 month ago
Sorry. Server-Side Rendering
Tom Ireland

1 month ago
Any auto fetch API (usually GET requests) can have the option to be rendered server-side, which means that you're not waiting for content to load like when using the on load event client-side i.e. in the browser. This removes page flash issues where you see some elements loaded before others when updating elements with results from an API.
😍1
Your first call (assuming it's a GET request) could be set to auto fetch, which is a nicer user experience.
benjabievres

1 month ago
That's super interesting! Didn't know that! Very valuable tip @Tom Ireland !
👍1
@benjabievres
That's super interesting! Didn't know that! Very valuable tip @Tom Ireland !
Tom Ireland

1 month ago
Indeed. Check out https://toddle.dev/docs/Advanced%20API%20features
😍1
benjabievres

1 month ago
@Tom Ireland here is the loom video where I try to explain what I want to achieve. Whenever you have time, can you please have a look and let me know what I could do? Thanks! https://www.loom.com/share/bdf576ce3fa243489c039516da0361de?sid=e8f134f7-5351-4095-9e9e-811d615cf08c
benjabievres

1 month ago
Oh damn... I think I can't use SSR in my case, because the call requires another header that I pick from Session storage. Is there a way to pass a few variables to the Toddle Server like for the Access_Token?
benjabievres

1 month ago
Or maybe I will do it differently. So far, I'm trying to handle multiple sessions, creating a new session_id and access_token everytime the user logs in. The session_id is used to retrieve the corresponding access_token and compare it to the Authorization header... I do this because I want to hash the access_token so that nobody can see it in the database (So I hash "session_id+access_token"). But maybe it's too complicated and I should just store the access_token as-is and assume that only Admins can have access to the database...
@benjabievres
@Tom Ireland here is the loom video where I try to explain what I want to achieve. Whenever you have time, can you please have a look and let me know what I could do? Thanks! https://www.loom.com/share/bdf576ce3fa243489c039516da0361de?sid=e8f134f7-5351-4095-9e9e-811d615cf08c
Tom Ireland

1 month ago
Thanks for sharing the video.

It sounds like the season selection is being populated only when the season dropdown is selected, so you'd need to populate your results based on the first selection to get an initial list. For example, on success of first API call, have the results display everything in the series first. Then the series selection should update the rendered list and the season dropdown should continue to work as you have it now.

I think it's just the order of event. So, I'd do:

1. On load, get all series and populate element list of results based on API results returned.
2. On series selection, populate element list of results that would show all seasons in the series and populate the seasons dropdown number.
3. Upon selection of the season, populate the list (as you're doing now).

To start the season drop down from one, I'm not sure how the dropdown is configured but it may just be a case of using front end logic in toddle to get the first item in the array instead of the last one.
Tom Ireland

1 month ago
Also, I'm not sure when getting all series if that returns all seasons as well. If it does, you could - theoretically - make one API call to get everything and then just use front end filter formula to filter the list on the results from that one call. Saves making more requests if you already have the all the data. That's off the top of my head, so might be more complicated than that. 🫣
benjabievres

1 month ago
Thanks a lot @Tom Ireland ! I will have a closer look at your comment asap. Apparently, my "season" select box is refreshed when I selected a Series, which is fine. I should try and return everything and use filters yes; I will try this as well 🙂
@benjabievres
Thanks a lot @Tom Ireland ! I will have a closer look at your comment asap. Apparently, my "season" select box is refreshed when I selected a Series, which is fine. I should try and return everything and use filters yes; I will try this as well 🙂
Tom Ireland

1 month ago
No problem. On the face of it, you just need a couple of adjustments. Hard to always advise when not working with it directly to understand how everything has been set up, so I hope my comments are useful. Good luck and keep us posted. 🙂
💜1
benjabievres

1 month ago
Yes I totally understand what you mean @Tom Ireland. Same for me when I try to help in the Make Community 😅
😅1
@benjabievres
@Tom Ireland here is the loom video where I try to explain what I want to achieve. Whenever you have time, can you please have a look and let me know what I could do? Thanks! https://www.loom.com/share/bdf576ce3fa243489c039516da0361de?sid=e8f134f7-5351-4095-9e9e-811d615cf08c
Lucas G

1 month ago
You can have the season dropdown default to 1 by setting the selected attribute on the <option> element
Weird that it doesn't do it by default though, seems to have somethign to do with the options being loaded from an API
The formula would be item equals to 1, specifying whether it is a number or string
Lucas G

1 month ago
If you want to clear the results box, use a variable instead of showing API results directly and clear that variable any time the option "Select a series" is chosen for example
And for the season dropdown, give it a default option of "No series selected" so it doesn't show null when there's no option
benjabievres

1 month ago
Hey @Lucas G and @Tom Ireland I mixed all your recommandations, and I managed to make it work the way I want 🙂
benjabievres

1 month ago
I added a static option to the Season dropdown. I added a selected attribute to this new option (to 0) (it defaults correctly now). And I now store the output of "Get Episodes" to a variable, which I use in my list, and that I put to an empty array when another series is selected. Thanks a lot!!
👍1
🙌1
@benjabievres
Hey @Lucas G and @Tom Ireland I mixed all your recommandations, and I managed to make it work the way I want 🙂
Tom Ireland

1 month ago
Great to hear you managed to get it working the way you wanted to. Good luck on your project. 🙂
👍1

Best practice to chain API calls

benjabievres

Tom Ireland

NoCode ProCode

benjabievres

Tom Ireland

benjabievres

Tom Ireland

Tom Ireland

benjabievres

Tom Ireland

benjabievres

benjabievres

benjabievres

Tom Ireland

Tom Ireland

benjabievres

Tom Ireland

benjabievres

Lucas G

Lucas G

benjabievres

benjabievres

Tom Ireland

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community