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.
Prerequisites
- 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
Configure an API call with Use as Data
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.
Bind API data to a Repeating Group
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.
Handle pagination with dynamic parameters
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.
Combine API data with Bubble database records
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 working example
1API DATA SOURCE CONFIGURATION2===============================34API CALL SETUP:5 Use as: Data (not Action)6 Initialize: Map response fields7 Parameters: Dynamic for filters/pagination89REPEATING GROUP BINDING:10 Data source: Get data from external API → [call name]11 Cell reference: Current Cell's [field]12 Nested: Current Cell's [parent]'s [child]1314PAGINATION:15 Page state: current_page (number, default 1)16 API params: page = current_page, limit = 2017 Previous: Set current_page - 1 (min 1)18 Next: Set current_page + 119 Display: 'Page X of Y' using total from response2021HYBRID DATA:22 API data: Primary source for external records23 Bubble DB: Search for related local records24 Display: Combine in parallel groups or custom states2526CACHING STRATEGY:27 Option A: Direct API calls (real-time, slower)28 Option B: Cache in DB, refresh on schedule (faster)29 Option C: Cache with manual refresh button (balanced)Common mistakes when using the API Connector as a data source for an app
Why it's a problem: Setting Use as to Action instead of Data for display purposes
How to avoid: Set Use as to Data for any API call whose response should display directly in UI elements
Why it's a problem: Not handling the case when the API returns an empty list
How to avoid: Add a condition: when the Repeating Group's list count is 0, show a 'No results found' message
Why it's a problem: Making too many API calls by not caching frequently accessed data
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to display data from an external REST API directly in a Bubble.io Repeating Group without storing it in my database first. How do I configure the API Connector call as a data source and handle pagination?
Configure an API call with Use as Data that returns a list of products. Display them in a Repeating Group showing name, price, and image. Add Previous and Next buttons for pagination using a page custom state. Show a loading indicator while data loads.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation