website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
17min

Tutorial 2 - Pagination

Turning the Page! In tutorial 2, we'll control how many items Graph returns on each Page of results and retrieve specific Pages.

Prerequisites

  • You have completed the first Learning GraphQL tutorial.
  • About GraphQL- optional- Read more about GraphQL and when it might be best used.

Introduction

When GraphQL returns results, it will organise them into pages. This allows it to be more efficient, as it only returns the data that is needed straight away. At the same time, the rest of the pages are organised ready for the next request. 

You'll always need to think about Pagination when using GraphQL, even you only want to retrieve the first Page of results.

Per Page

per page is an argument used to define the number of results that will be returned on each page.

It's now a mandatory argument on some types of query so we've already got the argument in our query from the last tutorial:

GraphQL
|

Experiment by changing the integer in the argument from 20 to another value. Observe the difference. It's recommended to keep the per_page number as low as possible- for efficiency and performance.

Let's consider a few situations:

  • You want to display 3 items - Set per_page to 3- only the three items you need will be retrieved.
  • You want to display 20 items at a time, but allow the user to view the next 20 when they've finished reading - Set per_page to 20
  • If you want the user to be able to change per_page dynamically, we'll cover this when we look at variables in a future tutorial.
  • If you think you need to display more than 2000 items at a time (perhaps to provide data to a JavaScript plugin), speak to us and we'll give you some advice. (For example, you might need to use an XHR (Ajax) request to fetch each page when you need it.) There is no official limit to how much data you can retrieve, but you will most likely start to experience problems which we won't be able to support.

Returning Pagination Metadata

You can return pagination metadata alongside your query results:

  • current_page - Returns the number of the current page.
  • per_page - Returns the number of items on every page.
  • has_previous_page  - A boolean which is true if there is a page before the current page.
  • has_next_page - A boolean which is true if there is a page after the current page.
  • total_pages - Returns an integer representing the total number of pages in these results.

These optional properties can be requested alongside total_entries and your results object, like in the example below. Try them out. Code:

GraphQL
|

Notes:

  • Properties like has_next_page and has_previous_page are most useful for adding pagination buttons of your own. 
  • You can see that by default, we get the first page of results- so page returns 1.

Explorer:

Document image

Changing the Page

You can view other pages by setting the page argument to the page of results you'd like to see. Code:

GraphQL
|

Explorer:

Document image

Next time

In the next Article, we'll look at how to filter results.

For example, we'll learn how to return items from only a specific WebApp.

Let's go!

Updated 12 Mar 2021
Did this page help you?
Yes
No
UP NEXT
Tutorial 3 - Filtering the Results
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Per Page
Returning Pagination Metadata
Changing the Page
Next time