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.
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:
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
sqlCREATE OR REPLACE FUNCTION hello_world_with_name(name text) RETURNS json AS $$ BEGIN RETURN json_build_object('message', 'Hello world ' || name); END; $$ LANGUAGE plpgsql;
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:
3 - Initializing the RPC component
You can now add an RPC component to your page:
Note: You can then retrieve the result of the call from the Object state in your RPC component.