MySQL

Before configuring Bubble, decide which pattern fits your situation: **Choose PlanetScale HTTP API if:** - You're starting a new project with no existing MySQL database - You want managed MySQL without maintaining a server - You're comfortable writing raw SQL in Bubble's API Connector call bodies **Choose a Custom REST Proxy if:** - You have an existing MySQL database (shared hosting, RDS, DigitalOcean, etc.) that you cannot or do not want to migrate to PlanetScale - You have an existing LAMP/PHP application with REST endpoints already in place - You want to define business logic in the proxy (access control, data transformation) rather than in Bubble workflows If you're choosing PlanetScale: go to planetscale.com → Create a new database → choose a region → create it (takes about 30 seconds). In the PlanetScale console, go to your database → Settings → Passwords → create a service token with `read_write` access. Note the **token ID** and **token value** — you'll need both for the Authorization header. If you're using a custom proxy: verify your MySQL database is accessible from the internet (or from your proxy deployment platform). Most shared hosts and cloud databases are publicly accessible on a specific host + port. Note your MySQL host, port, database name, username, and password.

In Bubble, go to Plugins tab → Add plugins → search 'API Connector' → Install. Open the API Connector and click 'Add another API'. Name it 'PlanetScale MySQL'. Add a shared header: - Name: `Authorization` - Value: `Bearer {token_id}:{token_value}` — concatenate your service token ID, a colon, and your service token value - Check the **Private** checkbox Add another shared header: - Name: `Content-Type` - Value: `application/json` Click 'Add another call'. Configure: - **Name**: `Execute Query` - **Method**: POST - **URL**: `https://us-east.connect.psdb.cloud/api/v1/execute` (use your actual region endpoint) - **Body**: JSON with two fields: - `query`: a dynamic text field (the SQL query string) - `args`: a dynamic text field (the query arguments as a comma-separated list, or an array) The call configuration: ```json { "method": "POST", "url": "https://us-east.connect.psdb.cloud/api/v1/execute", "headers": { "Authorization": "Bearer <private>", "Content-Type": "application/json" }, "body": { "query": "<dynamic>", "args": ["<dynamic>"] } } ``` For the Initialize call, test with a simple SELECT: `query = 'SELECT 1 as test'`, `args = []`. If PlanetScale is connected, you'll see the response `{"rows": [{"test": "1"}], "rowsAffected": 0, "insertId": "", "fields": [...]}`. Click Save.

1{
2  "method": "POST",
3  "url": "https://us-east.connect.psdb.cloud/api/v1/execute",
4  "headers": {
5    "Authorization": "Bearer <token_id>:<token_value>",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "query": "<dynamic-sql>",
10    "args": ["<dynamic-args>"]
11  }
12}

If you're using an existing MySQL database, deploy a simple REST API that Bubble can call. Here's a minimal Node.js/Express proxy that you can deploy to Railway or Render for free: ```javascript import express from 'express'; import mysql2 from 'mysql2/promise'; const app = express(); app.use(express.json()); // Validate API key from Bubble const API_KEY = process.env.BUBBLE_API_KEY; app.use((req, res, next) => { if (req.headers['x-api-key'] !== API_KEY) { return res.status(401).json({ error: 'Unauthorized' }); } next(); }); const pool = mysql2.createPool({ host: process.env.MYSQL_HOST, user: process.env.MYSQL_USER, password: process.env.MYSQL_PASSWORD, database: process.env.MYSQL_DATABASE, waitForConnections: true, connectionLimit: 10 }); // Example: GET users with optional status filter app.get('/users', async (req, res) => { const { status } = req.query; const [rows] = await pool.execute( status ? 'SELECT id, name, email, status FROM users WHERE status = ?' : 'SELECT id, name, email, status FROM users', status ? [status] : [] ); res.json({ rows }); }); // Example: POST to create a user app.post('/users', async (req, res) => { const { name, email } = req.body; const [result] = await pool.execute( 'INSERT INTO users (name, email, created_at) VALUES (?, ?, NOW())', [name, email] ); res.json({ insertId: result.insertId }); }); app.listen(process.env.PORT || 3000); ``` Store environment variables in your deployment platform (Railway: Variables tab, Render: Environment tab): `MYSQL_HOST`, `MYSQL_USER`, `MYSQL_PASSWORD`, `MYSQL_DATABASE`, and `BUBBLE_API_KEY` (a random string you generate and use in Bubble's Private header). After deployment, your proxy URL will be something like `https://your-app.up.railway.app`. Test it with a REST client (curl or Postman) before connecting Bubble.

1import express from 'express';
2import mysql2 from 'mysql2/promise';
3
4const app = express();
5app.use(express.json());
6
7const API_KEY = process.env.BUBBLE_API_KEY;
8app.use((req, res, next) => {
9  if (req.headers['x-api-key'] !== API_KEY) {
10    return res.status(401).json({ error: 'Unauthorized' });
11  }
12  next();
13});
14
15const pool = mysql2.createPool({
16  host: process.env.MYSQL_HOST,
17  user: process.env.MYSQL_USER,
18  password: process.env.MYSQL_PASSWORD,
19  database: process.env.MYSQL_DATABASE,
20  waitForConnections: true,
21  connectionLimit: 10
22});
23
24app.get('/users', async (req, res) => {
25  const { status } = req.query;
26  const [rows] = await pool.execute(
27    status ? 'SELECT id, name, email, status FROM users WHERE status = ?' : 'SELECT id, name, email, status FROM users',
28    status ? [status] : []
29  );
30  res.json({ rows });
31});
32
33app.post('/users', async (req, res) => {
34  const { name, email } = req.body;
35  const [result] = await pool.execute(
36    'INSERT INTO users (name, email, created_at) VALUES (?, ?, NOW())',
37    [name, email]
38  );
39  res.json({ insertId: result.insertId });
40});
41
42app.listen(process.env.PORT || 3000);

In Bubble's API Connector, click 'Add another API'. Name it 'MySQL API'. Set the base URL to your deployed proxy URL (e.g. `https://your-app.up.railway.app`). Add a shared header: - Name: `x-api-key` - Value: your BUBBLE_API_KEY value - Check the **Private** checkbox Add another shared header: - Name: `Content-Type` - Value: `application/json` Add your first call for reads: - **Name**: `Get Users` - **Method**: GET - **URL**: `/users` - **Parameters**: add a query parameter `status` (text, dynamic, optional) - **Use as**: Data (for repeating groups) Add a call for writes: - **Name**: `Create User` - **Method**: POST - **URL**: `/users` - **Body**: JSON `{"name": "{{name}}", "email": "{{email}}"}` - **Use as**: Action For the Initialize call on 'Get Users': click Initialize call → Run (no dynamic params needed for a basic GET). If your MySQL table has data, Bubble will detect the field schema from the `rows` array in the response. If the table is empty, insert a test row first. For the Initialize call on 'Create User': provide test values `name = 'Test'` and `email = 'test@test.com'`. The proxy should insert the row and return `{"insertId": 1}`. Click Save. This API call configuration looks like: ```json { "method": "GET", "url": "https://your-app.up.railway.app/users", "headers": { "x-api-key": "<private>", "Content-Type": "application/json" }, "params": { "status": "<dynamic-optional>" } } ```

1{
2  "method": "GET",
3  "url": "https://your-app.up.railway.app/users",
4  "headers": {
5    "x-api-key": "<private>",
6    "Content-Type": "application/json"
7  },
8  "params": {
9    "status": "<dynamic-optional>"
10  }
11}

With initialized API calls, connect them to your Bubble UI. **Reads (Repeating Group)**: Set a Repeating Group's Data source to 'Get Users' (or your MySQL GET call). The data type should match the detected API response fields. Each row in the repeating group can display `current cell's Get Users result's name`, `current cell's Get Users result's email`, etc. For filtered reads, pass a dynamic parameter. For example, a Dropdown filter for user status: set the `status` parameter in the Data source to `Dropdown Filter Status's value`. Bubble re-fetches the API call whenever the parameter value changes. **Writes (Backend Workflow for paid plan)**: For INSERT, UPDATE, DELETE operations, use a Bubble Backend Workflow rather than a direct client-side API call. In the Backend Workflows section, create a new workflow called 'Create MySQL User'. Add parameters: `name` (text), `email` (text). Add action: Plugins → API Connector → Create User. Map `name = Parameter: name`, `email = Parameter: email`. On the client-side, trigger this Backend Workflow from a button click: Workflow → Schedule API Workflow → 'Create MySQL User' → pass `name = Input Name's value`, `email = Input Email's value`. **For client-side writes on free plan**: If you're on Bubble's free plan and cannot use Backend Workflows, you can make client-side POST calls with the Private header. The key stays hidden in transit. However, Backend Workflows are still preferred for writes because they run server-side and don't appear in browser DevTools. RapidDev's team has connected Bubble to dozens of MySQL databases across LAMP stacks, PlanetScale, and custom REST proxies — book a free scoping call at rapidevelopers.com/contact if you'd like help designing your specific integration.

MySQL write operations can fail in ways that Bubble won't surface as visible errors by default. Add explicit error handling to your Bubble workflows. For Backend Workflows that call MySQL write endpoints: after the API Connector action, add a conditional branch: if the API response status is not 200 (or if the `insertId` field is empty for POST calls), show an error message to the user and log the failure to a Bubble data type for debugging. For PlanetScale specifically: the HTTP API returns errors as HTTP 400 with a JSON body containing an error message. Check Bubble's 'API response error' event in the workflow to catch these. Test SQL injection protection: 1. In your Bubble app's input field, enter a value like `' OR '1'='1` and submit the form 2. Check your MySQL database — the submitted value should appear literally as a row field value, NOT cause additional rows to be returned 3. If using PlanetScale's HTTP API with parameterized queries, this is handled automatically 4. If using a custom proxy, verify your proxy uses `pool.execute()` with `?` placeholders — if it uses string concatenation, the injection test will return unexpected results Finally, add Bubble privacy rules on any data types that store MySQL-sourced data cached in Bubble's native database. Go to Data tab → Data types → [Your Type] → Privacy → add a rule restricting reads to the current user.