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

There are two ways to trigger API calls:

1. 1

   Auto fetch: Automatically calls the API on load or when dependencies change
2. 2

   Workflow actions: 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 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 in the API

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

API inputs let 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, letting you execute specific workflows.

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's 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: Response headers
  • performance: Performance metrics