yes, but how exactly depends on the API, we have some pagination examples in the marketplace and we have some on YT
load more would be similar, only that you want to load starting from item, limited by X items
@John Siciliano do you remember if oyu made any videos on that specifically?
for the flotiq api i have access to pages its just the connection between button and variable im after.
query GetList($page: Int) {
someList(page: $page, limit: 12, order_by: "global_score"){
name
id
}
}
{
"page": 1
}
also while I have you. is it efficient to create dynamic items by creating a dummy item styled in webstudio then just duplicate that with all the data i recieve from a graphql response. My end goal is to have full control of the data while still having style choices and tokens in webstudio. or is there a better way.
Load more isnt recommended because it doesnt append the results, it just loads the entire thing again plus more. Also, I would only use pagination when there are too many items for the browser... load more doesnt solve that as they are all still there. Load more also makes it hard to find something deep in the list
That query looks like Hygraph a bit so I'd look at the Hygraph template and insert the pagination to see how it works
it efficient to create dynamic items by creating a dummy item styled in webstudio then just duplicate that with all the data i recieve from a graphql response. My end goal is to have full control of the data while still having style choices and tokens in webstudio. or is there a better way.
This sounds like you need a collection which will replicate your instance for how ever many items you have in the response. You can design it in the collection or outside of it and drag it in the collection. Once you bind the collection to the array, you'll see that box or whatever replicate. Make changes to one and it affects them all. Each one is the same except it has access to the current iterations data
ah yeah the collection was my first attempt but I dont have a lot of control there. I may in the future end up with a lot of items so was looking for a simple way to control the pages. My current script doesnt reload all data it only appends each page to the end. I would like to use the collection but not sure on how to bind a button to the page variable in webstudio. I can only see system slug being used in hygraph integration.
True what John Says, I actually forgot about it but he spent a lot of time on this.
To truly make a good infinite loader, it will either take a client-side script that fetches and adds content or a special component that can do that
This infinite load type of thing isn't very SEO friendly I would say, so client-side rendering for everything that goes after the initial load is actually quite aceptable
There is something we are discussing internalyl that could help with interoperability between custom client-side logic and rendering with webstudio, e.g. using client js to set a new array of data on a collection.
But this was a first discussion, we haven't decided anything yet.
The biggest issue when you want to do client-side custom logic like that is you would want to reuse the same elements and rerender the list.
What you could do today is use a hidden section, fully styled as a template, add attributes to it and use some templating system on the client on top of it to render your updates when loading. This is advanced stuff though.
this is what im doing as i want to use webstudio styling. i am applying data to the first item but this does add extra dirty code to my system. a hidden element could be better
yeah this is basically what I mean but you are not using some template engine that would make this code much simpler
ooh i will check this out. cheers
ah this would lose me the ability to style using webflow UI right.
not necessarily, you can just add the right attributes to webstudio elements, then grab that entire thing as a template via parentelement.innerHTML
