🎯 GET Data from Supabase

Tutorials
1

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

1830Ă—1730 164 KB

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

1364Ă—762 62.1 KB

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

2490Ă—1214 214 KB

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

1368Ă—1246 82.3 KB

:rotating_light: Warning :rotating_light:

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:

1600Ă—1004 86 KB

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 "createdat" field in our “vehicles” table:

2000Ă—1205 184 KB

As a result, WeWeb does not fetch the "createdat" 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 'locationid’ field so we know where each car is:

2444Ă—706 102 KB

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 'locationid’ 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:

2000Ă—1002 163 KB

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:

2000Ă—1015 230 KB

:fire: Pro Tip :fire:

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.

7 Likes
2

Thanks for this, @Joyce!

Could you please share a bit more about the realtime configuration on the weweb side? I’m loving it and it’s working great so far!

  • What does “fetch collection” do in context of a realtime collection? Do I need to use it it at all?
  • what happens if I turn off “fetch this collection automatically”?
  • how does isFetching and isFetched behave for a realtime collection?
  • is there a way for me to read and take action from a realtime event in a workflow? For instance, I’d like to change a variable value once I receive an event (new data) from the realtime collection.

Thanks!

1 Like
3

@Joyce Do you can show how to retrieve Data from the storage as presigned URL. Is there a way to handle it with JS? In the case of a collection whats the best way to fetch data from the supabase storage?

Would be great if you can show us some ideas! :slight_smile:

4

Hi,

For now we don’t have implemented storage features yet. But with javascript you have access to the supabase instance and can perform any operation allowed by the SDK (v1.0).

wwLib.wwPlugins.supabase.instance

From the documentation

const { data, error } = await wwLib.wwPlugins.supabase.instance
  .storage
  .from('avatars')
  .download('folder/avatar1.png')
5 Likes
5

worked perfectly! I didn’t know that there are instances from the plug-in. Where I can find the instances from the oder plug-ins? Ist there a documentation? And for the collection I could solve my problem with the loop in a workflow.

6

Its not documented yet because we prefer people to relay to the nocode actions. Its not a really public API, but I know this one is very used so we will take care to not break it this is why I feel confident to share it with you.

We are discussing internally on the best way to give you access to every low level feature in a standard and officially supported way. :slight_smile:

Note : You can find others internal plugins API in wwLib.wwPlugins but as I said, support is not guaranteed

Dont hesitate to make a feature request so we can include them in our futures releases batches.

4 Likes
7

Thanks for the info here!!

1 Like
9

Hi Alexis, are you up to date on the Supabase sdk version?

10

Hi, not yet unfortunately but we plan to work on it this month! Upgrade to the v2 will be the first thing we do in the plugin.

2 Likes
11

Hi @Joyce - I have followed this to the letter and I cannot get Weweb to fetch anything from Supbase at all. Ive enabled real-time etc. and still nothing no matter how many records I add. I have triple checcked the project URL and API key etc to no avail.

Any thoughts here?

THanks!

Jon

12

Hi @Jonny :wave:

Do you have RLS enabled in Supabase on the table you’re trying to fetch?

If you do, you’ll need to add a policy in Supabase that allows users to read the data from the table.

1 Like