Supabase Plugin - Integrate Supabase into your Bubble app

shaqis · March 14, 2024, 4:47pm

@Nass so i need to use this plugin ?
is it have a ‘free’ way to do it ?
like use api connector ?

Nass · March 14, 2024, 8:15pm

Yes, you can use the API connector; for simple use case like this, it’s quite easy.

shaqis · March 15, 2024, 1:25am

can you show me how to do the workflow? i dont know how to do it

Nass · March 18, 2024, 7:45am

Hi @shaqis,
You’ll need to set up and use the API connector for querying the Supabase endpoints. You can check out the Supabase quickstart here: Build an API route in less than 2 minutes. | Supabase Docs

Best

shaqis · March 22, 2024, 5:23am

i have do as your instruction, but then it will auto post it without me click save button

Nass · March 22, 2024, 9:54am

Hey @shaqis,
I just added this new demo page for data insertion.

insert-data

Let me know if you have any questions!

shaqis · March 25, 2024, 3:56am

hi nas,

i have do it as your way in demo page,

but there another problem is when i clicked save button it post 2 data

can u help me ?

Nass · March 25, 2024, 9:37am

Hi @shaqis
I’ve sent you a DM.
Thanks!

Nass · March 29, 2024, 3:26pm

Hi,

A new version of the Supabase plugin (1.16.0) has just been published and brings lots of new features and improvements.

The demo app has been updated with new use-cases:

supabase-demo

Filter Combination
This field allows you to choose how to combine filters (AND or OR operator)

Not Filter
You can now select if you want to match only rows that do not satisfy the filters

Enable this filter
Allows to dynamically enable/disable a specific filter.

Advanced Filters
You can now specify any Supabase filters on database actions using the new field “Advanced filters”

db-filters

Data container
The new element data container allows to synchronize states and events with any database component in your app (e.g., between reusables).

data-container

Plugin Link: Supabase by Nocodegarden Plugin | Bubble
Documentation: Getting Started with Supabase
Demo App: Supabase Demo
Demo Editor: Plugin Editor

New things are coming next week.
Best!

lowcoding · April 9, 2024, 11:25am

Hello!

First of all I would like to thank you for this plugin! I am promoting in my community the use of Supabase/SQL with Bubble because it opens the way to really complex and powerful applications. Now I am integrating Supabase with SQL Connector and have several issues with this integration. I found your plugin a few days ago and read the docs - it’s fantastic! It will solve 90% of the problems and make development on this stack as easy as possible.
I will be testing it over the next week and hope to implement it in any of my next projects if it works as described.

Secondly, I’ve a few questions:

I’m doing complex SQL queries (1) with joining multiple tables etc. Is it possible to do these queries with your plugin? Or maybe it’s easy to implement this function? (Or maybe I’m just bad at SQL and the queries could be simpler )
I didn’t understand in the docs how RPC payload works - for example, I want to dynamically specify which list of options (enums for single select) I want to get - is that possible with payload?
Have you checked the capacity of the uploader? Is it possible to upload 100 images at once?
Is there any documentation/case for realtime part? It’s not clear how it works.

Thanks!

(1) Example of SQL query:

WITH StartDate AS (
    SELECT 
        ua.id AS user_application_id,
        MIN(ui.value::date) AS start_date
    FROM 
        public.user_applications ua
    INNER JOIN 
        public.user_inputs ui ON ua.id = ui.user_application_id::uuid
    INNER JOIN 
        public.inputs i ON ui.input_id = i.id
    INNER JOIN 
        public.questions q ON i.question_id = q.id
    INNER JOIN 
        public.questions_category qc ON q.category = qc.id
    WHERE 
        q.name = 'Start date' 
        AND q.system = true
        AND qc.type = 'application'
        AND ua.application_id = $2
    GROUP BY 
        ua.id
)

SELECT
    DISTINCT ON (s."order")
    s.id AS step_id,
    s.name AS step_name,
    s."order" AS step_order,
    s.time AS step_time,
    CASE 
        WHEN COALESCE(sq.total_questions, 0) = 0 THEN 1
        ELSE COALESCE(sq.total_questions, 0)
    END AS total_questions,
    CASE 
        WHEN COALESCE(cq.completed_questions, 0) = 0 AND us.display_status = 'Completed' AND COALESCE(sq.total_questions, 0) = 0 THEN 1
        ELSE COALESCE(cq.completed_questions, 0)
    END AS completed_questions,
    us.display_status,
    us.current_substep_id AS current_substep_id,
    sd.start_date,
    (sd.start_date + COALESCE(sd2.cumulative_deadline_days, 0) * INTERVAL '1 day') AS deadline,
    CASE
        WHEN ss.role_id != $3 THEN (
            SELECT ss_prev.id
            FROM substeps ss_prev
            WHERE ss_prev.step_id = s.id
            AND ss_prev.role_id = $3
            AND ss_prev."order" < ss."order"
            ORDER BY ss_prev."order" DESC
            LIMIT 1
        )
        ELSE us.current_substep_id
    END AS student_current_substep_id
FROM
    steps s
LEFT JOIN StepQuestions sq ON s.id = sq.step_id
LEFT JOIN CompletedQuestions cq ON s.id = cq.step_id
LEFT JOIN user_steps us ON s.id = us.step_id AND us.user_application_id =$1
LEFT JOIN StartDate sd ON us.user_application_id = sd.user_application_id
LEFT JOIN SubstepDeadlines sd2 ON s.id = sd2.step_id
LEFT JOIN substeps ss ON us.current_substep_id = ss.id
WHERE
    s.application_id = $2
GROUP BY
    s.id, us.display_status, us.current_substep_id, sq.total_questions, cq.completed_questions, ss.role_id, ss."order", sd.start_date, sd2.cumulative_deadline_days

ORDER BY
    s."order"
LIMIT 100 + $4;

Nass · April 9, 2024, 3:14pm

Hi @lowcoding,
Thank you so much for your message!
I’ll be sending you a DM very shortly.
Best!

jp18 · April 9, 2024, 5:29pm

Hello, very high level question here. What’s the primary use case for integrating Supabase?

My understanding is that they would have a lot of overlap. Would Bubble basically become the frontend only? Supabase the database?

Nass · April 10, 2024, 7:58am

Hi @jp18

Great question. The way you integrate Supabase with Bubble indeed depends on your project’s needs.

Scenario 1: move all backend logic to Supabase, using Bubble strictly as frontend.
In this scenario, your data is fully stored on Supabase.
The main advantage is that you drasctically reduces your WU comsumption.

Scenario 2: move some backend logic to Supabase.
You decide to continue using some Bubble backend features (database, authentication, etc…) but selectively use some Supabase features. For example:

Storage: you can store and serve your app content using the Supabase storage
Edge functions: replacing some backend WF using edge functions
Realtime: using the realtime features to implement live-chat features on your app
etc…

So, whether you opt for a full migration to Supabase for the backend or prefer to integrate specific features alongside Bubble, the choice is entirely yours.

lowcoding · April 11, 2024, 10:08am

Bubble backend is hard to debug and it’s not stable (Flusk tool is built on this Bubble’s problem). I prefer to use Bubble only as frontend tool, Supabase for DB (scalable and powerful), and Make/N8N/Cloud code functions as backend (great level of debugging and control).
The same as in code - every tool has own specialisation and together they provide you ability of building complex and scalable product.

emiliensechet · April 12, 2024, 8:55am

Hello ! Thanks for the plugin!
I can’t get the data from the todo table (without User Id to remove complexity). Nothing appears even though I follow the tutorial to the letter… Can you please help me? please

Nass · April 12, 2024, 9:03am

Hi,

Certainly! Just to make sure, do you have a Supabase authentication component visible on your page?

Also, have you set up any RLS on your table?
Thanks!

emiliensechet · April 12, 2024, 9:09am

Oh my gosh, thank you so much, I hadn’t put an authentication component.
great plugin - great creator!

Nass · April 12, 2024, 9:11am

Thank you so much!

Nass · April 13, 2024, 10:21pm

A new version of the Supabase plugin (1.19.0) has just been published, bringing many new features and improvements:

Database

Added Count state and options on fetch to enable counting rows in the table or view.
Added Last Insert state, which displays the last object added via the insert action.

RPC

Introduced a new RPC component with the Call function on page load feature.

Uploader

Added Minimum upload duration and Maximum parallel uploads fields to optimize performance for numerous simultaneous uploads.

Authentication

The plugin now parses Supabase’s response to authentication errors during login and signup, assigning a unique error code and slug to each error. The codes are available here

Demo
A new demo page for pagination is available here:

demo-pagination

Links

Plugin Link: Supabase by Nocodegarden Plugin | Bubble
Documentation: Getting Started with Supabase
Demo App: Supabase Demo
Demo Editor: Plugin Editor

New updates are coming next week.
Best!

white-eye · April 16, 2024, 8:28am

Thanks @Nass this plugin just gets better & better. Amazing work