@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!