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

Technical Questions
1

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
image736×1648 63.6 KB

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?
2

@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

You can see in our API Explorer, offset is an available param: Builder.io: Drag and drop page builder and CMS. 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.

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:

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 you can dynamically update the content on the page.

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

3

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
image1244×846 24 KB

4

@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, as well as our API Explorer: Builder.io: Drag and drop page builder and CMS 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

Let me know if that helps!

5

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:

{
  "name": "Beef"
}

Filtering on a content model I have:

image
image1542×1228 44.8 KB

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?

6

@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