APIs allow you to connect your toddle application to a backend. toddle works with any backend and has many advanced features, such as response streaming, custom redirect rules, and server fetching.
If you are new to working with APIs, check our blog post about REST APIs
Setting up a new API
To connect to a backend, you must create a new API. You can do this from the data panel on any page or component.
From the Panel, you can now paste in a URL for the backend you wish to call or select one of our default templates.
💡 If you are just starting out, try one of our demo APIs
In this case, we chose the Weather API demo template. This template creates an API in your current page or component.
Let's take a look at the different parts of the API panel:
① The method used for the request. You can use any standard HTTP method.
② The name of the API. New APIs will be given a default name, but you can always change it to something more meaningful to you
③ In the tabs section, you can configure the request to match the backend you call. You can set the base URL, path, and query parameters. To learn more, check out our guide to URLs here.
You can also set custom headers and the request body from the tabs section if the request method supports it. Learn more about setting the request body below.
④ At the bottom of the panel, you can see the latest response returned from the server. If the API is configured to "Auto Fetch" (See below), then the API will automatically fetch the data when the page or component loads. For APIs where "Auto Fetch" is turned off, you can manually trigger the request with the ▶️ ("Play") button
⑤ Auto fetch is a powerful feature in toddle that lets each API automatically decide when to fetch data.
When turned on, the API will automatically fetch the data when the page or component is loaded and every time any of the data used to specify the request changes. For example, if a variable is used to specify part of the URL, then the API will automatically fetch data again when the value of that variable changes.
You can all so dynamically toggle "Auto fetch" using a formula.
Almost every part of the request data can set to a dynamic value using a formula.
Setting the request Body
For some types of requests, you can specify a request body.
① You use the request method to accept an HTTP body such as POST, PUT, or PATCH.
② You must select the Body tab to view or edit the request body.
③ Using the formula editor, you can specify what data you wish to send in the body of the API request.
By default, the body will be encoded as JSON unless another encoding is specified with the Content-type header.
Accessing API data
Once you have created your API, you can access the data from any formula on your page or component.
