Can I connect an API to a component and drop that component where I need to use the API?

rodnaska · 2024-08-01T11:40:28.93+00:00

Hi all! A beginner at Toddle (but running a gold partner Bubble agency and familiar with a lot of other tools). I am trying to see what is the best way to handle connecting APIs in a modular way. Is it possible to create components that hold API calls and then drop those components everywhere where I need to use their endpoints?

rodnaska
1 year ago
Hi all! A beginner at Toddle (but running a gold partner Bubble agency and familiar with a lot of other tools). I am trying to see what is the best way to handle connecting APIs in a modular way. Is it possible to create components that hold API calls and then drop those components everywhere where I need to use their endpoints?
✅1
@rodnaska
Hi all! A beginner at Toddle (but running a gold partner Bubble agency and familiar with a lot of other tools). I am trying to see what is the best way to handle connecting APIs in a modular way. Is it possible to create components that hold API calls and then drop those components everywhere where I need to use their endpoints?
Lucas G
1 year ago
It’s possible, yes.
rodnaska
1 year ago
I have been trying to find an example of this being used - any guidance/links/directions would be extremely appreciated! 🙏
Lucas G
1 year ago
Depending on the call or how you want to use it, you might also combine it with “Contexts”
For example if the component is a parent of another one, the child can subscribe to the context and access its data
Handy if you want to reuse it down multiple levels
That way you only need to make the call once and still be able to pass the data without chaining a bunch of component attributes/events
rodnaska
1 year ago
The specific use case I am trying to solve for is having one component that holds my API call to get all teh navigation items from Xano. Depending on the placement of that component I want to only grab what should be in the header/footer/mobile bar/etc by dynamically feeding the component the right input.

Is there an example of a similar approach somewhere that I can explore?
rodnaska
1 year ago
This is already super helpful btw, will probably be able to figure it out with this info even if there are no examples to share – thanks!!! @Lucas G
Lucas G
1 year ago
Some of us use “wrapper” components in some similar ways
Sounds like you could maybe do an empty component with a slot element that houses your app
And child components can receive the appropriate data
🙏1

Can I connect an API to a component and drop that component where I need to use the API?

rodnaska

Lucas G

rodnaska

Lucas G

rodnaska

rodnaska

Lucas G