# How to use the API Connector as a data source for an app in Bubble.io: Step-by-S

- Tool: Bubble
- Difficulty: Intermediate
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Using API Connector responses as data sources in Bubble lets you display external API data directly in Repeating Groups, text elements, and other UI components without first storing it in your database. This tutorial covers configuring API calls with 'Use as Data' mode, binding external data to Repeating Groups, handling pagination, and combining API data with Bubble database records for hybrid displays.

## Overview: Using API Connector as a Data Source in Bubble

This tutorial explains how to use API Connector responses as direct data sources for your Bubble UI elements. Instead of storing API data in your database first, you can display external data directly in Repeating Groups and other elements.

## Before you start

- A Bubble app with the API Connector plugin
- An external API returning structured JSON data
- At least one API call configured in the API Connector
- Basic understanding of Bubble data sources and Repeating Groups

## Step-by-step guide

### 1. Configure an API call with Use as Data

In the API Connector, create or edit an API call. Set the Use as dropdown to 'Data' (not 'Action'). This makes the API response available as a data source for Repeating Groups and other elements. Data calls are triggered automatically when the element using them loads, unlike Action calls which require a workflow trigger. Initialize the call to map the response fields. After initialization, the response structure appears as typed fields you can reference in expressions.

**Expected result:** The API call is configured as a Data source, available in element data source dropdowns.

### 2. Bind API data to a Repeating Group

Add a Repeating Group to your page. Set the data source to 'Get data from an external API' and select your API call. If the response contains a list, the Repeating Group displays one cell per item. Inside each cell, reference fields with Current Cell's [field name]. For nested response objects, chain field references: Current Cell's user's name. If the API response contains metadata at the root level (like total count) alongside the list, you may need to access the list as a specific field of the response.

**Expected result:** External API data displays in a Repeating Group with each item's fields accessible in cell elements.

### 3. Handle pagination with dynamic parameters

Many APIs return paginated results. Add pagination parameters to your API call (e.g., page and limit). Make these parameters dynamic (bracketed). On your page, create a custom state for the current page number. When displaying the Repeating Group, pass the current page to the API call parameters. Add Previous and Next buttons that increment or decrement the page state. The Repeating Group automatically refetches data when its source parameters change. Display the total count and current page for user context.

**Expected result:** Users can navigate through paginated API data with Previous and Next buttons.

### 4. Combine API data with Bubble database records

Sometimes you need to display API data alongside local database data. For example, showing product details from an external API with user-specific notes from your Bubble database. Create a page or group that loads the API data as its primary source. In a workflow triggered by the API data loading, search your Bubble database for related records (e.g., UserNotes where external_product_id matches the API product ID). Display the combined data using custom states or parallel element groups.

> Pro tip: For frequently accessed API data, cache it in your Bubble database with a scheduled sync. Use the cached database data as the primary source for faster loading, with API calls only for real-time data needs.

**Expected result:** External API data and local Bubble data display together in a unified interface.

## Complete code example

File: `Workflow summary`

```text
API DATA SOURCE CONFIGURATION
===============================

API CALL SETUP:
  Use as: Data (not Action)
  Initialize: Map response fields
  Parameters: Dynamic for filters/pagination

REPEATING GROUP BINDING:
  Data source: Get data from external API → [call name]
  Cell reference: Current Cell's [field]
  Nested: Current Cell's [parent]'s [child]

PAGINATION:
  Page state: current_page (number, default 1)
  API params: page = current_page, limit = 20
  Previous: Set current_page - 1 (min 1)
  Next: Set current_page + 1
  Display: 'Page X of Y' using total from response

HYBRID DATA:
  API data: Primary source for external records
  Bubble DB: Search for related local records
  Display: Combine in parallel groups or custom states

CACHING STRATEGY:
  Option A: Direct API calls (real-time, slower)
  Option B: Cache in DB, refresh on schedule (faster)
  Option C: Cache with manual refresh button (balanced)
```

## Common mistakes

- **Setting Use as to Action instead of Data for display purposes** — Action calls require a workflow trigger and cannot be used as data sources for Repeating Groups or elements Fix: Set Use as to Data for any API call whose response should display directly in UI elements
- **Not handling the case when the API returns an empty list** — An empty API response can cause the Repeating Group to show nothing without explanation, confusing users Fix: Add a condition: when the Repeating Group's list count is 0, show a 'No results found' message
- **Making too many API calls by not caching frequently accessed data** — Every page load triggers the API call when using Data mode, which can exceed rate limits and slow the app Fix: Cache API responses in your database and refresh on a schedule. Use the cached data as the primary source.

## Best practices

- Use Data mode for API calls that display in Repeating Groups and elements
- Cache frequently accessed API data in your database
- Add pagination controls for APIs that return paginated results
- Show loading indicators while API data loads
- Handle empty results with a user-friendly message
- Combine API and database data through custom states or parallel element groups

## Frequently asked questions

### Does using an API as a data source call the API on every page load?

Yes. Data mode API calls trigger whenever the element using them loads. For frequently visited pages, consider caching responses in your database.

### Can I filter API data source results in Bubble?

You can pass filter parameters to the API call (if the API supports them). For client-side filtering of received data, use the :filtered operator on the Repeating Group.

### Can I use an API data source in a conditional expression?

Yes. Use Get data from an external API in any expression. Be aware that each use triggers a separate API call unless the results are cached in a custom state.

### What happens if the API is slow or down?

The Repeating Group shows loading state until the API responds. If the API times out (150+ seconds), Bubble retries automatically. Show a timeout message if data does not load.

### Can RapidDev help integrate external APIs as data sources?

Yes. RapidDev can configure API data sources with caching, pagination, error handling, and hybrid data patterns for optimal performance in your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/use-api-connector-data-source-app-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/use-api-connector-data-source-app-bubble