Tutorial 6 - Answers to the Variables Challenge

last time we challenged you to pull together everything you'd learned to create some pagination buttons powered by graph answers here! challenge objective for this challenge, we'd asked you to set up your own simple pagination controls this combined several of the skills you've learned so far as usual, don't worry if you need to check these answers before completing the challenge on your own on a new page you create, the user should be able to see the first three items in the gallery webapp then, when they press the page 2 button, the page should refresh and they should see the second page of results step 1) writing the graph query firstly, here's the query without variables query gallery by page { records(per page 3, page 1, filter {table {value "webapp 1"}}) { page #optional results { properties id } } } now let's add the variables query gallery by page($page int) { records(per page 3, page $page, filter {table {value "webapp 1"}}) { results { page #optional properties id } } } notes the most difficult part here might have been working out the type here the query expects page to be an integer the documentation panel confirms this from the documentation panel, you can also see "= 1" after the type this is a default, which means if no variable is passed through, the variable will be given a default value of 1 not all variables will have defaults the type here does not have an exclamation mark ! so the query won't deliberately fail if no value is passed in we set per page to 3 step 2) sync the query to the site using siteglide cli refer back to tutorial 5 to refresh these steps step 3) adding the html controls we gave you these in the tips you'll have needed to add them on a page of your choice 1 2 3 pressing one of the buttons will redirect us to the same page, but will be adding a page query parameter to the url this is the easiest way to pass variables to liquid because liquid runs before the page loads, and the url is one of the only available sources of dynamic information at this point it's also possible to pass information to liquid on another page via an xhr request this can lead to smoother ux, but is more challenging and will be covered in a future tutorial step 4) reading the url parameters let's say we pressed the second button, our relative url will now be /my page slug?page=2 as we showed you in the tips, liquid can read this parameter at the following dot notation path this will output the value on the page {{context params page}} or you can store this in a variable, which we'll need to do here {% assign current page = context params page %} by the way, the keys in context params are dynamically generated for any query parameter in the url, so you can pass through any variable you like with this method step 5) feeding the variables into the query a) first, let's set a default value, just in case a user arrives at the page without setting the parameter {% assign current page = context params page | default 1 %} b) the query is expecting an integer, so let's apply an integer filter that will change the type to an int without changing the value {% assign current page = context params page | default 1 | plus 0 %} c) let's add the graphql tag with the variable parameter {% assign current page = context params page | default 1 | plus 0 %} {% graphql my result = "gallery by page", page current page %} step 6) output the results we can output the results using the variable name we defined in the graphql tag {% assign current page = context params page | default 1 | plus 0 %} {% graphql my result = "gallery by page", page current page %} {{my result}} if pressing the html anchors changes the results by fetching different "pages" of json results, you've been successful congratulations if you're having difficulty with any of these steps still, please don't hesitate to ask for help on the forum full code liquid {% graphql my result = "gallery by page", page current page %} {{my result}} 1 2 3 graphql query gallery by page($page int) { records(per page 2, page $page, filter {table {value "webapp 1"}}) { current page #optional results { properties id } } } optional taking this further the next steps give you ideas for how to take this further they are not part of the initial challenge! step 7) output a layout (optional) these json results don't look great remember, you can use liquid to pass the results into a layout if you can find that layout's relative path in code editor {% assign current page = context params page | default 1 | plus 0 %} {% graphql my result = "gallery by page", page current page %} {% assign result array = my result records results %} {% for this in result array %} {% include 'layouts/webapps/webapp 1/list/my layout name', this this %} {% endfor %} however, you won't have access to the user friendly names for fields in that layout, because graphql will output the raw database ids for fields you'll want to target fields in this layout with syntax like {{this properties webapp field 1 2}} you can view the database ids for fields in the admin using the toggle in the top right of the screenshot, or you can look at the keys in the json results step 8) use the results of the query to only show buttons you need (optional) by returning total pages from the query, we'll know exactly how many pagination buttons to display query gallery by page($page int) { records(per page 3, page $page, filter {table {value "webapp 1"}}) { current page total pages results { properties id } } } you can then use this to manipulate the html pagination controls {% for page in (1 my result records total pages) %} 1 {% endfor %} next time next time, we'll learn how to sort the results of your query let's go!