💾 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.

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.

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

Supabase - Database setup


You can configure the following fields:

  • Name
    Data type
    Type
    App type
    Description

    You must first initialize the API Connector in order to select the correct type.
    Please refer to this section for detailed instructions.

  • Name
    DB schema
    Type
    App type
    Description

    The Postgres schema which this table belong to.

  • Name
    Table
    Type
    text
    Description

    Supabase table name (e.g todos).

  • Name
    Listen to changes in real-time?
    Type
    boolean
    Description

    Receive real-time updates on Insert, Update or Delete. By default, realtime is disabled on the Supabase database.

  • Name
    Link ID
    Type
    text
    Description

    Propagate the states and events of this database to Data container components that share the same Link ID. Useful for displaying database results on reusable components, for example.


Fetch settings

  • Name
    Fetch on page load?
    Type
    Boolean
    Description

    Automatically fetch data when the page loads. You can still fetch data anytime using the Fetch action in your workflow.

  • Name
    Columns
    Type
    text
    Description

    Allows you to specifiy specific columns. If you leave columns empty or set it to *, it will fetch all columns in the table.

  • Name
    Filters
    Description

    Please check this section for more details.

  • Name
    Order By
    Type
    text
    Description

    The column to order by. Leave empty to not order results.

  • Name
    Ascending order?
    Type
    Boolean
    Description

    When set to true, the query will use an ascending order for this column.

  • Name
    Limit Count
    Type
    Number
    Description

    The maximum number of rows to return. Setting this to 0 does not apply any limit.

  • Name
    Limit By Range
    Type
    Boolean
    Description

    When set to true, the query will limit results to a specific range defined by 'Limit From' and 'Limit To'.

  • Name
    Limit From
    Type
    Number
    Description

    The starting index from which to limit the result. This index is 0-based, meaning an index of 0 refers to the first record.

  • Name
    Limit To
    Type
    Number
    Description

    The last index to which to limit the result. This is inclusive, so the record at this index will be included in the result.

  • Name
    Count
    Type
    Dropdown
    Description

    Count algorithm to use to count rows in the table or view.

    • 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.
  • Name
    Head
    Type
    Boolean
    Description

    When set to true, data will not be returned. Useful if you only need the count.

  • Name
    Expected response (JSON)
    Type
    JSON
    Description

    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.


States

The element exposes the following states:

  • Objects: contain the objects retrieved from your Supabase table.
  • Object: in case the results contain only one object, this field will contain that specific object retrieved from your Supabase table.
  • Status code: the status code will be '200' in case of success, and a different code in case of an error.
  • Status message: the status message will be 'success' in cases of success, and it will contain error details in cases of an error.

Count

  • Count: number of rows fetched when using the options count.
  • Count insert: number of added rows when using the options count.
  • Count update: number of updated rows when using the options count.
  • Count delete: number of deleted rows when using the options count.
  • Count upsert: number of upserted rows when using the options count.

Last

  • Last insert: last object added using the insert action.
  • Last update: last object updated using the update action.
  • Last upserts: last object upserted using the upsert action.
  • Last inserts: list of objects added using the insert action.
  • Last updates: list of objects updated using the update action.
  • Last upserts: list of objects upserted using the upsert action.

Events

The element triggers the following event:

  • Has Changed: when receiving new objects from Supabase
  • Error Received: when receiving an error from Supabase
  • Real-Time Insert Detected: triggered upon a new record insertion into the database
  • Real-Time Update Detected: triggered upon a record update in the database
  • Real-Time Delete Detected: triggered when a record is deleted from the database

Demo

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

Use cases
Database - Database operationsEditorDemo
Database - Use query joins to link related data in one-to-many relationshipsEditorDemo
Database - Access data through database viewsEditorDemo
Database - Implement a search bar to enable searching through your dataEditorDemo
Database - Filtering with JSONEditorDemo
Database - Dynamic data filteringEditorDemo

Fetch data

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


  • Name
    Columns
    Type
    string
    Description

    Allows you to specifiy specific columns. If you leave columns empty or set it to *, it will fetch all columns in the table.

  • Name
    Use Filters For Real-Time Update
    Type
    Boolean
    Description

    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.

  • Name
    Filters
    Description

    Please check this section for more details.

  • Name
    Order By
    Type
    text
    Description

    The column to order by. Leave empty to not order results.

  • Name
    Ascending order?
    Type
    Boolean
    Description

    When set to true, the query will use an ascending order.

  • Name
    Use Ordering Options for Real-Time Update
    Type
    Boolean
    Description

    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.

  • Name
    Limit Count
    Type
    Number
    Description

    The maximum number of rows to return. Setting this to 0 does not apply any limit.

  • Name
    Limit By Range
    Type
    Boolean
    Description

    When set to true, the query will limit results to a specific range defined by 'Limit From' and 'Limit To'.

  • Name
    Limit From
    Type
    Number
    Description

    The starting index from which to limit the result. This index is 0-based, meaning an index of 0 refers to the first record.

  • Name
    Limit To
    Type
    Number
    Description

    The last index to which to limit the result. This is inclusive, so the record at this index will be included in the result.

  • Name
    Use Limits Options for Real-Time update
    Type
    JSON
    Description

    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.

  • Name
    Count
    Type
    Dropdown
    Description

    Count algorithm to use to count rows in the table or view.

    • 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.
  • Name
    Head
    Type
    Boolean
    Description

    When set to true, data will not be returned. Useful if you only need the count.


Insert data

Perform an INSERT into the table or view.
You can configure the following field:


  • Name
    Insert type
    Type
    Dropdown
    Description

    Inserting a single row (using Payload and/or JSON payload) or multiple rows (using List payload or List JSON payloads).

  • Name
    Payload
    Type
    Array
    Description

    The values to insert into your Supabase DB when using single insert.

  • Name
    JSON Payload
    Type
    JSON
    Description

    The values to insert into your Supabase DB in JSON format when using single insert.

  • Name
    List payloads
    Type
    Array
    Description

    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. If this field is specified, then "List JSON payloads" will be ignored.

  • Name
    List JSON payloads
    Type
    JSON
    Description

    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.

  • Name
    Count
    Type
    Dropdown
    Description

    Count algorithm to use to count inserted rows.

    • 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.
  • Name
    Return inserted rows?
    Type
    Boolean
    Description

    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.


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

Perform an UPDATE on the table or view.


  • Name
    Payload
    Type
    Array
    Description

    The values to update your object with.

  • Name
    JSON Payload
    Type
    JSON
    Description

    The values to update your object with in JSON format.

  • Name
    Filters
    Description

    Please check this section for more details.

  • Name
    Count
    Type
    Dropdown
    Description

    Count algorithm to use to count updated rows.

    • 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.
  • Name
    Return inserted rows?
    Type
    Boolean
    Description

    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.


Delete data

Perform a DELETE on the table or view. You can configure the following field:


  • Name
    Filters
    Description

    Please check this section for more details.

  • Name
    Count
    Type
    Dropdown
    Description

    Count algorithm to use to count deleted rows.

    • 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.

Upsert

Perform an UPSERT on the table or view.


Export to CSV

Export current results as CSV.


Do you need any help? Feel free to reach out