Preferred method for fetching remote data

nathandh · 2024-08-27T02:29:53.092+00:00

Say I want to click a button, perform a GET request, and replace the content of static elements on screen: heading, paragraph, image. What's the preferred method of doing this?What works is to:1. assign a click event to button2. perform the request3. Set the returned data to a variable4. Bind the static content props to the content of the variable, such that as it's updated (on click) the content updatesThis works, but I'm wondering if there's another / better way? Is "storing remote data in a variable and binding to content" the preferred "toddle" way?

nathandh
1 year ago
Say I want to click a button, perform a GET request, and replace the content of static elements on screen: heading, paragraph, image. What's the preferred method of doing this?

What works is to:

1. assign a click event to button
2. perform the request
3. Set the returned data to a variable
4. Bind the static content props to the content of the variable, such that as it's updated (on click) the content updates

This works, but I'm wondering if there's another / better way? Is "storing remote data in a variable and binding to content" the preferred "toddle" way?
Tom Ireland
1 year ago
That's a decent way to handle it and the approach I'd normally take. Alternatively, you could try using Default to in cases where you're just using the API call, which would allow you to default to the static value if the API has not been called. I tend to lean towards using a variable but Andreas' video on variables is now making me think about this stuff a bit more. 😄

https://youtu.be/xzVZNZW1xiQ
nathandh
1 year ago
If I'm understanding you correctly, I bind the static content to the returned API data which, if it hasn't been called yet, can default to static content and forgo a variable entirely? That's magical

Preferred method for fetching remote data

nathandh

Tom Ireland

nathandh