# How can I paginate (or put an offset) into Builder Data I fetch in a page?

**URL:** <https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574>\
**Category:** Technical Questions\
**Created:** [January 12, 2022, 6:05pm UTC](https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574 "2022-01-12T18:05:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jballo](https://avatars.discourse-cdn.com/v4/letter/j/3da27b/32.png) [@jballo](https://forum.builder.io/u/jballo)\
**Post date:** [January 12, 2022, 6:05pm UTC](https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574/1 "2022-01-12T18:05:37Z")

</div>

I have a Builder Page, where I’m using the new Data feature to bring in data from a content model I also have on Builder:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/3cabbbd7cc46aaa49166cc8a7b997c53a23377cb.png)

I want to know how I can introduce pagination onto the page - I think I need to know three things:

1. How can I introduce an offset onto the query being made? I don’t see that as an property I can select from, and I don’t know how the custom query works on this feature
2. Depending on that, how can I have the value to be passed to the offset be read from a URL param?
3. Given the first two steps, how can I create a `earlier posts` and `later posts` link, that would link to this same page, but alter the `offset` of the URL param?

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [January 12, 2022, 7:43pm UTC](https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574/2 "2022-01-12T19:43:43Z")

</div>

@jballo Great question, at this time our query editor UI doesn’t accept variables, so I actually think the best way to accomplish this would be to hit the API directly, either within your app, or [within the Custom JS + CSS window](https://www.builder.io/c/docs/guides/custom-code)

You can see in our API Explorer, offset is an available param: [Builder.io: Drag and drop page builder and CMS](https://builder.io/api-explorer). If you havent yet, I would recommend playing around with our Explorer to find the exact API call that you want.

Based on that, you can set a variable within state (`state.offset = 0`) and then update that offset based on either a URL param, or if you are using the `earlier posts` and `later posts` buttons. For the buttons you can [add custom actions to update state.offset any time the user clicks the button](https://www.builder.io/c/docs/guides/state-and-actions).

Now that you have the offset within state, you can use that as a parameter when making your API Call…so say you were querying a blog-article model, you could hit the API within the Custom JS+CSS window:

```auto
async function main () {
  async function fetchData () {
    return fetch('https://cdn.builder.io/api/v2/content/blog-article?apiKey=YOUR_API_KEY&limit=1&offset=${state.offset}')
      .then(res => res.json())
      .then(data => {
        state.blogArticles = data;
      })
  }
  await fetchData()
}
export default main();

```

Now you should have the correct articles set to state.blogArticles, and by [binding the data to relevant elements](https://www.builder.io/blog/builder-data) you can dynamically update the content on the page.

Try that out and let me know if that works for you!

---

<div class="post-metadata">

**Author:** ![jballo](https://avatars.discourse-cdn.com/v4/letter/j/3da27b/32.png) [@jballo](https://forum.builder.io/u/jballo)\
**Post date:** [January 13, 2022, 6:31pm UTC](https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574/3 "2022-01-13T18:31:34Z")

</div>

> [@TimG](#):
>
> Now you should have the correct articles set to state.blogArticles, and by [binding the data to relevant elements](https://www.builder.io/blog/builder-data) you can dynamically update the content on the page.

Hi Tim!

Thanks for the input. Just to confirm I understand, when you said the query editor UI doesn’t accept variables, does that mean that I can’t refer to the page `state` or anything in the query editor UI that I screenshotted?

Is that possibly a feature that would be added soon? Or perhaps to be able to write some custom code right here, rather than in the Custom JS/CSS Window?

Also, is there a doc for how to use the custom query? It says “any valid MongoDB query” but I don’t really understand how to use that:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/c89ad13ff555d003a733d712aa5f828245afe424.png)

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [January 14, 2022, 6:16pm UTC](https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574/4 "2022-01-14T18:16:32Z")

</div>

@jballo yes that is correct, if you want to reference state or a variable, you would need to enter a manual fetch either within your app or the Custom JS/CSS window. Even the custom code window you included a screen shot of does not currently support variable/state references.

This is a request we have heard before and I have created a card in our backlog, and will raise it to our dev team, though for now we do not have a set timeline. If that should change I will let you know!

As for documentation, the best we have is within our [API documentation](https://www.builder.io/c/docs/query-api), as well as our API Explorer: [Builder.io: Drag and drop page builder and CMS](https://builder.io/api-explorer) which is a great tool to play around with to see how you can write the correct query for what you are looking for. For MongoDB query documentation, I would recommend checking the [MongoDB website](https://docs.mongodb.com/manual/tutorial/query-documents/)

Let me know if that helps!

---

<div class="post-metadata">

**Author:** ![jballo](https://avatars.discourse-cdn.com/v4/letter/j/3da27b/32.png) [@jballo](https://forum.builder.io/u/jballo)\
**Post date:** [January 17, 2022, 2:03pm UTC](https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574/5 "2022-01-17T14:03:19Z")

</div>

Hi Tim,

Thanks for the advice. I am trying filters similar to what I can find in the MongoDB documentation, and it doesn’t seem to be working…

I try this as a custom filter:

```auto
{
  "name": "Beef"
}

```

Filtering on a content model I have:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d031d5cace1e9d29a76183f081a3929d58ee18b9.png)

It doesn’t seem to filter the returned records from that model tho - I’m still getting all of the records, not just ones whose name matches this value, from what I can see in the State Inspector.

I wonder if you could provide any advice as to whether I’m setting the query up wrong, or whether this is a bug in Builder?

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [January 19, 2022, 12:02am UTC](https://forum.builder.io/t/how-can-i-paginate-or-put-an-offset-into-builder-data-i-fetch-in-a-page/1574/6 "2022-01-19T00:02:19Z")

</div>

@jballo probably the easiest way, and what I would recommend, would be to use the built in filters for provided data fields. So for example, instead of writing a custom query, could you just query off Title include “beef” for example, like shown below:  
 ![Screen Shot 2022-01-18 at 4.03.06 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/8970bad8aad4a6285fcfd0144c6c0af479e78229.png)