# Supabase backend pagination

**URL:** <https://community.weweb.io/t/supabase-backend-pagination/4661>\
**Category:** How do I?\
**Tags:** supabase\
**Created:** [September 29, 2023, 2:46pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661 "2023-09-29T14:46:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ytrewq](https://avatars.discourse-cdn.com/v4/letter/y/3ab097/32.png) [@ytrewq](https://community.weweb.io/u/ytrewq)\
**Post date:** [September 29, 2023, 2:46pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/1 "2023-09-29T14:46:55Z")

</div>

I used WeWeb with Xano as the backend, and I’ve always used backend pagination ([https://m.youtube.com/watch?v=CSNCVPYc7wE&t=142…](https://t.co/BKUppgEKNW)).

However, for my new project, I’ve chosen Supabase.  
How does backend pagination work with Supabase?

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 29, 2023, 3:17pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/2 "2023-09-29T15:17:02Z")

</div>

As there is no bindable offset and limit in the current Supabase Plugin in WeWeb @Alexis would be lovely to have this.

You can do a query like this, which creates a function actually, which you then can call with GraphQL maybe, and with REST API for sure.

You can create the function by inputting a function like this into your SQL Editor

```auto
CREATE OR REPLACE FUNCTION get_available_jobs(pages integer, page integer) 
RETURNS TABLE (id int8, is_emergency boolean, company text, address text, city text, last_modified date) 
SECURITY INVOKER -- Use SECURITY INVOKER to execute the function with the invoker's privileges
LANGUAGE plpgsql AS $$
BEGIN
    RETURN QUERY
 SELECT
  j.orders_proxy_id, j.is_emergency, j."NAZEV_ODB", j."ULICE_ODB", j."MESTO_ODB", j."DATUM_SPL"
FROM
  orders j
WHERE -- optional
j.part is null -- optional
ORDER BY j."DATUM_SPL" DESC
LIMIT pages
OFFSET (page-1) * pages
;
END;
$$;

```

 ![Screenshot 2023-09-29 at 17.15.22](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/339213244796e4166cf0a522f5797970496191a4.png)

Fields and the variables are up to you.

Now that I’m looking at it, I see there is some pagination in the plugin, but I’m not sure if it’s on the backend? @Joyce?

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [September 29, 2023, 3:40pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/3 "2023-09-29T15:40:04Z")

</div>

Hi @ytrewq 👋

The pagination you setup here in a Supabase collection will be a backend pagination because you are configuring the query before the data is fetched:

 ![CleanShot 2023-09-29 at 17.36.20@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/059cade05273975da22b7cd2e57cf4a9924043ab.png)

That pagination should work well with the Paginator element.

Depending on your use case, that may not be flexible enough and you might want to revert to @Broberto’s proposed solution.

By the way, the team is working on adding options to the Supabase plugin and does have this in mind 👇

> [@Broberto](#):
>
> As there is no bindable offset and limit in the current Supabase Plugin in WeWeb @Alexis would be lovely to have this.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 29, 2023, 3:41pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/4 "2023-09-29T15:41:09Z")

</div>

I just noticed this also :)) Does this paginate on the backend? I’d love to see how it works.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [September 29, 2023, 3:44pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/5 "2023-09-29T15:44:17Z")

</div>

Yes it does paginate in the backend. See here the response sent by Supabase to my browser only includes 2 items:

 ![CleanShot 2023-09-29 at 17.42.55@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9aabcb74474b9b9fea620f1ff35fa3656afc3c01.jpeg)

No idea how it works under the hood though 😅

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 29, 2023, 3:47pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/6 "2023-09-29T15:47:45Z")

</div>

I think it actually does the operation of calculating the **offset** on the frontend. So the `(page - 1) * pages` part is done by WeWeb, after that **limit** is done in the call, together with the calculated **offset**.

 ![Screenshot 2023-09-29 at 17.46.00](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/31da6cae84216d11fb2ff974ec0df1db71ca3bae.png)

Cool 🙂

---

<div class="post-metadata">

**Author:** ![ytrewq](https://avatars.discourse-cdn.com/v4/letter/y/3ab097/32.png) [@ytrewq](https://community.weweb.io/u/ytrewq)\
**Post date:** [September 29, 2023, 4:56pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/7 "2023-09-29T16:56:54Z")

</div>

Hello Joyce,

Thank you very much for the response. By the way, it’s exactly the answer I wanted to hear. So, that’s perfect.

Since configuring the query before the data is fetched works for pagination, can I apply the same concept for other types of filters?

---

<div class="post-metadata">

**Author:** ![ytrewq](https://avatars.discourse-cdn.com/v4/letter/y/3ab097/32.png) [@ytrewq](https://community.weweb.io/u/ytrewq)\
**Post date:** [September 29, 2023, 5:00pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/8 "2023-09-29T17:00:42Z")

</div>

Ciao Roberto

Thank you very much for your response.

As for pagination, @Joyce has addressed all my concerns, but the GraphQL query approach in Supabase is something I want to delve into because I need it for this project.

Do you have experience with it?

A.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [September 29, 2023, 9:40pm UTC](https://community.weweb.io/t/supabase-backend-pagination/4661/9 "2023-09-29T21:40:15Z")

</div>

> [@ytrewq](#):
>
> Since configuring the query before the data is fetched works for pagination, can I apply the same concept for other types of filters?

If you’re configuring the filters in that “Query configuration” step of the collection interface, yes, Supabase should only send back the relevant data to WeWeb.