💾 Database

Interact with your Supabase database directly from your Bubble.io app.

In this section, we’ll explore the process of interacting with the PostgreSQL database provided by Supabase from within your Bubble.io app.

❗

Note: Please ensure that a Supabase Auth component is visible on every page of your app. This is crucial because this component initiates the connection with your Supabase instance.

Setup

Add the element Supabase Database to your page.

❗

Note: You can use a separate database component for each Supabase table that you want to manage within your Bubble.io application.

Plugin Element Properties

Title	Description	Type
Data type	You must first initialize the API Connector in order to select the correct type. Please refer to the documentation for detailed instructions.	App type
DB schema	The Postgres schema which this table belong to.	Text
Table	Supabase table name (e.g. todos).	Text
Expected response (JSON object)	By default, the plugin attempts to automatically retrieve the expected result based on the type defined in the API connector. To prevent any retrieval failures and ensure that the plugin can properly publish results from Supabase, we recommend you paste your schema into this field. This schema should match the one you have already entered in the API connector.	JSON
Listen to changes in real-time?	Receive real-time updates on Insert, Update or Delete. By default, realtime is disabled on the Supabase database.	Yes/No
Joined tables	By default, when you enable real-time updates (with "Listen to changes"), the plugin subscribes to changes on the selected table. If you are using a query join, for example, fetching author names (from the author table) associated with books (from the books table), you can specify here the joined tables to receive real-time updates on them (authors in this example).	Yes/No
Debug realtime?	If enabled, debug messages for real-time events will be logged to the browser console, providing detailed insights into its behavior. This will result in verbose console output and is recommended to be disabled in a production environment.	Yes/No
Fetch on page load?	Automatically fetch data when the page loads. You can still fetch data anytime using the `Fetch` action in your workflow.	Yes/No
Columns	Allows you to specifiy specific columns. If you leave columns empty or set it to *, it will fetch all columns in the table.	Text
Filters	Query filters to narrow down the results. Please check the documentation for more details.	Text
Nulls first?	If true, null values are treated as the lowest possible values when sorting in ascending order and as the highest possible values when sorting in descending order. This applies to all columns where ordering is enabled. The default is true.	Yes/No
Order By	The column to order by. Leave empty to not order results.	Text
Ascending order?	When set to true, the query will use an ascending order for this column.	Yes/No
Limit Count	The maximum number of rows to return. Setting this to 0 does not apply any limit.	Number
Limit By Range	When set to true, the query will limit results to a specific range defined by 'Limit From' and 'Limit To'.	Yes/No
Limit From	The starting index from which to limit the result. This index is 0-based, meaning an index of 0 refers to the first record.	Number
Limit To	The last index to which to limit the result. This is inclusive, so the record at this index will be included in the result.	Number
Count	Count algorithm to use to count rows in the table or view. Options: `exact` (Exact but slow count algorithm, performs a `COUNT(*)` under the hood), `planned` (Approximated but fast count algorithm, uses the Postgres statistics under the hood), `estimated` (Uses exact count for low numbers and planned count for high numbers).	Dropdown
Head	When set to `true`, `data` will not be returned. Useful if you only need the count.	Yes/No
Expected response (JSON)	By default, the plugin attempts to automatically retrieve the expected result based on the type defined in the API connector. To prevent any retrieval failures and ensure that the plugin can properly publish results from Supabase, we recommend you paste your schema into this field. This schema should match the one you have already entered in the API connector.	JSON

Exposed states

Name	Description	Type
Objects	Contains the objects retrieved from your Supabase table.	List
Object	In case the results contain only one object, this field will contain that specific object retrieved from your Supabase table.	Object
Bulk data	Local data to use for bulk insert or upsert actions.	List
Patched object	Local object to use with the `Patch JSON` action.	Object
Realtime channels	List of channels subscribed to for real-time updates.	List
Is loading?	Indicates if the component is currently fetching data.	Boolean
Is success?	Indicates if the last action was successful.	Boolean
Status code	The status code will be '200' in case of success, and a different code in case of an error.	Text
Status message	The status message will be 'success' in cases of success, and it will contain error details in cases of an error.	Text
Count	Number of rows fetched when using the options count.	Number
Count insert	Number of added rows when using the options count.	Number
Count update	Number of updated rows when using the options count.	Number
Count delete	Number of deleted rows when using the options count.	Number
Count upsert	Number of upserted rows when using the options count.	Number
Last insert	Last object added using the insert action.	Object
Last update	Last object updated using the update action.	Object
Last upserts	Last object upserted using the upsert action.	Object
Last inserts	List of objects added using the insert action.	List
Last updates	List of objects updated using the update action.	List
Last upserts	List of objects upserted using the upsert action.	List

Element Events

Name	Description
Call success	Triggered when a successful response is received from Supabase.
Call error	Triggered when an error is received from Supabase.
Fetched	Triggered when data has been successfully fetched from Supabase.
Fetch error	Triggered when receiving an error while fetching data.
Inserted	Triggered when data has been successfully inserted to Supabase.
Insert error	Triggered when receiving an error while inserting data.
Updated	Triggered when data has been successfully updated on Supabase.
Update error	Triggered when receiving an error while updating data.
Upserted	Triggered when data has been successfully upserted to Supabase.
Upsert error	Triggered when receiving an error while upserting data.
Deleted	Triggered when data has been successfully deleted from Supabase.
Delete error	Triggered when receiving an error while deleting data.
CSV exported	Triggered when the current results have been exported as CSV.
CSV export error	Triggered when receiving an error while exporting the current results as CSV.
New realtime event	Triggered when a new realtime event (insert, update or delete) is received.
New realtime insert	Triggered upon a new record insertion into the database.
New realtime update	Triggered upon a record update in the database.
New realtime delete	Triggered when a record is deleted from the database.
Realtime subscribed	Triggered when all channels have been subscribed.
Realtime unsubscribed	Triggered when all channels have been unsubscribed.
Realtime error	Triggered when receiving a realtime error.

Note: Explore our demo app to see how to effectively use the database component in your app.

Element Actions

Fetch data

Perform a SELECT query on the table or view. You can configure the following fields:

Title	Description	Type
Columns	Allows you to specify specific columns. If you leave columns empty or set it to *, it will fetch all columns in the table.	Text
Use Filters For Real-Time Update	Use the selected filters for incoming real-time updates. This only applies if you select the option 'Listen to changes in real-time' on the database component.	Yes/No
Filters	Query filters to narrow down the results. Please check the documentation for more details.	Text
Nulls first?	If true, null values are treated as the lowest possible values when sorting in ascending order and as the highest possible values when sorting in descending order. This applies to all columns where ordering is enabled. The default is true.	Yes/No
Enable this sorting?	Enable or disable this sorting. Only used when order by is set.	Yes/No
Order By	The column to order by. Leave empty to not order results.	Text
Referenced table	Optional. The foreign table to use if "Order by" is a foreign column.	Text
Ascending order?	When set to true, the query will use an ascending order.	Yes/No
Use Ordering Options for Real-Time Update	Select this to use the selected ordering options for incoming real-time updates. This only applies if you select the option 'Listen to changes in real-time' on the database component.	Yes/No
Limit Count	The maximum number of rows to return. Setting this to 0 does not apply any limit.	Number
Limit By Range	When set to true, the query will limit results to a specific range defined by 'Limit From' and 'Limit To'.	Yes/No
Limit From	The starting index from which to limit the result. This index is 0-based, meaning an index of 0 refers to the first record.	Number
Limit To	The last index to which to limit the result. This is inclusive, so the record at this index will be included in the result.	Number
Use Limits Options for Real-Time update	Select this to use the selected limits options for incoming real-time updates. This only applies if you select the option 'Listen to changes in real-time' on the database component.	Yes/No
Count	Count algorithm to use to count rows in the table or view. Options: `exact` (Exact but slow count algorithm, performs a `COUNT(*)` under the hood), `planned` (Approximated but fast count algorithm, uses the Postgres statistics under the hood), `estimated` (Uses exact count for low numbers and planned count for high numbers).	Dropdown
Head	When set to `true`, `data` will not be returned. Useful if you only need the count.	Yes/No
Use these options for upcoming real-time updates	Select this to use the selected options for incoming real-time updates. This only applies if you select the option 'Listen to changes in real-time' on the database component.	Yes/No
Count	Count algorithm to use to count rows in the table or view.	Dropdown
Head	When set to true, data will not be returned. Useful if you only need the count.	Boolean

Insert data

Perform an INSERT into the table or view.

You can configure the following field:

Fields:

Title	Description	Type
Insert type	Inserting a single row (using Payload and/or JSON payload) or multiple rows (using List payload or List JSON payloads).	Dropdown
Payload	The values to insert into your Supabase DB when using single insert.	Array
JSON Payload	The values to insert into your Supabase DB in JSON format when using single insert.	JSON
List payloads	The values to insert into your Supabase database when the insert type is set to "bulk". This must be a list of items that match your table schema. You can use the `Bulk data` state as the value from the database component after adding data to it using the `Add item to bulk data` action. If this field is specified, "List JSON payloads" will be ignored.	Array
List JSON payloads	The values to insert into your Supabase DB in JSON format. Must be a valid array of JSON objects. If "List payload" is specified then this field is ignored.	JSON
Default to null?	If true, missing fields in the payload will be inserted as null values. Otherwise, missing fields will used the the default column value. Defaults to true. Only applies for bulk insert.	Yes/No
Count	Count algorithm to use to count inserted rows. Options: `exact` (Exact but slow count algorithm, performs a `COUNT(*)` under the hood), `planned` (Approximated but fast count algorithm, uses the Postgres statistics under the hood), `estimated` (Uses exact count for low numbers and planned count for high numbers).	Dropdown
Return inserted rows?	If you set "true," a select operation will be executed post-insertion, and the inserted row(s) will be available in the "Last insert" and the "Last inserts" states. This requires that you have an RLS (Row Level Security) policy that allows "select" on the table.	Yes/No
Convert to null	A list of fields that should have empty values (e.g., "") converted to null before inserting into your table. This is useful for columns that expect non-string types, like dates, where an empty string would cause an error.	Text

❗

Note: When using single insert, you have the option to use either Payload, JSON Payload, or both. The values from these will be combined for the final call to your Supabase instance.

Update data

Upsert

Perform an UPSERT on the table or view.

Fields:

Title	Description	Type
Upsert type	Upserting a single row (using Payload and/or JSON payload) or multiple rows (using List payload or List JSON payloads)	Dropdown
Payload	The values to upsert with. These will be automatically merged with the JSON payload field. To ensure a value is treated as a string, enclose it in double quotes (e.g., "text").	Array
JSON Payload	The values to upsert with in JSON format. These will be automatically merged with the payload field.	JSON
List payloads	The values to upsert into your Supabase database when the upsert type is set to "bulk". This must be a list of items that match your table schema. You can use the `Bulk data` state as the value from the database component after adding data to it using the `Add item to bulk data` action. If this field is specified, "List JSON payloads" will be ignored.	Array
List JSON payloads	The values to upsert into your Supabase DB in JSON format. Must be a valid array of JSON objects (e.g. `[{"c1": "v1", "c2", "v2"}, {"c1": "v1", "c2", "v2"}]`). If "List payload" is specified then this field is ignored.	JSON
Default to null?	If true, missing fields default to "null". Otherwise, missing fields will used the the default column value. This only applies when inserting new rows, not when merging with existing rows under "Ignore duplicates?" is false. Defaults to true. Only applies for bulk upsert.	Yes/No
Count	Count algorithm to use to count upserted rows. Options: `exact` (Exact but slow count algorithm, performs a `COUNT(*)` under the hood), `planned` (Approximated but fast count algorithm, uses the Postgres statistics under the hood), `estimated` (Uses exact count for low numbers and planned count for high numbers).	Dropdown
On conflict	Unique column(s) to specify how duplicate rows are determined. Two rows are duplicates if all the "On conflict" columns are equal.	Text
Return upserted rows?	If you set "true," a select operation will be executed post-upsert, and the upserted rows will be available in the "Last upsert" and "Last upserts" state. This requires that you have an RLS (Row Level Security) policy that allows "select" on the table.	Yes/No
Ignore duplicates?	If "true", duplicate rows are ignored. If "false", duplicate rows are merged with existing rows.	Boolean
On conflict	Unique column(s) to specify how duplicate rows are determined. Two rows are duplicates if all the "On conflict" columns are equal.	Text
Convert to null	A list of fields that should have empty values converted to null before upserting your row(s).	Text

❗

Note: When using single upsert, you have the option to use either Payload, JSON Payload, or both. The values from these will be combined for the final call to your Supabase instance.

Title	Description	Type
Payload	The values to update your object with. These will be automatically merged with the JSON Payload field.	Key-value list
JSON payload	The values to update your object with in JSON format. These will be automatically merged with the payload field.	Text
Filter combination	Select "AND" (default) to apply all filters simultaneously, or "OR" to match any single filter.	Dropdown
Enable this filter?	Enable or disable this filter. Only used when filter type is set.	Boolean
Not filter?	Match only rows which doesn't satisfy the filter	Boolean
Filter type	The filter to apply	Dropdown
Filter name	The name of the column to filter on	Text
Filter value	The value of the filter	Text
Advanced filters	Apply any Supabase filter operators directly to your query by specifying a list of filters.	Text
Count	Count algorithm to use to count updated rows. Options: `exact` (Exact but slow count algorithm, performs a `COUNT(*)` under the hood), `planned` (Approximated but fast count algorithm, uses the Postgres statistics under the hood), `estimated` (Uses exact count for low numbers and planned count for high numbers).	Dropdown
Return updated rows?	If you set "true," a select operation will be executed post-update, and the updated row will be available in the "Last update" and "Last updates" states.	Boolean
Convert to null	A list of fields that should have empty values converted to null before updating your row(s).	Text

Title	Description	Type
Filter combination	Select "AND" (default) to apply all filters simultaneously, or "OR" to match any single filter.	Dropdown
Enable this filter?	Enable or disable this filter. Only used when filter type is set.	Boolean
Not filter?	Match only rows which doesn't satisfy the filter	Boolean
Filter type	The filter to apply	Dropdown
Filter name	The name of the column to filter on	Text
Filter value	The value of the filter	Text
Advanced filters	Apply any Supabase filter operators directly to your query by specifying a list of filters.	Text
Count	Count algorithm to use to count deleted rows. Options: `exact` (Exact but slow count algorithm, performs a `COUNT(*)` under the hood), `planned` (Approximated but fast count algorithm, uses the Postgres statistics under the hood), `estimated` (Uses exact count for low numbers and planned count for high numbers).	Dropdown

Title	Description	Type
Filename	Name of the CSV file with the extension (e.g. file.csv).	Text
Delimiter	Character that separates columns within each row. Defaults to a comma (,).	Text
Include headers?	Specifies whether the first row of the CSV should contain column headers.	Boolean
Encoding	Character encoding for the CSV file. Defaults to UTF-8.	Text
Wrap values?	Determines whether to enclose each value in quotes (" ").	Boolean

Title	Description	Type
JSON Source	The source JSON object to which the operations will be applied.	Text
Enable patch?	Enable or disable this operation.	Boolean
Operation	The operation to apply.	Dropdown
Path	The full path where the operation should be applied.	Text
Value	The value to be used (not used when the operation is "remove").	Text

💾 Database

Interact with your Supabase database directly from your Bubble.io app.

Setup

Plugin Element Properties

Exposed states

Element Events

Element Actions

Fetch data

Insert data

Update data

Upsert

Delete data

Export to CSV

Add item to bulk data

Remove item from bulk data

Clear bulk data

Patch JSON

Subscribe to realtime

Unsubscribe from realtime

Reset