Bubble API connector: GET single and PUT API endpoints

Hey there! In this blog post, we'll guide you through the process of connecting Xano, our no-code backend platform, with Bubble, a popular no-code app development tool. We'll cover how to make API calls from Bubble to your Xano app, including fetching single records and updating data with PUT requests. Let's dive in!

Fetching a Single Record with GET

First, let's look at how to fetch a single record from your Xano app using a GET request in Bubble.

1. Copy the API Endpoint URL: In your Xano app, locate the API endpoint you want to call. For this example, we'll use the "Get Single Merchant" endpoint. Click the copy icon next to the endpoint URL to copy it to your clipboard.
2. Set Up the API Call in Bubble: In Bubble, create a new "API Call" workflow step. Paste the copied endpoint URL into the "URL" field.
3. Handle URL Parameters: Bubble uses flat brackets `[ ]` for URL parameters, while Xano uses curly braces `{ }`. Replace the curly braces in the URL with flat brackets.
4. Insert Dynamic Values: You can insert dynamic values for the URL parameters in Bubble. For example, if the parameter is `{id}`, you can enter `[1]` to fetch the record with ID 1.
5. Initialize the Call: After setting up the URL and parameters, click "Initialize Call" to execute the API request.

That's it! You've now successfully fetched a single record from your Xano app in Bubble using a GET request.

Updating Data with PUT

Next, let's explore how to update data in your Xano app using a PUT request in Bubble.

1. Copy the API Endpoint URL: Similar to the GET request, locate the appropriate API endpoint in your Xano app and copy the URL. In this example, we'll use the "Update Single Merchant" endpoint, which is a PUT request.
2. Set Up the API Call in Bubble: Create a new "API Call" workflow step in Bubble. Paste the copied endpoint URL into the "URL" field.
3. Handle URL Parameters: Replace the curly braces in the URL with flat brackets, as you did for the GET request.
4. Set the Request Body: In Bubble, switch to the "Body" tab and paste the example request body from your Xano app's Swagger documentation. The Swagger documentation provides an example of the data structure required for the request body.
5. Insert Dynamic Values: You can insert dynamic values into the request body using Bubble's pointer syntax (`[Value]`). This allows you to populate the request body with data from your Bubble app.
6. Initialize the Call: After setting up the URL, parameters, and request body, click "Initialize Call" to execute the API request and update the data in your Xano app.

And that's it! You've now successfully updated data in your Xano app using a PUT request from Bubble.

Final Thoughts

Connecting Xano with Bubble is a straightforward process, thanks to Xano's auto-generated CRUD API endpoints and Bubble's intuitive API Call workflow steps. Remember to consult the respective documentation for both platforms if you encounter any issues or need further guidance.

Happy building!