How to properly extract and show data in the Select field?

Hi, dear community users!

I have the following application structure: Customer - Project - Order (or in tree view)

  1. Customer
  • 1.1 Project
    • 1.1.1 Ordering

This is implemented using “links” in Supabase through connected table IDs.

I also implemented the selection of values in the Select fields in the frontend—on the Order page. I have the following logic: Only those projects that are “linked” (in Supabase) to their Customer should be displayed in the Project (Select) field. That is, there are two Select fields in the form in the application: Customer and Project, which show values from the Supabase database tables. Overall, I managed to implement the logic of displaying only “linked” projects with the selected customer - using a conditional filter in the formula (this is great, I really enjoy working with Weweb!

But I have a question: how reliable is this type of filtering before displaying values in the Select field? Would it be possible to somehow “hack” the code and see all projects for all customers? How can I check this?

And another question in this regard: is it possible to configure conditional filtering in Supabase itself (on the backend side) so that the filtered values are immediately loaded into the frontend? What do you think—is this possible? Or am I worrying too much (or writing silly things…)?

I would appreciate any advice from experienced users and developers!

Hi @alcompstudio ,

Everything you send from your backend (Supabase) to the fronted (browser) is completely exposed and no “hack” needed to get those information. All that data is visible through browser’s DevTools

So the right way to protect the data from unwanted browsing is to filter data on the backend and send to the browser filtered records only.

I’m not familiar with Supabase, but you can refer to their docs: JavaScript API Reference | Supabase Docs

3 Likes

@Batik_Okazov Thank you for your reply! So my concerns are not unfounded after all. I will look into the backend options for more secure data handling.

2 Likes

This turned out to be a very difficult science for me… I don’t have “classical” programming skills, probably can’t create something on the backend (Supabase) using javascript.

Is there any possibility to implement on the Weweb side “sequential” loading of data from database tables?

Maybe it is possible to make a separate collection with a filter, specifically for the Project field, which provides for displaying values in the Project field depending on what value is fetched in the Customer field? That is, not to load (fetched ) all data rows from the database for the Project field, but only specific rows/records?

And if I select, for example, a different value in the Customer field, then the Project field “fetches” other rows (i.e. the query to fetch rows for the Project field is executed every time I change the value in the Customer field).

Is there such a “simplified” solution?

I’m afraid any kind of simplified solution will have serious flaws in terms of scalability and maintainance.

Frontend can only filter data that the browser already got from the backend. So if the data is huge the browser will slow down or crash.

Any workaround on the frontend side will be temporary and you will definitely have to refactor your approach later which may cost more time/money/resources.

Right now Weweb datagrid can process a large data sets due to its dynamic rendering feature. You can take a look at it.

But again, I’d invest time in researching Supabase to make things work right. LLMs can help you with that.

I created a separate collection from the same Projects database and applied a filter to it. On initial fetching, the records are loaded as required (it can be seen from the collection settings). I get the right Project that is associated with the Customer in the Supabase DB.

But as soon as I refresh the page, fetching the collection stops working… An error appears until I do the manual setup again and fetch the data in a new collection.

code: "22P02" 
details: null 
hint: null 
message: "invalid input syntax for type bigint: """

Why is this happening, what am I missing?

On page reload all the input variables values are cleared (including “select element” value).

When do you try refetch the collection? On page load event? If so - there may be no value chosen inside your “select customer” element and your filter just don’t get a customer ID to fetch the data.

Try to monitor the “Select - Customer - value”. Is there any value at the moment you’re refetching the data?

1 Like

Yes, you’re right, I looked at the logs when loading the page and noticed that variables are loaded first (and they initially have a value of null) and then collections are loaded after them… I don’t know why in this order, it’s probably a logical sequence of data retrieval and display, but the fact is that the Select field doesn’t get its value initially (and it’s configured to initially fetching a collection from the database), but gets it after the collection is loaded…

But all collections are fetched at the same time at some point, and I probably need an individual collection to be fetched not along with all of them, but only at the right moment. I can assume that I need to create a workflow specifically to fetch a collection at a certain moment? And in the general settings disable automatic collection fetching?

What do you say, this could work, am I on the right track? ))

yes, this definitely could work.

You can also create a variable and set its “preserve on navigation” or/and “save in local storage” settings to “yes”. Then just bind this variable to your filter.

In this case value of such variable will be preserved on navigation between pages or page refresh.

1 Like

Yes, that’s a good idea too! Thanks for your tips! I will test using my new acquired knowledge :slightly_smiling_face:

1 Like