Supabase collections and pagination

Hi there,

I am usinig supabase and custom dropdown filters (these filters are great btw I will share them soon)
To get the dropdown options, I am using a rollup no code function

Problem : Using pagination, it only shows the options available on the page … I saw in a tutorial that the pagination filter using supabase affects the backend level and not the fronend. I think that is the issue…

What would be the most efficient way to get all the option while using pagination ?
Also, I am using a map next to the collection list and I d like all the items displayed

Best thing would be to have the option to have the filter in backend or frontend I think (like other DB). Is it possible ?

Thanks !

Hi!

I think you should remove your filters from the collection and put them inside a global formula acting like a computed view.

Another way do achieve it would be to create a dedicated collection to get the list of options, it would be the best performance wide because you will never have to retrieve all your data.
You can probably create a distinct select with the advanced mode on the collection to get all the available values and use them inside your filter UI.

But you may have to do it for every filters you have on your UI, if you have many dropdown, so the first idea is simpler.

Tell me if its not clear for you

Hi !
Thanks for your answer
I have to say it is not so clear for me :smiling_face_with_tear:

First solution : What do you mean by “global formula acting like a computed view” ?

Second solution : if I understand well, you mean to crate new collections for each dropdown (seems ok to me) - but I am afraid It would filter only the elements on the page …
Also, I’m not sure how the search bar would work in this case (yeah, there’s also a search bar)

Thanks again !

What I mean is, if you want to use front end filters instead, you can remove the filters from the collection, and apply them inside a global formula.

So you can keep both your collection vanilla, and have a filtered version.

Then, I provided you a second solution, it could be more optimised, but more complex, you will have to create a view in supabase, each view will return the available option for a given filter, and will have an associated collection in your project.
This way you will fetch only the data you need, and not your whole dataset.
The search bar will continue to work with a backend filter too.

Ok thanks for the answer.
I think understand now

First option: create a global formula that will apply the filters from an un-paginated call of the same collection (and for example display this new collection on top of the global one) only if the dropdowns are not empty). Then keep a paginated state for the full/global collection.
This solution seems great and might also increase loading speed ? (if i’m right) - cause right now its very slow

Second option: keep only one collection, paginated and fetch the dropdown options from a view created in supabase (just watched the voting system using supabase so now i understand views haha)

Am I right ?

While I am here and you seem to know a lot about supabase:

For now, I am running some JS formulas for each of my Items to display them differently according to

  1. the user position and 2.Today date (I am displaying places and rather they are open NOW, and the distance to the user), also playing with colors etc. I know it is not optimised to run them in the frontend for each of my items. I thought of 2 solution:
  2. Create global formulas with only one return as an object for each item
  3. Create a view in supabase (seems a bit rough to do these calculas)
  4. Create edge functions + views (IDK if possible)
  5. Make it a “lazy load”… (IDK if possible)

Any advice ?

Thanks again for everything

Have a good day :wink:

Also, Last but not least :wink:

I am wondering if its good practice : creating a collection fetch (in the add collection) with the filters directly …

Depends on the usecase, you should do it like that most of the time tho.

1 Like