In order to read Supabase data in WeWeb, you'll first need to add the Supabase Data Source Plugin:

Once you've added it, you will be invited to share your Supabase project URL and public API key:

In Supabase, you can find both your project URL and public key in the "Settings" > "API" menu:

Once you have added both to WeWeb, you will have the option to enable realtime tables if you wish to do so:

🚨 Warning 🚨

Realtime is disabled by default in Supabase for better database performance and security. Learn more about realtime functionalities in the Supabase documentation.

How to Add a Supabase Collection in WeWeb

Once you click on "Add a Collection", you will be invited to give your Collection a name and choose Supabase as a Data source:

You will then be able to select the Table from which you want to pull data:

Notice that this gives you access to 2 separate modes to access the fields in the table:

1. a "Guided" mode, and
2. an "Advanced" mode.

Guided mode

By default, the "Guided" mode returns the data from all the fields.

In the example below, we decide to exclude the data from the "created_at" field in our "vehicles" table:

As a result, WeWeb does not fetch the "created_at" field.

This is helpful because we can exclude data that we don't want to load in the frontend, either because we don't need it or because it's confidential.

Advanced mode

Remember how we created 2 separate tables for vehicles and locations?

In the "vehicles" table, we made a reference to the "locations" table in our 'location_id' field so we know where each car is:

The problem is, the link only gives us the id of the location in the "locations" table.

If you choose the "Advanced" mode, you will be able to get the "name" field of the location instead of the id.

How?

By making custom queries to Supabase:

In the example above, we are telling Supabase:

• from the table selected in the Collection – in this case the "vehicles" table – please send me the data in the "id", "model", and "mileage" fields
• look for the 'location_id' in the "vehicles" table in the "locations" table and send me the data in the corresponding "name" field

If we only ask for the data from the "location" field of the "vehicles" table, Supabase will only return the id:

How to Display Supabase Data in WeWeb

Assuming you were able to fetch data from Supabase in a WeWeb Collection, you'll be able to bind the data from that Collection on your pages.

In the example below, we chose to display the car model and mileage in a Data Grid element:

🔥 Pro Tip 🔥

You can bind arrays of data to any Container in WeWeb. Just bear in mind that the first child of the Container you bind the Collection to will be the repeated item. With that in mind, you might want the first child Element to be another Container with a number of items inside like a title, description, button or image.