How to update a GraphQL query based on a user action?

[aleksb3]

In a collection I show a list of items and in my GraphQL query I limit these to 5 items (ie. query { items (limit:5) { name, etc... }}).

I was wondering if below this list I could create a button and somehow update the GraphQL query when a user clicks on that button the next "x" number of results are displayed?

[kof]

Check out our demo for filters, its essentially the same https://docs.webstudio.is/university/how-tos/using-filters-to-dynamically-display-content

[aleksb3]

Hi Oleg I watched the demo.

I'm struggling to figure out how to update my GraphQL query after the data is loaded when a user clicks a button to show more results.

Here is my Graph query:

query ($offset: Int!) {
casinos (limit: 5, offset: $offset) {
sort
name
slug
logo {
id
}
bonus
terms
visit_link
}
}

I want the offset variable value to increment by 5 each time the user clicks a link so that on the page I've built the next 5 results show each time the link is clicked.

Is this possible to do changing the limit or offset after the data has already been loaded?

[kof]

you need to use system.query.yourvariable where yourvariable could be the offset if that's what you are submitting by the filter, tounderstand how the system works, I recommend replicating what was showed in the video first, before making own version, also check out other videos which show the work with graphql, e.g.hygraph demo