Setting up an API

To create a new API click the "+" button next to APIs in the Component data panel.

This opens the API panel where you can configure your API

In the API panel you can name your new API. Make sure that you choose a name that makes it easy to remember what API it is referring too.

To make an API request you have to specify some information about the API you wish to call.

Auto fetch

Right next to the name input you will find a check box labelled "Auto fetch". Auto fetch means that this API request will automatically be fetched when the component loads.

Additionally if you are using any formulas inside the API specification, toddle will automatically re-fetch the data for the API if the output of any of those formulas change at a later point.

Lets say your have a request for fetching a list of users. This request includes a query parameter: "search" which is set to the value of a similar named variable in your component. When ever that variable changes, toddle will see that the API request specification has changed and automatically re-fetch the request.

Auto fetch can also be specified with a formula. When ever the formula returns a truthy value (Not false or null), Auto fetch will be turned on, other wise it will be off.

HTTP method and URL

The first three sections in the API panel lets you specify the HTTP method, base URL, path and query parameters for the server you want to make a request to.

If you are not sure what these mean we have written an article breaking down the different parts of a URL

The required value for each of these fields is dictated solely by the server you are connecting to. If you are not sure what to fill in, consult the API documentation for the service you are connecting to.

Above you can see an example an API specification from the Contentful documentation.

HTTP headers

Next you have the option of adding HTTP headers to your API request. Headers are additional metadata passed along the request. The browser will automatically set the default required headers, so you only need this section if the API you are connecting to has special requirements.

Authorization

This section lets you specify what authentication schema you wish to use for the API. We will cover this in depth in the following section.

Body

The body field lets you specify a request body for your API request. This is usually specified using a formula.

By default the body will be JSON encoded. You can change the encoding by changing the Content-type header to e.g. application/x-www-form-urlencoded or multipart/form-data .

Notice that only POST, PATCH, and PUT requests can have a body