I’m playing around with the concept of a no-code, paged list. I have it pulling in data just fine, but that gets me the first “x” results. I want to append a query string and pull the next page’s data.
I’m not seeing a way to add an offset to the connected data in the visual CMS. I’d like to bind that to a query parameter or something so I can get page 2, 3, and so on. Is this supported, and if not, anyone see a hack to add it in?
Welcome, @kayakyakr, to the forum community!
I think you could use query params like offset, limit etc for pagination.
Please take a look at the below Content API, I think that can help.
For more detailed information, you can refer to these resources:
Here’s a sample code that demonstrates how you can generate static paths for pagination:
export async function getStaticPaths() {
const limit = 100;
let offset = 0;
const pages = await builder.getAll('page', {
options: { noTargeting: true },
fields: 'data.url',
})
while(pages.length === (limit + offset)) {
offset += limit;
pages.push(...(await builder.getAll('page', {
options: { noTargeting: true },
fields: 'data.url',
offset,
limit
})))
}
return {
paths: pages.map((page) => `${page.data?.url}`),
fallback: true,
}
}
I hope that helps, feel free to let us know how that goes.
Yes, I could do that within my codebase, but I’m trying to use the visual CMS’s built-in data connectors, binders, and the repeater.
I was thinking about adding a fetch to the scripts (within the builder page) that adds the results to the state. Bindings should be able to then pull those values for components. That’s the theory, at least. Is there something there?
I could do a pagination wrapper custom component, but I’m not sure if I’d be able to use the data that I pull into that component to create a repeating, bound subsection.
Hi @kayakyakr,
You can utilize state bindings within your components. For detailed instructions, refer to the documentation here.
When working with the provided data connectors, you’ll find an option to access the query tab. This allows you to set limits and implement custom queries.
For a deeper grasp on querying within the visual editor, check out this informative post here.
Give these approaches a try and feel free to share your results with us. Your feedback is valuable!
