Call an API

After configuring an API, you can trigger the API call and access the returned data.

There are two ways to trigger API calls:

1. 1

   Auto fetch: When auto fetch is on, your page or component will call the API on load, or when dependencies change
2. 2

   Workflow actions: You can manually trigger the API from workflows

Auto fetch automatically calls your API without requiring manual triggers. This is particularly useful for data that should be loaded immediately when a component appears.

Use API auto fetch

To enable auto fetch:

1. 1

   Navigate to your API in the data panel
2. 2

   Toggle Auto fetch on
3. 3

   Optionally use a formula for conditional data fetching

Workflow actions give you precise control over when APIs are called, typically in response to user interactions or other events.

Use API workflow action

To call an API from a workflow:

1. 1

   Create or edit a workflow for an event
2. 2

   Click + to add an action
3. 3

   Under APIs, select your API
4. 4

   (Optional) Specify any input values you want to override, as defined by the API's specification

The following example demonstrates how to implement a weather card that combines both API calling methods. The example uses auto fetch to load weather data when the component mounts, and provides an update button that manually triggers the API through a workflow action.

API inputs allow you to you customize parameters each time you call an API, giving you flexibility to reuse the same endpoint with different values depending on the context.

Configure API inputs

Define inputs for your API:

1. 1

   Click + in the Inputs tab
2. 2

   Set a name
3. 3

   Set a default value, either static or dynamic using the fx button

When calling the API through a workflow action, all defined inputs become available for overriding.

Callbacks are events triggered by API responses, which let you execute specific workflows in response to updated data from an API.

Handle API callbacks

Available callbacks:

1. 1

   On success: triggered when the API call is successful
2. 2

   On error: triggered when the API call fails
3. 3

   On message: triggered when a message is received

Set up callback handling in the Events section of the API or workflow action.

The following example demonstrates how to configure and react to an API callback event.

Once your API call completes, the resulting data is available for use in your application logic and UI.

Access API data

Access API response in the formula editor:

1. 1

   In the formula editor, add a new node and select the API endpoint from the APIs section
2. 2

   Select the data you want to use

Available API response data:

• isLoading: indicates if the API call is in progress
• data: contains the successful API response body
• error: holds error information if the API call failed
• response: provides HTTP response details:
  • status: HTTP status code
  • headers: HTTP response headers
  • performance: performance metrics