Invoke database functions from within your Bubble.io app.

In this section, we’ll explore the process of invoking database functions 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 RPC to your page.
Note: You can use a separate RPC component for each functions that you wish to call within your Bubble.io app.
Image without caption
Image without caption
Image without caption

Plugin Element Properties

Title
Description
Type
DB schema
The Postgres schema which this function belong to.
Text
Function name
Supabase function name.
Text
Expected type
Defines the type of data returned by the RPC function. Can be: JSON objects, Numbers, Texts, Booleans or Dates. When the RPC function returns a list of objects, select "JSON objects." In this case, you must also define the "Data Type" and "Expected response (JSON object)" fields below.
Dropdown
Datatype
Only when the "Expected type" is set to "JSON objects". You must first initialize the API Connector in order to select the correct type. Please refer to the documentation for detailed instructions.
App Data
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.
Text
Call on page load?
Automatically call this function when the page loads. You can still call this function at anytime using the "RPC" action in your workflow.
Yes/No
JSON payload
The arguments to pass to the function call in JSON format.
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 returned by the function. Only applicable for "set-returning functions".
Dropdown
Head
When set to true, the data will not be returned. Useful if you only need the count.
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

Exposed States

Name
Description
Type
Objects
Contain the objects retrieved from your Supabase instance.
List
Object
In case the results contain only one object, this field will contain that specific object retrieved from your function call.
Object
Count
Number of rows when using the options count.
Number
Value (number)
The value returned by the function call when the expected type is set to "Number".
Number
Value (list of numbers)
The values returned by the function call when the expected type is set to "Number".
List
Value (text)
The value returned by the function call when the expected type is set to "Text".
Text
Value (list of texts)
The values returned by the function call when the expected type is set to "Text".
List
Value (boolean)
The value returned by the function call when the expected type is set to "Boolean".
Boolean
Value (list of booleans)
The values returned by the function call when the expected type is set to "Boolean".
List
Value (date)
The value returned by the function call when the expected type is set to "Date".
Date
Value (list of dates)
The values returned by the function call when the expected type is set to "Date".
List
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
Is success?
A boolean that indicates if the function call was successful.
Boolean

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.

Element Actions

RPC

Perform a function call (RPC) wich allows you to execute logic in your database.
You can configure the following field:
Image without caption
Image without caption
Fields:
Title
Description
Type
Payload
The arguments to pass to the function call. These will be automatically merged with the JSON payload field.
Array
JSON Payload
The arguments to pass to the function call in JSON format. These will be automatically merged with the payload field.
JSON
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 returned by the function. 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
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

RPC example

We’ll create the function hello_world_with_name that takes a single text argument name, and returns a JSON object containing a greeting message concatenated with the provided name.
1 - Create the RPC function on Supabase
sql
CREATE OR REPLACE FUNCTION hello_world_with_name(name text) RETURNS json AS $$ BEGIN RETURN json_build_object('message', 'Hello world ' || name); END; $$ LANGUAGE plpgsql;
Function

2 - Paste the schema to the Bubble.io API Connector
Our function will returns the following JSON schema:
json
{ "message": ""}
All we need to do is to initialize the API connector in order to use the format in our RPC component:
Paste the schema to the API Connector

3 - Initializing the RPC component
You can now add an RPC component to your page:
Initialize an RPC component
Note: You can then retrieve the result of the call from the Object state in your RPC component.